見出し画像

Tumblrの仕様変更を受けて(その2)

このところ悩まされているウェブサイト運営の件。利用しているミニブログSNS(と呼ぶものかどうかもちょっとわからないけど)のTumblrの仕様変更で、投稿した内容がすべてテキスト形式としてアップロードされるようになった。テキスト形式だとこれまでの画像形式と見た目が変わったり、ポインタをあわせたときのギミックが適用されなくなってしまう。これは先日noteに書いたとおり。

新ツールによる投稿の画像部分にある.post_media_photoあるいは.imageに旧ツールの.photo-coverの内容をコピーするぐらいでは動作するはずがない。表示の仕組みがまったく異なっている。

ギミックをあてはめる作戦は、いっきに暗雲が立ち込めてきた。

7月7日付け拙note「Tumblrの仕様変更を受けて(その1)」より

ウェブサイトとしての見た目を管理する“テーマ”をカスタマイズしてなんとかしようと考えたのだけど、スタイルシートを当てはめるだけでは解決できないことがわかり、途方に暮れてしまった。

じつはTumblrのサポートチームから返信があった際、そのお礼メールのついでに
「新ツールからの投稿がすべてテキストの投稿として処理されているみたいだけど、従来の画像(写真)投稿の形式にはできないのか」
と訊いていた。

しばらく待って、先日ほんとうにわたしの質問に対しての返信があった。

Yes, you are correct about the media classification, but an easy way around this is that instead of "post types," new posts will be classified under whatever the first block contains.

In other words, if the first block in a post is text or a title, it will be categorized as a text post. If the first block is an image, it will be an image post, etc. Hope this helps!

Tumblrからの返信より抜粋

「従来の投稿編集ツールで分類されていた形式は、新ツールでは最初のブロックの中身で自動的に分類されるようになるんだ(拙訳)」
とある。そして具体的に
「最初のブロックがテキストやタイトルならばテキスト投稿になり、それがもし画像ならば画像投稿になるってことさ(拙訳)」
と続けられている。

なんですと?! やりかた次第では画像形式で投稿できるとな。

ここは方針転換して、投稿内容を画像形式にすることを考えたほうが早いかもしれない。

ところで、ここに出てくるブロックとはなんぞや。

パソコンからだと投稿ツールのインターフェイスこそ変わったけれど、できることは従来とおなじ。画像をアップするか既存のネット上の画像にリンクするかを選び、その下に文を書いたりタグを追加できるようになっている。

新しい投稿ツールのスクリーンショット。

この画面で「画像をアップロード」を選ぶと、上のスクリーンショットのように四角くハイライトされる箇所ができるのだけど、ブロックとはこの部分のことなのだろうか。

いつもはここからパソコン内の画像ファイルを選択してアップロードしている。どう違うというのか。

試しに画像だけを単独でアップロードしてみた。それで投稿形式が変わってくれればしめたもの。

実験台のモノクローム作品オンラインギャラリーでやってみたところ、結果は残念ながら相変わらず。仕方なく従前投稿したものと合わせるために諸情報を付け加えた。テキスト形式の投稿がまたひとつ増えてしまった。

Tumblrのサポートページのどこかに書かれていたのだけど、モバイルデバイスではひと足先に新しい投稿編集ツールに一本化されていた。

わたしはパソコンのWebブラウザ経由でしか使っていなかったので、ずっと旧ツールのままだった。もしかしたら、これもスマートフォンやiPadのアプリからやってみると違うのかもしれない。

iPad miniにiOS版Tumblrをインストール。早速過去の作品画像を適当に選んでモノクローム作品ギャラリーに投稿してみた。果たして画像形式になってくれるだろうか。

試行錯誤の結果。直近の3点いずれもが画像のまわりにマージンのあるテキスト形式になっている。

スクリーンショットの左端の「柚子の枝」はiPadからの投稿、中央の「アンモナイト猫」はパソコンから画像のみを投稿してみたもの、右の「ソファに寝そべる少年」は従来の方法でパソコンから投稿したもの。

このとおり、期待むなしく従来の画像形式に戻ってくれてはおらず、いずれもテキスト形式としてアップロードされたようだ。さらにテキスト形式の投稿が増えただけの結果になった。

う~ん、Tumblrサポートの教えてくれた最初のブロック云々というのはなんだったのだろう。ただのコンテンツの一部というわけではなさそうだけど。

この“ブロック”という語の意味するところが腑に落ちない。わたしが理解できていない部分があるはずだ。

そもそもインターフェイスを更新するのであれば出力される内容をそこまで変える必要なんてないはずではないか。この仕様変更の背後にはもっと壮大な目的があるに違いない。

ヘルプページからいつの間にかたどり着いたTumblr Engineeringというブログ。ここで新フォーマットNPF (Neue Post Format)についての説明をよく読んでみた。

