ZEN,Illustfolio,ApolloなどのTumblrテーマで、フォトセット投稿をレスポンシブデザインにしました

sanographix-memo:

本日、今までに制作したTumblrテーマ6種類を更新し、「フォトセット」投稿をレスポンシブデザインに対応させました。

これにより、複数枚の画像を投稿したとき(フォトセット投稿)でも、画像のレイアウトを保持したままブラウザ幅にあわせたサイズに可変します。下記のデモサイトでご確認ください。

この修正にあたり、下記に該当するテーマをご利用の皆様は テーマのアップデートが必要です。

該当するテーマ

  • Apollo
  • ZEN 2.0
  • Illustfolio
  • Illustfolio 2
  • Reblographix 2
  • Croquis

各テーマのHTMLは下記にあります。

(追記)Croquis テーマは 販売した同人誌にダウンロードURLを記載しています。

アップデート方法

該当のテーマのHTMLをコピーして、Tumblrのデザインカスタマイズ画面に上書きして保存してください。

経緯

1記事に画像を複数枚挿入すると、「フォトセット」という扱いになり、Tumblrテーマでは画像投稿とは区別してコーディングします。このフォトセット投稿はiframeで出力されており、今までテーマ作者が自由に幅を調整することはできませんでした。

しかし、最近 Tumblr に {Photoset} というテンプレートタグが追加され、このタグを使うとフォトセットが親要素の幅に合わせて可変するようになります。今回のアップデートは、このタグに差し替える修正を行いました。

今まではどうやってレスポンシブデザインにしてたか

従来もレスポンシブデザインに対応していましたが、少し違う方法で実現していました。フォトセットの幅は固定なので、通常、スマートフォン等で閲覧すると画面からはみ出てしまいます。そこで、ページを読み込んだタイミングでブラウザ幅を取得し、幅が狭いときはiframeの中のimg要素を幅100%にするようjQueryで操作していました。したがって、今まではスマートフォンで見たときフォトセットのレイアウトを無視して出力していました。Tumblrの仕様上、仕方なく回りくどい方法を使っていたのですが、今回のアップデートでその必要がなくなりました。

ご利用ください

ご利用ください。

緊急セキュリティアップデート

nihongo:

重大なお知らせです。インターネット全般で幅広く使用されている、暗号化を利用するテクノロジーを危険にさらす極めて深刻な脆弱性「Heartbleed(心臓出血の意)」が発見されました。これはTumblrにも影響を及ぼ可能性があります。

現在のところ侵害されたという証拠は見つかっておらず、ほとんどのネットワークと同様Tumblrチームも即刻問題の修復に取りかかっています。

これは、今まで信頼してきたロックアイコン(HTTPS)のサイトで、パスワード、個人のメール、クレジットカード情報などに不正な使用を目的とする人々がアクセスできる危険があったということを意味します。

この事態を見くびることは禁物です。仮病を使って会社を休んでも、時間を作って今まで使っていたパスワードを変更しましょう。特にこの脆弱性により影響を受けやすいメール、ストレージ、オンラインバンキングなどは特に変更の必要があります。

これからこの件についてはニュースなどでさらに取り上げられることでしょう。対策をたてしっかりと身を守りましょう。

ブロガーに質問:あなたがTumblrを使う理由は?

effective-tumblr:

「デザイナさんや周りの人が使ってたから」「投稿しやすかったから」「カスタマイズしやすかったから」「Tumblrは孤独感がなかったから」。

アツマレ@OnEdrop cafe | TumblrTumblrユーザーボイスの取り上げている人など、Tumblrを使ったブロガー寄りの参加者構成でした。そこで皆様に聞いてみた「あなたがTumblrを使う理由は?」がこんな感じでした。

ちょうどASCII.jpで「ASCII.jp:Web制作のためのTumblrテーマカスタマイズ入門」という連載が始まっていますが、ここで「Tumblrを使うメリットとは?」として以下を挙げています。

  • 1つは、「投稿の敷居が低い」点が挙げられます。
  • 「リブログ」によって情報が拡散されやすい点も人気の理由です。
  • デザインの自由度が非常に高く、かつ無料で広告が入らないことも人気です。

デザインの自由度については、「CMSなどよりカスタマイズしやすかった」という言い方がされていました。上記連載2回目に例がありますが「HTMLを編集する」をクリックし、HTMLを編集し、プレビューして問題なければ保存するだけ。HTMLさえ知っていれば、そのシステムやサービスについて勉強しなくて良いというのは、「投稿の敷居が低い」に匹敵する「カスタマイズの敷居が低い」になっていると思います。

