Kaz.A - AGN Web!

制作事例　株式会社諏訪建設様

株式会社諏訪建設は大手ハウスメーカーとは違い施工中でもお客さまと密に話し合い、施工後も連絡を頂ければスグに対応し状態を悪化させません。
丁寧な仕事で長くお付き合いされているお客さまもいらっしゃいます。

公開　2016年9月1日
URL　http://www.suwaken.com//

●制作内容
•CMSの導入
•施工実績を読みやすくイメージを感じやすくしています。
•今後の施工基準に対しての取り組みを追加。
•旧サイトよりも写真を大きくイメージしやすくしました。

痒い所に手が届く!?　Chrome機能拡張

どもっ。Kazです。
メインのウェブブラウザは何を使っていますでしょうか？
私の場合は、safariからFierfoxを経てChromeで落ち着いています。
そしてWebの制作をしていくと、アレコレと機能拡張を入れては止め、入れては捨てを繰り返すのですが
その中で、意外と使える機能拡張を紹介していきます。

ユーザーエージェントの切り替えをサクッと行える
『User-Agent Switcher for Chrome』

アクセスするブラウザや端末の違いで表示がどう変わるか、サクッとチェックするにはもってこいの機能拡張です。
初期のプリセットも十分ですが、ユーザーエージェントの追加もできるので入れておくと便利です。

Cookieの管理が簡単
『EditThisCookie』

とにかく「サクっ」とブラウザのクッキーアイコンを押せば現在のCookieの状態を確認する事ができます。
Cookieの値も簡単に変更できるし追加や検索などなど機能も豊富ですので、Cookieを使ったサイト制作には必需品になると思います。

今見ているページを上から下まで画像にしたい!!
『Open Screenshot』

長いランディングページや各Webページの全体を把握したい。修正指示のためにページ全体の画像が欲しいなど
ブラウザのカメラアイコンをクリックすれば「ページ全てをスクリーンショット」するのか「見たままをスクリーンショット」するのかなど選べてサクッと画像にしてくれます。
プリントアウトする時にレイアウトが変わってしまったりする時もサクッと画像にしてプリントすれば崩れる事なく出力できます。

アナリィクスのチェックも簡単。
『Page Analytics (by Google)』

自身でチェック可能なアナリティクスを埋め込んであるサイトにアクセスした時、解析表示がONになっているとページ上部にアナリティクスの数値とグラフをそれぞれに表示してくれます。もちろん項目は変更できるので気になる項目を簡単にチェックできます。
また「今見ているページからドコへのアクセスが多いのか？」色分けやパーセント表示でチェックする事も可能です。
アナリティクスのチェックが多い方には本当に便利な機能拡張です。

よく探してみると、困っている事を解決してくれる機能拡張があったりするので、イロイロと試してみて使いやすいツールに仕上げてみましょう。

オススメがある方は、ぜひコメント欄に!!

WordPressで画像情報を個々に取得する。

どうもKazです。

WordPressで画像を扱う際に、画像のalt、キャプション(caption)、説明(description)を個別に引用する事がありました。
altはともかく、キャプションや説明の欄を使う事が今まで無かったのでネットで調べてみると、以外と個別に取得する方法を書いている方が見当たらなかったので自分のメモ代わりの為にも書いておこうと思います。

WordPressで画像を扱う際にIDを持たせるかURLを持たせるか考える事があるかと思いますが、画像からイロイロと情報を引き出す場合はIDを持たせた方が使いやすいと思います。

さて、画像はIDで持つ事にして、その画像の情報はドコにあるのかと言うと…
WordPressのDBは『メディア用』『投稿用』『カスタム投稿用』などキレイに分かれておらず『ごった煮』状態になっていますので探すのは大変なのですが

.wp_postmeta
（meta_IDをキーにpost_IDやはaltなどがあります）

.wp_posts
（IDをキーに、キャプション、説明などがあります）

この2つのDBの中に入っています。
※画像に情報を書き込み、AdminerプラグインなどDB内を確認してみてください。

それぞれの記録状態がわかったので
画像のIDをキーとして取得する方法を説明致します。

【altの取得】


$wp_alt = get_post_meta( 画像ID , '_wp_attachment_image_alt', true )

※altに関しては定番ですので、説明は不要かと思います。

キャプション(caption)、説明(description)の取得
前に説明した通りwp_postsの1レコードに書き込まれていますので、その1レコードを全部取得してから必要な情報のみ取得します。

【該当レコードの取得】


get_post( 画像ID )

これでIDに紐付けされたレコードが取得できます。
取得できる項目が23項目ほどありますが
その中で

キャプション = post_excerpt
説明 = post_content
タイトル = post_title

以上の項目で持っています。
ちなみに、こんな物もあります。

投稿のタイプ(画像のみ) = post_type
オリジナル画像のURL = guid

では、早速alt以外の項目も取得していきましょう。

【画像情報の取得】


$wp_rec = get_post( 画像ID )
// キャプション
$wp_caption = $wp_rec->post_excerpt;
//　説明
$wp_discts = $metas->post_content;

これで画像IDから基本的な情報が取得できました。

連続で取得する場合は、画像IDを配列に持ってループさせ
各情報も配列で持てば扱いやすくなるとおもいます。

Macawでデザイン→即HTML化

どうも、Kazです。

この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか？」と思ってしまうくらいのアプリでしたので紹介したいと思います。

そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
macaw_1607_00

記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。

続きを読む Macawでデザイン→即HTML化