With this in mind, we’ve chosen to write a brand new JSON-based specification for post content. We’re calling it the Tumblr Neue Post Format, or simply NPF. The NPF specification breaks apart post content into discreet content blocks, each defined by a type field. All of our existing post content easily fits into this kind of specification, affording backwards-compatibility with the billions of posts on Tumblr.

Tumblr Engineeringの記事より抜粋。太字部分も原文ママ。

この引用部分の前にはモバイルデバイスのAPIと旧タイプのHTMLベースのフォーマットとの葛藤が述べられている。すでにある1500億ものTumblr上の過去の投稿(さらに毎月10億ずつ増えているって・・・ホンマか?!)を鑑み、そのうえでまったくあらたな仕組みを作ることにしたのだという。それがこのNPF。くだんの新しい投稿編集ツールで書き出されるフォーマットだ。

上記引用部分によると、「NPFはコンテンツをそれぞれタイプフィールドで定義されたブロックに分解する(拙訳)」のだという。そして「あらたに投稿されるコンテンツだけでなく大量の既存の投稿についてもカバーする(拙訳)」ものだという。

ブロックというのはこの新フォーマットに特化したものなのかもしれない。余談だけど、ここでdiscreteではなくdiscreetと書いているところに、開発側の熟慮した様子と思い入れが伝わってくる。

前回書いたとおり、HTMLはウェブページとしてコンテンツを表示させるための基本だ。わたしがこれを知ったのは30年ちかくも前のこと。大学に進学して初めてコンピュータを触り、一般に普及する前のインターネットの可能性に驚いた。当時は“ホームページ”が容易に利用できる最新メディアだった。こんなに簡単なHTMLの仕組みでユニバーサルに情報共有ができるのかと、30年前のわたしはこれから来る21世紀に期待したんだっけ。

ほどなくして“マルチメディア”があたらしい概念として注目されていた。マルチメディアとは文字どおりデジタル化された総合データ。文書のほか画像、音声、動画といろいろある。これらをウェブ上で表示するため、HTMLにはさまざまな機能が加えられていった。

HTMLの文書の表記の見せ方を整理するために作られたのがスタイルシート(CSS)。そしてインタラクティブな処理をする代表がJavaScriptだった。

当時、新興ブラウザのNetscapeがこのJavaScriptに対応していて、Mosaicという初期ブラウザからこぞって引っ越したのを思い出す。JavaScriptのおかげで、ページの自動更新とか入力フォームとか地図のスクロールとか、そういった作業ができるようになった。

Tumblr Engineeringの上記引用部分の最初に「JSON-based specification」とある。JSONはJavaScript Object Notationの略で、JavaScriptのオブジェクトの書き方をもとにしたデータ定義方法のことだ。これはほかのプログラミング言語でも広く使われているデータ構造なので、サーバ側とクライアント側でなにか処理をする際のデータ共有に有効だ。

そう、HTML(あるいはXML)ベースではなくJSONベース。

近年、パソコンでの表示よりもスマートフォンなどのデバイスでの表示のニーズが高くなってきた。さまざまなデバイスのさまざまなメディアが混在するなか、さらにインタラクティブな情報管理が求められている。

すでにそのHTMLはその役目を終えるときを迎えはじめたのかもしれない。

もっともTumblrだけが突っ走っているのだったら大局的にはそうならないかもしれない。しかしテック企業は常に次のスタンダード技術をさがしている。もはやマルチデバイスでの各種サービスの利用は時代の流れになっているから、汎用性の高いJSONに切り替えるのは当然の流れのように思える。

で、Tumblrの新フォーマットNPFはJSONベースでの構築ということだから、問題になっていた“ブロック”もJSONの中身なのだろう、という気がしてきた。

「JSON block」で検索してみたら、WordPressのオープンソース開発に関するブログがヒットした。技術者むけの内容のようで、素人のわたしには理解できない部分が多いけど、引用しておく。

ブロック定義は、JSON として格納されたブロックタイプを処理する際に、JavaScript や PHP などの言語間でのコードの共有を可能にします。さらに、メタデータファイル block.json を使用したブロックの登録には、以下のような複数のメリットがあります。

まずパフォーマンスの観点では、テーマが遅延ロードアセットをサポートする場合、block.json で登録されたブロックは、標準でアセットのエンキューが最適化されます。style や script プロパティにリストされたフロントエンドの CSS や JavaScript アセットは、ブロックがページ上に存在するときにのみエンキューされ、結果的にページサイズが小さくなります。

WordPressのオープンソース開発のブログより

WordPressは現在のTumblrのオーナーAutomattic社のサービス。基本的にはコア部分を共通化させる計画があるのではないか。TumblrのNPFでいうブロックは、このWordPressのメタデータに収斂するんじゃないか、とも思えてきた。

上記引用部分の後には以下のように続いている。

さらに、ブロックタイプ REST API エンドポイントでは、サーバー上で登録されたブロックしか一覧できないため、サーバーサイドでブロックを登録することが推奨されます。block.jsonファイルを使用すると、この登録が簡単になります。