面白いと思ったのはリブログの効用。私もリブログは情報拡散の強い助けだと思いますし、フォロアーからフォロアーへが大きな情報拡散のパスだと思います。でもそういうことだけじゃなくて「ブログはやっていて孤独感がある」「Tumblrに移ってきたら、そうじゃなくなった。リブログは支えになった」という話が聞けました。これは、もっとストレートなリブログのよさに思えて沁みました。

これまでのTumblr meetupとは少し違う顔ぶれのアツマレ、次は6日(日)14時~@代々木公園です。OUTDOORDAY JAPANなんてイベントもあるみたいだし、一日代々木公園ですごしても良いかもしれませんね。ご参加の方は、日曜日にお会いしましょう。

Reblog用TumblrのURLを自分のハンドルネームにしてたら少し困った

sanographix-memo:

ぼくが Tumblr を始めたのは 4〜5 年くらい前で、その頃はこうやって Tumblr で日記を書いたりせず、 Reblog 専用に使っていた。Tumblr の URL は自分のハンドルネーム(Twitter id とか)と同じにしていたんだけど、しばらく使っているうちに少し困ったことが出てきた。

それは、エゴサーチすると Reblog したものばかりが出てくることだ。エゴサーチで引っかかってほしいのは「自分の作ったもの」なのだけど、それらが埋もれてしまっていて、あまり印象が良くない。

別にそれでも困らないという人がいるかもしれないけど、ぼくは自分の作ったものと他人の作ったもの(のReblog)は区別したいと思っていたので、その状態では困る。なので、Tumblr で複数ブログを作って、Reblog 専用のブログと、そうでない日記(つまりこのブログ)に分けた。Reblog の方はreblographix.tumblr.comにして、日記は独自ドメインにした。この状態にして2年くらい経つけど、エゴサーチ結果はかなりまともになった気がする。

CSS書くだけでTumblrテーマが作れる「Tumblr Boilerplate」作った

sanographix-memo:

Tumblrテーマ、いちから作ろうとすると大変なので、あらかじめ基本的なHTMLが組まれてあるBoilerplate的なのを作った。

http://sanographix.github.io/tumblr-boilerplate/

これを使うと、CSSを書くだけでTumblrテーマ作れるので、block:Post みたいなテンプレートタグとか覚える必要なくて爆速でテーマ作れる。ZENApolloをベースにしているので、全投稿タイプに対応している。MITライセンスなのでHTML変えたかったら変えても良いです。

テーマ作りたい人とか、CSSくらいは自分で書きたい人はご利用ください。

Tumblr Boilerplate - A naked boilerplate for tumblr theme development

“全人類が生まれながらにしてTumblrの何たるかを知っていればいいのですが、神は我々にTumblrを学ぶという試練を与えました。どうもTumblrを知らない人には、Tumblrがなにか得体のしれないものに映るようです。Tumblrに興味を持った人の身近にTumblrの熟練者が居て誤解を解いてくれればいいのですが、なかなかそうはいかない。TumblrPortはTumblrに飛び込む勇気がない人の背中を押すことが出来るかもしれない。TumblrPortに流れているポストは、個人に最適化こそされていませんが、最大公約数的な多くの人が面白いと感じる可能性の高いポストが流れています。「へーこんな面白げなのがあるんだ」と思わせればしめたもの。後はTumblrにガッと掴まれて、ギュッと引き込まれるのも時間の問題でしょう。”

Tumblrテーマで{BlogURL}タグが使えるようになって最高

sanographix-memo:

なんとなくTumblrのテーマ制作のヘルプ見てたら、{BlogURL}なるタグが使えることが判明して、ま、まじか!!!! と思って興奮した。確か去年見たときは無かったと思う。最近追加されたのかもしれない。

How to create a custom HTML theme

variables description
{BlogURL} Main URL for your blog.

このページ和訳してる人のTumblr見たら載ってなかったからやっぱり最近できたのだと思う。

このタグは何に使えるかというと、OGP 書くときに便利。

