前回のblogで「高画質でセンスの良い写真素材を無料で提供する unsplash」という記事を書きました。このunsplashサイトの画像をダウンロードしなくても、Webサイトにはりつけたりすることのできるサービス unsplash.it をご紹介します。
unsplash.it でプレースホルダーを簡単に作ることができる
unsplash.it はこちらのサイトになります。
サイトの説明によると、
Beautiful placeholders using images from unsplash
（unsplashからの画像を使用した美しいプレースホルダ）
と書いてありました。プレースホルダ？(^_^;？と、この時点でちょっとわからなかったので調べてみました。
によると、
プレースホルダとは、実際の内容を後から挿入するために、とりあえず仮に確保した場所のこと。
ということでした。
ということは unsplash.itを使うと簡単にWebサイトを作るときなどに、とりあえずここにこのぐらいの大きさの画像を入れよう、というようなときに簡単に画像を入れることができて、便利ですよということのようです。
unsplash.itの基本的な使い方
unsplash.itの基本的な使い方は
http://unsplash.it/横のピクセル数/縦のピクセル数
の形のURLでunsplashから適当な画像を指定した大きさで表示することです。
http://unsplash.it/500/300
のようにブラウザでURLを入力して表示させると、
こんな感じに、 横500ピクセルｘ縦300ピクセル の画像が表示されます。
WordPressやHTMLなどでは
<img src="http://unsplash.it/500/300">
と記述するだけで、
↑こんな感じに表示されます。
<img src="http://unsplash.it/500">
また、このように数字を1つだけにすると、縦横が同じピクセル数で表示されます。
↓
ダウンロードしなくても画像を表示できるので、確かにプレースホルダーで使うのにとても便利ですね。とはいえ、元はunsplashの写真ということで、自由に使えるはずなのでコンテンツの一部として使ってみてもいいのではないかな、と思います。
unsplash.itでいろいろな表示をしてみる
unsplash.itではオプションを指定することでいろいろな表示をさせることができます
ランダムで表示させる
読み込むたびにランダムで違う画像が表示されるようなオプションがあります。基本的な使い方のURLの後ろに ?random と追加するだけです。
<img src="http://unsplash.it/500/300/?random">
のように、?randomをURLに追加してみます
↑ここにどのような写真が表示されていますか？もう一度このページを読み直すと違う画像が表示されるはずです。
グレースケールで表示する
unsplashの写真はほとんどがカラー写真ですがそれをグレースケールで表示することができます。
表示方法は、URLのサイズの前に /g/ と付け加えるだけです。
<img src="http://unsplash.it/g/500/300/">
これで表示すると、
↑グレースケールで表示されました！
画像を指定して表示する
画像を指定して表示させることもできます。指定方法は、url の後ろに ?image=画像番号 を追加します。
<img src="https://unsplash.it/600/300/?image=1">
このように指定します。すると、必ず
この画像が表示されます。本日（2016/03/16）現在、画像番号は1044まであるようです。
1044の画像↓
画像の一覧をjson形式で取得する
unsplashのサイトでは10日に10枚ずつ画像が追加されていきます。
そのデータをjson形式で取得することができます。
https://unsplash.it/list
をブラウザで表示すると、
こんな感じに写真の情報が表示されます。
これをPHPで取得して、すべての画像を表示してみます。
<?php
$url = 'https://unsplash.it/list';
$json = file_get_contents($url);
$arr = json_decode($json,true);
foreach ($arr as $key=>$item){
$i = 0;
?>
<div>
<div style="float:left;margin:5px;">
id:<? echo $item['id'];?><br />
<img src="https://unsplash.it/300/300/?image=<?php echo $item['id'];?>"><br />
<a href="<?php echo $item['post_url'];?>" target="_blank">detail</a>
</div>
<?php
$i++;
$jouyo = $i % 5;
if ($jouyo == 0){
echo '<div style="clear;fix"></div>';
}
?>
</div>
<?
}
こんな感じでたとえば unsplash.php などの名前で保存して、ブラウザでそのPHPを表示すると、
現在ある写真の一覧を見ることができます。しかしこのプログラムだと一度にたくさんの写真をunsplashサイトから参照するのでとても重く、Webサイトに負担をかけるので一度表示したこのページはブラウザの機能で、名前を付けてページを保存機能でHTMLを保存して、後で参照するときはこのHTMLをブラウザで表示しようと思います。
unsplashの画像をダウンロードする前に大きさを加工できる！
たとえばブログなどのヘッダ画像として使う場合、unsplash.itのURLのままだとそのサーバーが落ちていた場合は表示されないので心配なのでやはりunsplash.comからダウンロードしてから使おうということもあると思います。unsplashの画像をダウンロードして使いたいときには、画像がとても高画質で大きいので必ず画像ソフトなどで自分の使いたい大きさにリサイズする作業が発生すると思います。
たとえば692番の画像を800ｘ300の大きさの画像として使いたい場合、unsplash.itなら、
http://unsplash.it/800/300/?image=692
のURLでブラウザで画像を表示させて
表示された画像を 右クリックして 表示された画像を保存 をクリックすれば、PCに800×300の大きさの画像を保存することができるので、画像ソフトでリサイズする手間を省くことができます(^^)/
今回のヘッダ画像もそのようにしてダウンロードしたものを貼ってみました(^^)/
おまけ：unsplashの画像はやはりたくさん使われてるんですね！
一覧をHTMLで保存したので全体を見ていたら、見たことのある画像がたくさんあります。WordPressのテーマを新規追加しようとして一覧を見ているときにテーマのイメージ画像の一部として表示されているものでした。
このように高画質のunsplashの画像を手軽に使えるしくみ、unsplash.itはとても面白いです。たとえべ、ランダムで画像を表示して、いつもトップの画像が変わるようなサイトも作れますね(^^)/
[amazon_searchlink search=”写真素材”]
コメント