Kaz.A - AGN Web!

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 )
			
				
					
				
					1
				
						$wp_alt = get_post_meta( 画像ID , '_wp_attachment_image_alt', true )

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

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

【該当レコードの取得】



		
		
			
			

			
			get_post( 画像ID )
			
				
					
				
					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;
			
				
					
				
					1
2
3
4
5
				
						$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化

PhotoShop講座：シャープネスを極める

PhoroShopを使っていて、良く使うフィルターの１つに『シャープネス』があると思います。
大半の方は、画像をハッキリさせるために使っていると思いますが
実際にどんな処理が行われているか詳しく説明できる方は少ないと思います。
今回は、このシャープネスの動きを知る事でPhotoShop使いのレベルを上げて頂こうと思います。

『そもそも、シャープネスって何なのか？』
日本語で言ってしまえば『輪郭強調』と言うヤツです。
色の差がある所の境目に
kabe_1606_1 kabe_1606_2

『明るい色ならば白く』『暗い色ならば黒く』して境目をハッキリとさせます。

kabe_1606_3

今回は、アンシャープマスクの設定を元に説明いたしますが
アンシャープマスクの『半径』に当る部分は『強調する際の幅』をさします。
『量』は『深さ』の事を差します。
この深さを軸に、浅い部分から深い所まではグラデーションで色調整処理されます。
この幅と深さを結ぶと、断面的には三角形をイメージして頂けると分かりやすいです。

つまりシャープネスのフィスターを効かせると言う事は、色の差がある部分に対してグラデーションの処理を行なっているのと同じ事といえます。

しかし、このシャープネスを効かせすぎるとハロー効果と言って、白浮きしてしまう現象が発生する事があるために
あまり強く（量を多く）する事ができない事があるかと思います。
現象としては、量に対して幅が狭いためグラデーションでの表現ができずベタ塗りで処理されてしまう部分が多くあるからです。

では、どうするか？

シャープネスを場合によては数回に分けて手動でグラデーションを作ればいいのです。
つまり、『幅は広く浅い』設定から『幅が狭く深い』設定まで数回に分けてシャープをかけます。
設定としては、半径を大きい数字から小さい数字へ。量を少ない数値から大きい数値へ変更しながらシャープを効かせます。
そうする事によって、手作業でグラデーションを作る事ができます。
たとえ2回でも効果的な処理となります。

これを上手く使う事ができると、厳しいピンボケ写真でも対応する事が可能になります。
また、シャープを1回かけたよりも自然なメリハリのついた写真に仕上げる事ができます。

最後に、1回シャープと2回シャープのグラデーション処理の違いを見て頂こうと思います。
赤線より上が2回シャープ、下が1回シャープで、部分的に見やすいように強調してみました。
また、グラデーション処理されている幅が分かるように緑の横線を引いています。（2回シャープの方は2本引かれています）

フィルターの動きを知ると言う事は、技術を上げる一歩にもなりますので
今回のシャープネスについては、色々と試してみて下さい。

検索結果から削除ページを速やかに消す。

今回、長くサイトを運営しているお客さまから
「削除したページを検索結果に出ないようにして欲しい」
との依頼を受けました。

大昔は…そう大昔。
Yahooでは巡回の希望とか、削除の希望とか
今考えると寛大に受けていた気がします。

さて、数年ぶりにこのような依頼が入ってきましたので、調べてみると…

基本的にには
・robots.txtを設置して、クローラーの巡回を拒否。
・メタタグでインデックスへの登録を拒否
の作業を行えと言う事なのですが。

Webサーバーにある限りアドレスが分かれば見れてしまう恐れが有るし、
新たにページを用意するのも何だし…
削除してしまうのが心情というもの。

そういった場合
かなり荒療治ですが、今回私が行った手順を試してみてください。

【手順】

１.消したいページはWebサーバーから削除！！

えぇ、思いっきり削除しちゃって下さい。

2.htaccessなど410対応は行わない

完全に行わない訳ではなく、この後の処理のために行わないで下さい。

3.Googleにはページ削除がある！

Googleのアカウントをお持ちの方はログインをして
Search Console　古いコンテンツの削除
https://www.google.com/webmasters/tools/removals?hl=ja

4.削除したいページのURLを入力してリクエスト!!

ここで、削除したいページのアドレスを入れてリクエストボタンを押すのですが、押した直後にチェックされます。
この時に、.htaccessなどの対応をしていると受付けてくれません。
また、チェックが通り「保留中」となっていても「削除済み」となるまで何もしてはいけません。
もし、チェックが通ったからと言ってリダイレクト等の処理を行なうと拒否されてしまいます。

5.数時間待つ…

今回の場合、24時間かからずに…正確な時間は分からないのですが…
確認した時間が24時間かかっていませんでしたので、そのくらいで削除して頂けました。
また、この時点でYahooの検索結果からも消えていましたので、
GoogleとYahooの連携はあるかと思います。

6.さぁ410対応

ここまで来てから、ページ削除の対応を取ります。