いままで、ページのURLを示すテンプレートタグは{Permalink}があった。しかしこれは名前の通りパーマリンクにのみ有効で、インデックスページでは使えない。そこで、カスタマイズ画面でユーザーにブログのURLを各自入力してもらうという方法でぼくは解決していた。

  <meta name="text:Blog Domain" content="" />
  {block:IfBlogDomain}
    {block:IndexPage}
      <link rel="canonical" href="http://{text:Blog Domain}"/>
      <meta property="og:url" content="http://{text:Blog Domain}" />
    {/block:IndexPage}
  {/block:IfBlogDomain}
  {block:PermalinkPage}
    <link rel="canonical" href="{Permalink}"/>
    <meta property="og:url" content="{Permalink}" />
  {/block:PermalinkPage}

この方法は苦肉の策という感じで、ブログのURLは自明なのだからそれをわざわざユーザーに入力してもらうのは非効率だった。

これからはこういう書き方ができる。

  {block:IndexPage}
    <link rel="canonical" href="{BlogURL}"/>
    <meta property="og:url" content="{BlogURL}" />
  {/block:IndexPage}
  {block:PermalinkPage}
    <link rel="canonical" href="{Permalink}"/>
    <meta property="og:url" content="{Permalink}" />
  {/block:PermalinkPage}

上記を自分のブログで試したけど、問題なくog:urlが表示された。最高便利。近いうちに各テーマを修正します。

staff:

The smile of a loved one. Your childhood blanket. A handsome bodyguard to take you in his arms. “Security” can mean a lot of things in this crazy life, but nothing says “security” like Tumblr’s two-factor authentication. It’s available as an option in your Settings page as of right now.
You know how you need two keys to launch a nuclear missile? Two-factor authentication works like that. One key is your password, the other key is your cellular phone, and you need both to access your Tumblr Dashboard.
Keep your Dashboard safe and secure, like you do with your nuclear missile. Learn more about two-factor authentication today.

staff:

The smile of a loved one. Your childhood blanket. A handsome bodyguard to take you in his arms. “Security” can mean a lot of things in this crazy life, but nothing says “security” like Tumblr’s two-factor authentication. It’s available as an option in your Settings page as of right now.

You know how you need two keys to launch a nuclear missile? Two-factor authentication works like that. One key is your password, the other key is your cellular phone, and you need both to access your Tumblr Dashboard.

Keep your Dashboard safe and secure, like you do with your nuclear missile. Learn more about two-factor authentication today.

Apollo テーマ作った

sanographix-memo:

とにかく心穏やかにのびのびと日記を書きたい人のためのTumblrテーマを作った。下記のリンクからダウンロードできるので拡散希望です。

Apollo - 穏やかに日記を書きたい人のためのTumblrテーマ

ぼくはあらゆる人に日記を書かせるという達成不可能な目標を掲げている。

日記、最高の文化で、見ず知らずの他人が何考えてるのか無限に読めるっていうの、普通ではあり得ない体験で、こんなおもしろ文化を絶やしてはならない。みたいなことをいままでにも散々書いている。

去年作ったTumblrテーマのZEN 2.0は、そうした思惑の一環で、もともと自分のブログ用に作ったものをテーマ化して誰でも使えるようにした。幸いにも色々な人が興味を示してくれて、自分用に作ってたものが結果的には多くの人に使われている。どのくらい使われているか正確な数は把握していないんだけど、ダウンロードボタン今までに12,000回押されてた。

嬉しかったのは、ZENテーマが使いたくて日記を始めた、みたいに書いてあるブログを見かける機会が増えたことだ。まさにそういうふうに使ってほしかったので、これほど作者冥利に尽きることはなかった。またひとり日記文化に引きずり込めたと心の中でガッツポーズを決めてた。手前味噌で申し訳ないけど、そういう日記始めたよ的エントリを読むと、自分がテーマを作ることで少なくとも日記を書く後押しはできたと思う。

しかしながら、ZENを作っただけで満足すべきではないと思う。もっと読みやすく、もっと心地よく記事が書けるテーマを研究し続ける必要がある。

そういう気持ちがあって、ZENとは別のアプローチの、日記を書く人専用のテーマとしてApolloを作った。ZENは、罫線を頻繁に使って区切ってあるとか、文字がちまちましてるとかで、日本的っていうか、京都っぽいイメージで作ってた。それに対してApolloは、「穏やかに日記が書きたい人のためのTumblrテーマ」というコンセプトで作ってて、静かで広い空間みたいなものをイメージしている。名前は、静かといえば宇宙だろ、的な連想で決めた。去年観たゼロ・グラビティの影響もあるかもしれない。

