Simplicityを少し改造してみた 番外編3 スペースの有効利用のアイデアみたいなの

PC画面だけを想定しての話です。モバイルだとこの手法よりも左右にスワイプさせた方がいいだろうと思うのですが、デザイン次第だとできなくもないので、それはまた後で。
何をしたかとイイますと、実際にSimplicityの画面には現在何もしてません。今回はそのアイデアみたいなものなのです。

短い記事の内容であればスクロールはあまり苦になりませんが、結構長めの記事の内容だったりスクリプトやらを貼り付けると記事の下の方までスクロールが大変ですよね。まぁしかし、それを何とかするのはまた別にして、コメント欄にすぐに行けるようにしたいと考えた時、何かしらのボタンを画面のどこかにおいてそこをクリックすると自動でスクロールしてコメント欄まで運んでくれると言うのはよく思いつきます。

SimplicityではTopへ戻るボタンはあるわけですが、コメント欄に行くボタンはありません。それを取り付けることはそんなに難しい話ではないにせよ、結構ありきたりなのでもう少し何とかできないものかと考えた所、以下のようなものはどうだろうかとふとjsFiddleを開いたわけです。

で、できあがったものが↓。できあがったと言ってもいわゆる入りの部分なんですけども。

※ なんかFirefoxで挙動がおかしかったので修正しました

白い背景のブロックはSimplicityのメイン部分を想定しています。サイドバーとメインの間に何かしら目に付くものをおいて、今回は某ゲームのキャラクターなんですがそれをクリックすると少し背景が広がり、再度クリックすると閉じると言うような動作をします。
このほんの少しの隙間に入るものとするとこういった画像やアイコンかなと思うのですが、それらをクリックするとコメント欄にスクロー・・・いや、それも考えました。そういうボタンを設置するのもアリです。ただ、ちょっと違う感じにしてみたいなと思ってたりします。

Screenshot_from_2014-11-16-0741221例えば、Google+の画面で、それぞれの投稿の右上にアイコンがあって(モバイル端末では無さそうですが)、その中に投稿のアクティビティを表示という項目があります。それを選ぶと、投稿記事がフリップして+1した人やコメントした人がズラリと一覧表示されます。

これができないものかと思ってたりします。

つまり、流れ的にはこんな感じです。

  • 空きスペースに何かしらのボタンを設置
  • そのボタンが押されたら記事の背面に隠しておいたコメント欄のクローンが全面の記事がフリップした後に表示される
  • 元に戻すボタンを押すと記事が表示されて、最初に空きスペースに設置したアイコンが目立たないように隠れる

と言うような感じのもの。
イメージがわかない人には、こちらの動画でも。

こういうのです。動画ではマウスオーバー(ホバー)の時にフリップするようにしていましたが、何かしらのボタンを押すことでフロントとバックを切り替えると言う手法で行けそうな気がします。コメント欄をバック部分に隠しておけば、ボタンを押すことですぐにコメントを書き込むこともできますし、背景が表示されている時、前面は隠れているだけで元に戻せばすぐに戻る。

これは例えば、今コメント欄での話をしていますが、違う用途でも行けるような気がします。例えば、何かしらの脚注が必要な時に裏返せば書いてあるとか。そういや新機能として「抜粋を有効に使う機能」が追加されました。こういうのも行けるかも知れません。
前面においておいてはちょっとゴチャゴチャするなぁと思うようなものや、例えば記事の内容によってはどこかのイベントのGoogleMapやらを入れるみたいなこともできるかも知れません。

本来は縦長になる所をウラ面も使って、よりコンパクトに同じ情報量。これはイケルんじゃなかろうかと。
あくまでもPCでの話ですけども。画面が広くないとできないこともありますのでね。

で、ちょっと今回作ったスクリプトの説明を少しやっておこうと思います。

慣れている人であれば、javascriptもCSSも動作しているWordpressのPHPファイルも、あれを触ったらこれもと修正する箇所がわかると思うのですが、そうでない場合できるだけ変更するファイルは少なめにしたいですよね。例えば子テーマにある、javascript.jsファイルとstyle.cssだけなら、まぁ・・・と半ば強引に納得してもらうしか無いのですが、今回のものも元々あるHTMLにjQueryでタグを挿入することによって実現しています(白い背景ブロックはSimplicityのメイン部分など)。cssはまぁ別で書くしか無いのですが。

なので、埋め込んだスクリプトのhtmlを見てもらうとほんの数行あるだけです。htmlを見るだけだと、え?imgやらのタグはどこに置いてるの?なんて事になったりならなかったり。

データURLスキーム

今回画像を扱うにあたり、データURLスキームと言う方法で画像を利用しています。これは、画像をテキストに変換することによって、本来ならばCSSあたりに埋め込んで利用します。どうしてCSSに暗号みたいのを書くの?と言われると、いくつか思いつきますが、例えばインターネットでどこかのサイトを見ようとした時、htmlファイルやスクリプトcssをブラウザが解釈して表示します。