…とまぁこんな感じで…
場合により削除までの時間は変わってくると思いますが
検索エンジンに対してリクエストが行える場所があるだけでもありがたい事です。
削除ページを速やかに削除を行いたい場合は、一度お試しください。

音楽を作ってもらおう!!

動画作成を行って行くと、必ずおこるであろう
「あれ、この映像（音楽）どっかで同じ物が…」
と言う現象。
　
今回は特に個人の方で、音楽のそれを回避できるサイトを紹介します。

Jukedeck　URL:https://www.jukedeck.com/

使い方は至ってカンタン!!

どんなトラックを作りたいか？
「ピアノ」「フォルク」「エレクトリック」「アンビエント」
の4種類から1つを選びます。

どんな雰囲気の曲調にするか？
「UPLIFTING」「CORPORATE」「CHILLED」「AGGRESSIVE」
の4種類から1つ。

そして、曲の長さを設定できます!!
最長で5分ですが、ループや編集でなんとかできる長さかと思います。

あとは「CREATE MY TRACK」のボタンを押すだけ！！

たったこれだけで、オリジナルの曲が自動的に生成されます。
気に入らなかったら、気に入るまで何回も生成することができます。

無料の会員登録をする事で、月に5曲のダウンロードが可能です。

ただし…

ここからが利用に関してのご注意なのですが

著作権自体は、Jukedeckにあります。

そして

無料会員でダウンロードした楽曲の利用を行えるのは、個人または小規模ビジネス(従業員10人未満)の場合に限られています。
個人で利用するには本当にありがたいサイトです。
小規模ビジネス以外の場合は、料金が発生してしまいます。
大規模ビジネス(従業員数10人以上)では1曲21.99ドル(約2700円)でロイヤリティフリーの曲をダウンロード可能。
1曲199ドル(約2万4000円)を支払えば著作権を買い取ることができます。

オリジナルの曲をソノ業態の方に依頼した場合を考えると、時間的・料金的に安いか高いか…

それでも、他の制作物とかぶる事のないオリジナルの曲を用意できるのは
凄くメリットがあると思います。

研修旅行　報告!!

飛行機から1歩出た瞬間から、身に覚えのある気温と独特の湿度のおかげで「沖縄に来たんだ」と実感しながら預けた荷物を受け取り外へ。
沖縄の抜けるような青空と日差しに、数時間前まで肌寒い新潟に慣れていた体が驚いてるのを感じながら”ゆいレール”に乗ってホテルへ。
今回の研修旅行では、沖縄の”端から端まで”行き、歴史や文化を体験する事が目的で、
普通の旅行では行く事が稀な『沖縄最北端の辺戸岬』から南は『ひめゆりの塔』、『平和記念公園』まで、4日間と限られた日数ですが体感させて頂きました。

※Safariで写真が表示されない場合は下記の手順で『WebGLを有効』にして下さい。
(1)safari→環境設定→詳細→『メニューバーに”開発”メニューを表示』にチェックを入れる。
(2)メニューバーに表示された『開発』のメニューからwebGLを有効にする。

1日目

初日は、なんと言っても首里城。
首里城の形状、色使い。その周りにある円鑑池の佇まいに文化や感覚の違いを感じる事ができました。

パノラマ画像 ()

2日目

二度目となる『美ら海水族館』。
メインの巨大水槽でゆったりと泳ぐ巨大なジンベイザメは見入ってしまって、時間の経つのを忘れてしまいそうです。
その一角に、食い込むかたちの観覧席があり、そのジンベイザメを見上げて見る事ができます。

パノラマ画像 ()

天候に恵まれた『古宇利ビーチ』。
その砂浜は珊瑚が砕かれ細かくなった物だそうで、その細かくなる前のサンゴも棒状の物や枝分かれした物なども混ざっていました。ガイドの方によると色付けして箸置きなどにする人がいるそうですが、その珊瑚どうしがぶつかると小気味の良い金属のような音がするので、いくつか紐で吊るしてウィンドベルにしても良い感じ。
古宇利大橋もビーチからも見応えがあります。

パノラマ画像 ()

3日目

朝からの晴天。
こちらも再びの万座毛。沖縄の海は天気しだいで色が変わると言われる通り、晴天の海は以前来た時よりも澄んでキレイなブルーやエメラルドグリーンで染まっていました。
ゾウに見える岩は以前来た時よりも浸食が進んでいた気がしますが…どうなんでしょう。

パノラマ画像 ()

この日。日曜日は国際通りが午後から18時まで歩行者天国（歩行者優先のトランジットモール）と言う事で、車道から一枚。
観光としての国際通りですが、店の看板、色使いなどなど町並みだけでも違いと言う物が見えてきます。

パノラマ画像 ()

4日目

最終日となる四日目。
平和記念公園、ひめゆりの塔へ。
再び訪れましたが、胸を締め付けられる思いがします。

パノラマ画像 ()

全四日間、ガイドさんが言っていましたが『一度も雨に打たれずに観光できるのは本当に珍しい』との事。
移動中は雨に若干降られたりしましたが目的地に着くと『晴天』と言う不思議な天気で、本当に『おかげさま』でイロイロな文化、自然に触れる事ができました。
そして、また新たに興味を持っ事も個人的にはできました。