ZENと比べて、本文を少し大きめにした。最近はディスプレイの大きさも広くなっているし、このくらいの文字サイズが丁度良いように思う。行間もゆったり目にとっている。とにかく心地よく読めるようにした。このテーマは一応リブログ用としても使えるけど、なるべく自分の言葉で日記書いてほしい。そういう思いで作っている。

日記、基本的には時代と逆行した趣味だと思う。いまの世の中のトレンド的には、長文ではなく短文であることは理解している。もっと言うと、文章ではなくスナップ写真、パブリックではなくプライベート、永久保存ではなく瞬間共有という流れがある。短時間で、クローズドみたいな流れだと思う。パブリックな日記を書きたい人ばかりではないのも理解できる。しかし、全てがそうした流れに飲まれてしまっても寂しいと思う。パブリックな文章も同時に共存するインターネットのほうが、より豊かな文化だと思う。

救われたと思ったのは、日記を書き始めた人の記事を読むと、大抵おもしろいということだ。ある程度まとまった文章で、その人の生の思考を覗き見するみたいなの、めちゃくちゃスリリングで、興奮する。

ちゃんとコードを書いて、それがちゃんと使われて、その結果おもしろコンテンツがいろいろ生まれるみたいなの、当初やりたかったことだった。Apolloで、またそういう体験がしたい。日記書いてほしい(ぼくもApolloで書いてる)。ZENに飽きた人とかも是非。

Tombfix 0.1.3

dorelax:

ようやくTombfixでPostできない原因がわかったのでメモ。「サードパーティーCookieの保存」設定が原因だった。

・Tombfixの使い方はTumblr専門で、Post先はTumblr以外は切っている。他の設定はデフォルトのまま。
・Firefoxを27.0.0にアップデートして、そのタイミングでTombfixも同時にアップデートしたときから、Postしようとすると「ログインしていません models.js云々」と表示される。27.0.1にTombfix0.1.3になるまでずっと同様の現象発生。
・試したこと。Tombfixの再インストール。Profilesフォルダをきれいにして再インストール。他のアドオンの無効化。設定の初期化(全Post先の有効化)。そういう設定を変えるたびにTumblrをログアウトしてブラウザ再起動もしていたけど駄目。
・どうも違うようなのでFirefoxの設定を疑って、ツール>オプション>プライバシーの中にある。「サードパーティーCookieの保存」設定を「常に拒否」から「常に許可」に変更したところ、Postに成功する。「訪問したサイトのみ許可」でも大丈夫。
・保存されているクッキーが足りないのかとおもって例外サイトを追加したが、「常に拒否」の設定ではどれだけ例外サイトを追加しても駄目。逆に、例外サイトを空にして、「訪問したサイトのみ許可」で少ないクッキーになった場合はPostに成功する。

どうもFirefoxの27から、「常に拒否」を設定している場合にアドオンがクッキーの情報を利用できないようになっているような気配。これで快適なTumblr生活がもどってきましたよ。作者に感謝。Tombfixを疑ってごめんなさい。

ちなみにおまけ。この設定をいろいろ試してTumblrに短時間で何度もログインしていたら、メールアドレスとパスワードが正しいはずなのにログインを蹴られた。たぶん、短時間で繰返しログインするのはパスワードを試そうとする悪いやつと認定して、ログイン情報が合っていても一度は蹴るような実装になっている模様。こういうセキュリティの高め方もあることが分かってTumblrクール。

Tombfix 0.1.3

Tombfix 0.1.3

Tombfix 0.1.3 をリリースしました。インストール済みの場合はアドオンマネージャ(about:addons)の Tombfix の項目でコンテキストメニューから「更新を確認する」とすぐにアップデートできます。

主な変更

  • インストールできる Firefox の最低バージョンを 26.0 から 27.0 に変更
  • Twitter に画像をアップロードしようとすると「Missing or invalid url parameter.」とエラーが出て失敗する問題を修正(YungSang さんのコメントより。修正内容は、実質的には Taberareloo の変更のポーティング。)
  • Gist の仕様変更により、Gist にあるパッチで「Tombfixパッチのインストール」がコンテキストメニューに表示されなくなった問題を修正

詳細はこちらや、バージョンアップデートのコミットをご覧ください。


GitHub の Issues に報告されていない不具合、要望などがありましたら、Tombfix 本体 に関してはこちらに、パッチ に関してはこちらから報告をお願いします。

美大で紙媒体専攻してた人がWebデザインやることについて

