池澤あやかが教えるTumblr講座「ソースコードを見る」

2014年07月22日 17時00分更新

　女優の池澤あやかちゃんは、文句なしの美女でありながら、Ruby界でも女神と呼ばれるほどの「本物」っぷりを発揮しているガチでギークな女優。「ばりばりプログラムができる」特技を生かして活躍中です。

　そんな池澤あやかちゃんが、ウェブサービス「Tumblr」の使い方やカスタマイズ方法などについて解説する連載がスタートしました。「Tumblrって聞いたことはあるけど、どういうものかわからない」「一応、登録はしているけどいまは全然使ってない」という初心者に向けて、わかりやすく解説します。これまでTumblrの一般的な使い方を見てきましたが、ここからはTumblrブログをオリジナルにカスタマイズするなど、一歩踏み込んだ使い方を紹介していきます。そこで大事になる、ソースコードについて見ていきましょう。

ソースコードを見れば骨組みがわかる

　「Tumblrブログのテーマのカスタマイズで、『HTMLを編集』というものを紹介しましたが、Tumblrブログに限らずウェブサイトはすべてこうした文字列によって書かれています。そうした文字列を大きく『ソースコード』と呼び、ウェブブラウザー上から確認できます」

　「開いたウェブページの適当な部分を右クリックしてみてください。Safariなら『ページのソースを表示』が選べるはずです。選択すると、そのページのソースコードが表示されます。そしてTumblrサイトはこのソースコードに遊び心が加わっていて、『tumblr』と書かれたアスキーアートが入っています。実は私のTumblrブログもソースコードにアスキーアートを隠しているので、開いてみてください（笑）」



ウェブサイト上で右クリックすると、「ページのソースを表示」が表れ、ページのソースコードを確認できます



Tumblrサイトのソースコードには、ヘッダー部分に「tumblr」というアスキーアートが隠されています。小ネタとして使えます

　「ソースコードは文字列が並んでいるだけなのですが、どのようなJava Scriptが使われていて、動作を決めているのかといったことなどもわかります。例えば下にスクロールしていくと、どんどんとコンテンツを読み込んで表示していくTumblrブログがありますが、これは『infinitescroll』と呼ばれるJava Scriptを利用しています。また、『masonry』というJava Scriptは、ウィンドウのサイズを変更するとそれに合わせてコンテンツをレンガ状に並べ替えてくれます。この『masonry』とよく一緒に組み合わせて使われるのが『imagesloaded』というJava Scriptで、画像を読み込んでから何かを実行するというものです。『imagesloaded』で画像を読み込んでから、『masonry』でタイル状に並べ替えるというわけです」



私のTumblrブログを開いて、ソースコードを確認してみましょう



ソースコードを表示すると、CSSやJava Scriptでどのようなものが使われているのかがわかります



ソースコードだけに……



おいしくいただきました

おすすめのTumblr
　ここでは、池澤あやかちゃんおすすめのTumblrブログを紹介します。ぜひ、フォローして、気に入った記事を「リブログ」してください。

イラストレーターのうえむらさんが描く女の子を見ることができるサイトです

「寝る子がよく育った。」
http://uemulagirls.tumblr.com/