WordPress プラグインディレクトリは、block.json ファイルを検出し、プラグインに含まれるブロックをハイライトし、そのメタデータを抽出できます。ブロックディレクトリに自分のブロックを登録する場合、ブロックディレクトリに認識させるには、プラグインに含まれるすべてのブロックに block.json ファイルが必要です。

WordPressのオープンソース開発のブログより

「REST APIエンドポイント」はよくわからないけれど、サーバサイドでブロックの登録を推奨している。Tumblrもおなじ構造を想定しているのであれば、Tumblrサーバ側でのプラグインに準拠させるということだろうか。

ここで言うblock.jsonファイルに書かれているものこそTumblrのいう“ブロック”なのではないだろうか。

Tumblrのテーマ一覧を見ていると、NPF対応のものにだけ★印がつくようになっていた。

Tumblrのテーマギャラリーのスクリーンシショット。赤い★がついているものがNPF対応のもの。

★印のものは、きっとかつての投稿タイプに代わるNPFの定義をきちんと反映できるようになっているのだろう。

そういえば、前回書いたソースにも、.npf_rowと.npf_colというクラスが書かれていたじゃないか。

        <article class="post size-b no-shadows text">
            <div class="wrapper caption-full">
                <div class="post-text typography">
                    <div class="npf_row">
                        <div class="npf_col">
                            <figure class="tmblr-full">
                                <a class="post_media_photo_anchor">
                                    <img class="post_media_photo image"> 

ついスルーしてしまっていたけれど、この.npf_rowと.npf_colこそ新システムで導入されたものだ。rowとcol(umn)だからこの<article>タグ部分は表としての体裁をとっているように見える。

CSSで表のセルひとつひとつに背景画像を指定することは可能だ。この場合、上位の<article>タグの段階で.textのクラスが指定されている。.text以下のクラスをていねいに拾って指定して、同様にポインタをのせたときのギミックも指定してやれば、前回のnoteでやろうとしていたCSSでの対応は可能だろうか。

いや、そう簡単には行かないだろう。JSONベースだと謳っているのだから、サーバ側とユーザ側、この場合はテーマ内での共通のブロック指定ができていないことには機能しないんじゃないか・・・とも思う。

やはりテーマ開発者に対応してもらうほか解決策はなさそうだ。

先日tumbleつながりで紹介した音楽、Rollin' and Tumblin'。そのなかでわたしはこんなことを書いていた。

じつはiPod(いまだ現役!)でランダム再生していてこの曲がかかり、ちょうど曲名からもTumblrのことを思い出したのだった。音楽の無機質さとスリリングさが、なんだか最先端のメディアを模索している様子のTumblrの印象にピッタリな気がした。
    〔中略〕
そうそう、Tumblrも、その背後で懸命に、だけど楽しく開発している人びとがいるのだよね。で、ユーザーのわたしもあくせく問題を解決しようとしているのだよね。なんだかジェフ・ベックとイモージェン・ヒープのライブ会場にいる観客にまぎれたような気分だ。

7月21日付け拙note「Rollin' and Tumblin' by Jeff Beck and Imogen Heap」より

どうしてこんなことを思ったかというと、TumblrのヘルプデスクとのやりとりからTumblrの雰囲気が感じられたから。まだ2回返信を受け取っただけだけど、待っているあいだに自動メールが数回届いていた。

Thanks for your patience so far. This is an automated message to let you know we're taking a bit longer than expected to reply to your request, but it's still open and not forgotten.
(拙訳:待ってくれてありがとう。もらった質問への回答にちょっと時間がかかってるけど、忘れたわけではないからね)

Tumblrからの自動メールとその拙訳

日本語だと「お待たせしており大変申し訳ございません」とかって始まりそうだけど、そうそう、英語では「ありがとう」だよね。それに「忘れてないよ」と言ってくれると、とりあえず待ってみようという心の余裕ができる。

この仕様変更で、実際かなり多くのフィードバックや質問が寄せられているに違いない。その対応に多忙を極めているのだろう。返事をくれた担当者もその都度ちがう人で、ひとりは肩書きがスタッフ兼ユーザになっていた。博物館の解説ボランティアみたいな人がいるんだろうか。

実際、あとでいろいろTumblrのヘルプページをさがしていてわかったのだけど、わたしと同様の質問のやりとりがされていた。しかも複数。それでもFAQのリンクを送るのではなくきちんと、かつフレンドリーに返事をくれるなんて、調べずに質問したこちらが恥ずかしくなる。

そういうわけで、無機質に見えるSNSの裏側で懸命に、かつ楽しく働いている人たちがいるのを感じたというわけ。ジェフ・ベック聴きながらやってる人もいるんじゃないかな・・・なんて想像しながら、わたしもちょっとずつウェブサイトの問題解決を探ることにする。

この記事が気に入ったらサポートをしてみませんか?