GeekWireの再設計を支える技術
GeekWireによる
GeekWireを定期的に読んでくださっている方は、今週サイトのデザインが一新されたことにお気づきかもしれません。私たちもこの変更に大変興奮しています。ついにモバイルフレンドリーなサイトを導入し、記事の内容を読者の皆様に分かりやすく分かりやすくするために、サイト全体を刷新し、シンプルにリニューアルしました。
このプロジェクトには数ヶ月かかりましたが、その過程で様々なプラグインやスクリプト、その他非常に役立つツールに出会いました。世界中のギークたちのオープンソースの貢献を活用してサイトを構築できたのは、実に楽しかったです。私たちと同じようにWebギークな方々の参考になるかもしれないので、気に入ったものをいくつかご紹介したいと思います。
ルーツスターターテーマ
GeekWireはWordPress上で動作しており、WordPressをインストールするにはテーマが必要です。私たちはHTML5 Boilerplateをベースにしたシンプルなテーマ「Roots」を選択しました。Rootsは、テキサス州オースティンを拠点とするウェブ開発者、Ben Word氏によって開発されました。
Rootsをテーマと呼ぶのは少し誤解を招くかもしれません。これは、美しく構成されたWordPressテンプレートの最小限のセットであり、独自のテーマを作成するための出発点となるはずです。既成の商用テーマしか使ったことがない方は、慣れ親しんだスタイルやフックは一切見つからないでしょう。あなた自身のテーマを作るのはあなた次第です。
Roots（またはもう一つの人気テーマであるUnderscores）のようなスターターテーマは、WordPress初心者向けではありません。しかし、WordPressテンプレートシステムの仕組みをしっかりと理解していれば、これらのシンプルなスターターテーマは、他のフレームワークで作業するよりもはるかに柔軟で自由度が高いことに気づくでしょう。
グリッドシステムと基本的なCSSフレームワークをお探しなら、Bootstrapが組み込まれています。ただし、これは簡単に削除できます。また、GruntとBowerを使用するように構築されています。Gruntを使うと、LESS CSSのコンパイル、JS/CSSのLintと圧縮、スクリプトを本番環境対応ファイルに連結するなど、便利なビルドスクリプトを作成できます。また、GitHubからサードパーティ製のスクリプトとプラグインをすべて管理および取得するためにBowerを使用しています。
高度なカスタムフィールド（ACF）
Advanced Custom Fields (ACF) は、オーストラリアのメルボルンの Elliott Condon によって開発された、カスタム フィールドを簡単に操作するための GUI と API を提供する非常に便利な WordPress プラグインです。
WordPressの投稿メタフィールドは、投稿の追加メタデータを収集するための非常に柔軟な機能を提供します。WordPress APIを介してメタデータを直接操作するのは面倒でエラーが発生しやすい場合がありますが、ACFを使用すると簡単に操作できます。また、ユーザーがデータを入力するためのカスタムメタボックスの作成にかかる時間も大幅に短縮されます。
FitVids.js
レスポンシブなウェブサイトを目指しているのに、YouTubeやVimeoなどの動画を大量に埋め込んでいる場合、モバイルブラウザではすべての動画が適切なサイズで表示されないのは当然のことでしょう。Chris Coyier（ミルウォーキー）とParavel（オースティン）は、FitVids.jsを使ってこの問題を解決しました。
ビデオ埋め込みを持つコンテナーを対象とする jQuery の 1 行で、アスペクト比を維持した適切にレスポンシブなビデオ サイズが設定されます。
jQuery.dfp.js
GeekWireは、サイト全体に広告を配信するためにGoogle DoubleClick for Publishers（DFP）を使用しています。DFPは非常に柔軟性が高いのですが、大量のGPT広告タグを扱うのは、控えめに言っても非常に面倒です。ページヘッダーで広告ユニットを読み込み、ページテキストで広告ユニットを呼び出す必要があります。サイトの特定のセクションに基づいて動的にこれを実行しようとすると、かなり面倒な作業になる可能性があります。
オークランド在住の開発者、マット・クーパー氏は、DFPのjQuery実装であるjquery.dfp.jsを作成しました。GPTタグをjQueryに組み込むことで、HTML1行で広告ユニットを取得できます。また、広告コードをDOMに動的に挿入したり、特定の広告が読み込まれたり読み込まれなかったりした場合にフォールバックアクションを実行したりすることも可能です。最終的に、私たちはこれをモバイルサイトと大規模ウェブサイトで異なる広告ユニットを配信するために広く活用し、JavaScriptでビューポートの幅を簡単にチェックするだけで、適切なサイズの広告を挿入できるようになりました。
(途中で何度か助けてくれたマットに特に感謝)
画像スライダー/カルーセル
画像スライダーやカルーセルには実に様々な種類があると言っても過言ではありません。最適なものを選ぶのは容易ではありません。オンラインレビューにはアフィリエイトリンクが満載で、スライダーの品質に関する批評はほとんど見られません。
新しいGeekWireでは、最終的にいくつかの異なるスライダーを使用することにしました。bxSliderは、シカゴのウェブ開発者Steven Wanderskiが作成したレスポンシブなjQueryスライダーです。デスクトップサイトのストーリーページ上部で、このスライダーが実際に動作している様子をご覧いただけます。
また、WordPressに標準搭載されていた使い勝手の悪いフォトギャラリーを、ロシアのノヴゴロドにあるアルテム・ポリカルポフ氏が構築したFotorama.ioに置き換えました。このギャラリーの1つは、先週末のPAXで公開したフォトギャラリーでご覧いただけます。
他にも便利なスライダーはいくつか見つかりましたが、もちろんすべてを使いこなすことはできませんでした。Slick、WooThemes FlexSlider、Soliloquy など、ぜひチェックしてみてください。どれもテストでは非常に優れた結果が出ました。
データテーブル
大規模なデータセットを表形式でレンダリングする必要があるページがある場合、並べ替えやフィルタリングのためにブラウザのJavaScriptによる支援が必要になります。スコットランドのファイフ出身のウェブ開発者、Allan Jardine氏は、jQueryベースの優れた表プラグイン「DataTables」を開発しており、このプラグインが役立ちます。
GeekWire 200 と Startup List では、結果の並べ替え、検索、フィルタリングに DataTables が使用されている様子を見ることができます。
その他のクールなもの
当社の新しいサイトでは、Wordpres SEO、Yoast (オランダ) の Video SEO および News SEO、Modern Tribe の The Events Calendar、Rocket Genius (バージニア州バージニアビーチ) の Gravity Forms など、WordPress の定番ツールも使用しています。
新しいサイトをお楽しみいただければ幸いです。また、これらの提案が皆様のWeb開発プロジェクトに役立つことを願っています。GeekWireをさらに改善していくために、皆様からのフィードバックをお待ちしております。お読みいただきありがとうございました！