こういった経験をさせて頂ける研修旅行に行かせて頂いた事に
心から感謝します。

この記事の写真は全て弊社で撮影・掲載をしております。
普通の写真では『表現できない』『伝わりづらい』、そんな時に360度撮影をお勧めさせて頂いています。
撮影の際は三脚等で設置し撮影をしますので雰囲気を損なう事が少ない状態で掲載ができます。
お困りの際は、ぜひお声がけ下さい。

カタログから物撮りを”作る”

まず、ほとんど「ありえない」事があった時に役立つであろう
「イレギュラーな注文へ答える」ための記事です。

商品を掲載する際に、『品物が手元にない』『生産中で製品が１つもない』…などなど、写真が用意できなくて困る事があります。
そんな時に、掲載に耐えられるようなサイズのカタログなどの原稿があれば何とか…何とかしましょう!!

続きを読むカタログから物撮りを”作る”

『チョット役立つ』情報サービス

どうも、Kazです。
年度末でバタバタしている方が多いかと思います。
イロイロな情報をかき集め、クラウアント様や社内企画として提出や発表をする事が多いと思いますが
そんな中、情報源として『ちょっと役立つ』サービスを紹介致します。

【総務省 – 情報通信白書】

KAZ_somusyo

［LINK］総務省
［LINK］総務省　情報通信白書
※クリエイティブコモンズライセンスの設定がありますので、使用前に確認して下さい。

総務省が公開している情報ですので、信頼性は充分にあります。
しかもライセンスの規定を守れば使用してOKと言う事で、企画書や報告書などで便利に使える情報です。

【StatCounter】

KAZ_tatcounter

［LINK］ StatCounter

ブラウザのシェアはWEBを制作する側にとっても気になる事。
こちらのサイトでは、全世界から各国まで最新のブラウザシェアが表示されています。
また、ありがたい事にイメージやCSV、HTMLへの組み込みタグまでよういされていますので使い勝手も十分です。

【yourbrowser.is】

KAZ_yourbrowser

［LINK］ yourbrowser.is
※レポートが迷惑メール扱いになりやすいので注意して下さい。

ちょっと変化球で、クライアント様がどんな環境で見ているか気になりませんか？
それを確認できるのが「yourbrowser.is」です。
クライアント様にアクセスして頂き『Have this report emailed to: 』へコチラ側のメールアドレスを入れて[send]して頂くとレポートとして送信されます。
このレポートが、結構こまかくてSNSのログイン状況や広告ブロックを行っているかまで確認できます。

いかがでしょうか、他にも情報源として使えるサイトがあると思いますが
ライセンスに気を付けてご利用ください。

色・イロと悩ましい話。

Windowsや全ての発色調整が済んでいる方には”ほぼ”関係ない話かもしれません。
…そう、色の話です。

画像には大抵『カラープロファイル』と言う自己紹介（プロフィール）的な物が付いています。
その中身を簡単に言うと『何の色空間で表現されているか』と言う…
もっと簡単に言うと『色鉛筆何本あれば表現できる画像です』と言った感じでしょうか。
ですので、その情報の変換・共有が取れている『調整の済んでいる方』やsRGBが標準のWindowsの方には”ほぼ”関係ない話になります。
続きを読む色・イロと悩ましい話。

PHPからJavaScriptへの変数渡し

もはやアプリ化しているホームページですが、プログラム部分で使われる基本的な言語が『PHP』と『JavaScript』かと思います。
それぞれに得意とする部分がありますので、その得意とする部分で言語を分けて書いて行くと異言語間の変数の共有が必要になってくると思います。
今回、PHPとJavaScriptでの変数の受け渡しについてお教えします。
※［××××××.php］ファイルでの記述方法になります。

【PHPからJavaScriptへ　基本変数編】
PHPで使っている変数の内容をJavaScriptへ渡しjQueryなんかで処理したい事が多いかもしれません。

JavaScript記述内で

var $aa = "<? php echo $bb; ?>;";

1	var $aa = "<? php echo $bb; ?>;";

とするだけで変数 $bbの内容が$aaへ代入する事ができます。

【PHPからJavaScriptへ　配列変数編】
まず、基本的にJavaScriptが多次元配列に対応していないため、通常の配列の受け渡しについて説明します。

[PHP側での準備]　$ab = implode(“,”,$aa);
『implode』をつかって配列をカンマ区切りの文字列情報へ組み替えます。

JavaScript内で

var $bb_csv = "<?php echo $ab; ?>";　// 変数受け渡し。
$bc = bb_csv.split(",", -1);　// bb_csvをsplit()でカンマ区切り配列に再編成。

1 2	var $bb_csv = "<?php echo $ab; ?>";　// 変数受け渡し。 $bc = bb_csv.split(",", -1);　// bb_csvをsplit()でカンマ区切り配列に再編成。

こうすることで、PHPでデーベースなどの処理を行ない、表示部分ではJavaScriptでjQueryなどを使った柔軟な表示がおこなえます。