参考: 【画像いらず?】dataURIについて調べたよ

htmlの中に画像へのリンクがあった場合、それを表示するためにブラウザは画像のダウンロードを始めます。その際にキャッシュして一時的に保存されると次回同じサイトにアクセスした時に変更のあった画像だけどこかから読み込んで、キャッシュがあれば自分のファイルから利用しようとします。

こういう一連の流れがある中で、表示を遅くするものはダウンロードや応答待ちなどが考えられます。インターネットが速くなったとは言え、全然応答しないじゃんって時はずいぶんと待たされることもあるでしょう。

画像などと一緒にCSSやHTML、javascriptあたりもキャッシュされます。Simplicityでも1.2.9公開時に、「AutoptimizeプラグインでJavaScriptを圧縮するとスクリプトエラーが出る不具合修正」と言う内容も織り込まれました。
このAutoptimizeはキャッシュするためというよりはjavascriptやCSSを圧縮してより速くブラウザに処理内容を送るためのようなものですが、そういう内容もブラウザのキャッシュが効いている間は表示速度に繋がります。

参考: 寝ログ|HTML、CSS、JavaScriptを縮小してWordPressブログを高速化する方法(Autoptimizeプラグイン)

ただ、頻繁にアクセスされる画像や動画などとは違い、CSSやjavascript,htmlなどはしばらくキャッシュしておいても大丈夫な部分です。ということは、画像の情報を文字にしてCSSに置いておけば勝手にキャッシュされて、しかも画面に表示される時に1回だけ読まれるだけだし速いじゃんってのがデータURLスキームを利用する1番の利点かと思います。
難しく言うとhttpリクエストを減らして、なるべく自己完結させると言う感じでしょうか。Youtubeやその他Googleのサイト全般、Appleとかその他諸々の有名なサイトでもボタンやロゴマークなどをデータURLスキーム化しています。
またモバイルではできるだけ通信回数を減らして遅めの回線速度を有効利用するためにも利用されます。

ただ画像を文字にすると容量が増えます。するとキャッシュが効いている間は良いのですが、無くなってしまったりするとまた最初の1回が重くなったりもします。なので、あまり変更されないボタンやロゴマークに利用するわけです。
変換できるオンラインサイトもたくさんあります。今回はこちらを利用しました。まぁPHPが動けばこんなのは自分ちでもできるんですけどね。まぁ便利なのでオンラインで。


今回のスクリプトを作るにあたり、一番悩んだのがメインの白ブロックの後ろにある色付きの背景の部分です。なぜかとイイますと、白背景のブロックの右側マージンに隠れて画像をクリックすることができなかったからなのです。ここは1時間ぐらいいろいろ試しました。
例えば、白背景のブロックとその他の要素をそれぞれバラバラにしてjQueryで位置を計算して置いてみようかとか、CSSでz-indexを利用して前後の配置を考えてみようかとか、はたまたHTMLの作り方がマズイのかも・・・と考えた挙句、最終的に思いついたのがfloatで白背景ブロックを左に飛ばすと言うことでした。

なんでこんな簡単なことを思いつかなかったのかとちょっと後悔しましたが、やってみれば最初にやった方法で白背景ブロックをfloatさせるだけ。急がば廻れじゃないじゃんって思ったりもしました。廻った挙句最初の方法ですからね。まぁよくあることです。

後はこれが凄いというようなことはしていません。これをどう利用するかですが、このスクリプトやらを作った後でSimplicityの画面をみて、「あ、思ったよりスペースがない」と気づいたのは内緒ですが、やるとすれば例えば簡単な方法として、左側に追従シェアボタンを表示することができます。ここをうまくjQueryあたりから改造してボタンを入れるのが一番簡単かなぁと思ったりもしました。

現在は、シェアボタンが入っていますが、違うボタンを入れておけば表現の違いはあるとしても、やろうとすることはまぁ同じなので。

今回のスクリプトのように、ちょっとだけ動いて、ちょっとだけ他と違う部分があると言うのは目に付くと思います。なのでそこらに操作できる何かしらの機能を盛り込むのはいけそうな気がするんです。

とりあえず続報を待て。と言う感じでしょうか。

他にもこんなアイデアもとてもステキです→ Perspective Page View Navigation
ここのサイトは英語ですが、ホント素晴らしいアイデアが満載です。ぜひ何かの参考に。
上のサイトのメイン: codrops
上部のメニューPLAYGROUNDやTUTORIALSあたりから見ていくと良いと思います。英語ですが実際に動くのがデモで公開されているので、どうやってるんだろうと興味津々になることは必至です。

スポンサーリンク

シェアする

フォローする