sanographix-memo:

ぼくは美術大学で4年間デザインを勉強してて、なかでも紙媒体のグラフィックデザインを専攻してた。所属研究室もプリントメディアを専門にやるところだったし、卒業制作も、なんか本みたいなの作ってた。だから、ぼくがWebデザインをやっていることについて、意外に思われたり、不思議がられたりすることがある。その研究室でわざわざWebデザインを志す人は殆どいないからだ。

しかし、紙で学んだことが無駄だと思ったことは一度もなくて、むしろWebデザインで非常に役立っている。ぼくが紙媒体を専攻してた理由は、紙は歴史のあるメディアだし、グラフィックデザインの基礎をちゃんと学ぶのに最適と思ったからだ。基礎というのは、タイポグラフィの扱い方とか、ジャンプ率とか、配色とか、そういうデザインの諸ルールのことで、そのルールはそのままWebデザインに通用する。今のWebデザインの流れを見ていると、フラットデザインとか、Webフォントとか言われてて、それはベーシックなグラフィックデザインをちゃんとやっていこうという機運だと解釈してるんだけど、そういう機運があって、昔よりも紙とWebの表現手段が近づいていて、デザインの基礎知識がどんどん活用しやすくなっていると思う。

あと、美大に4年間居れたというのも役立ってる。美大では上記のようにデザインの基礎を学べた。スキルも学べたけど、マインド的な部分を学べたことが大きな収穫で、デザイン的な思考というと語弊があるかもしれないけど、そういう考え方が自然とできるように、洗脳に近い教育を受けたのも良かった。周りの環境も良かった。僕の知っている美大生、暇さえあれば妄想しているような人たちで、世界観とか、コンセプトとか、そういうことを考えるのが大好きな人が集まっている。こう書くと変な人達っぽいけど、そのコンセプトこそ、デザインで最も大事な要素なのはデザイナーの間では常識だと思う。デザインにおいて、見た目とはデザインの要素のごく一部で、それよりも、それをもって何を伝えたいとか、どんな世界を作りたいとか、場合によっては仕組みまでデザインしちゃおうとか、そういう主張を持つべきだ、というのは美大で真っ先に教わる。それは例えばWebサービスを開発するときの、コンセプト立案にそのまま活きる。こういう考え方が自然とできるWebデザイナーは、観測範囲での意見だけどきわめて稀だと思う。

美大生、そういう、稀な人材になれる可能性がある。問題なのは、3年とか4年とかになって、就活始めるかとか思ったとき、いざWebデザイン勉強しようかと思っても大抵遅いということだ。めちゃくちゃ頑張ったら遅くないけど、ただでさえ就活で忙しいのだから現実的には難しいと思う。まして、大学卒業して、一度紙の仕事を始めてしまうと、そこからWebの世界に転職することはかなり難しくなる。つまり、大学1年とか2年とか、早い段階からWebの世界に触れておいたほうがいい。ぼくは、中学生のときから自分のしょぼいホームページ作ってて、marqeeで文字動いたとかいって喜んでた過去があったから、なんとかなったけど、それでもちょっと大変だった。今の人は物心ついたころからスマホだし、個人サイト作る文化とか絶滅しかかってるし、ウェブデザインも成熟してて何をどうしたらこれが作れるのかわけわからないサイトばかりだから、大変だと思うけど、ちょっとずつやっていったらなんとかなると思う。デッサン覚えるより簡単だと思う。

だから、いま広告とか、ポスターとか、パッケージ一筋みたいな、そういうのに興味がある学生は、それもいいけど、片手間にWebでもいじくって遊んでみたらいいと思う。最初から向いてないとかいって、可能性を捨てることはないと思う。僕も自分は向いてないと思ってたけど、なんとかなっている。じゃあ何から始めたら良いんですか、というのは、まだちゃんと答えを持っていないのだけど、とりあえずブログを始めたら良いと思っている。Webで情報発信したことない人がWebデザインしようとか思うわけないので、まずはWebで自己表現するおもしろさを知る一歩として、ブログが最も適していると思う。

なんでこんなこと書いたかというと、出身学科のカリキュラムが変わって、1年後期でWebのポートフォリオサイト作る課題が出るようになったらしいんだけど、1年ではWebデザインの講義がないので、講義無いままいきなりWebサイト作れって言うほうが無茶な話で、こんな調子では学生がますますWebに苦手意識を持つに決まってるから、なんとかしたいと思って書いた。