---

---

こちらは、a-blog cms Advent Calendar 2016の12日目のエントリーです。今年の更新は早いですよ！

札幌の制作会社、有限会社リーグラフィさんと、株式会社ジョンソンホームズ様の住宅ブランド「ナチュリエ」のサイトをa-blog cms 2.6.1でリニューアルしました。

ナチュリエ ていねいに育てる、自然素材の家

私はa-blog cmsの構築・技術サポート全般と、サイト内の一部のJavaScript制作を担当しています。

投稿画面も含めたサイトの全容は、先月の「a-blog cms Training Camp 2016 Autumn」でご報告させていただきましたが、あちらは合宿に参加された方だけの特典ということで、私のブログでは主に、構築面で考慮したことなどをご紹介します。

---

チーム構成

---

---

リーグラフィはCSS Nite LP46「ビジュアル・ドリブンのデザイン」などに出演している、デザインとUXを得意とする会社です。

ディレクションを担当した平澤さんは、a-blog cmsについては勉強を始めて間もないので、ひと通りの構築までできる水越さんが間に入る形で、三人でどのような構成にすべきか仮テーマを組みつつ、相談しつつ進めていきました。

a-blog cmsはコーディングの自由度が高い分、先にがっちりHTMLを組んでから作ると（いわゆるウォーターフォール）、公開後の運用がしづらいなどの認識違いが起きやすい側面があります。やはりアジャイルを得手とするチーム向けのCMSと思います。

使用しない機能は見せない

逐一打ち合わせをしているうちにわかってきたのが、以下のようなことでした。

• コンテンツごとにデザインが大幅に異なり、事例などではかなりの入力項目が必要となる
• 関連付けのキーとなっている店舗情報は全ブログに出す
• しかし、特定のコンテンツで使用しているフィールド・ユニットは、他のコンテンツでは使用しないことが多い

これに伴い、投稿画面をできる限り「使用しない機能は見せない」方針で設計していきました。

a-blog cmsは投稿画面をカスタマイズできますが、無計画に改変するとバージョンアップ後に大変なことになります。変更点をコメントで書いておいたり、HTML構造が変わっても致命的なエラーとならない、jQueryのツリー解析による書き換えを駆使しました。

---

---

例えば、a-blog cmsの管理ボックスの「エントリー作成」ボタンは、押す前に実際に更新したいページへ移動する必要がある（すごくすごくバージョン3までには直してほしい）仕様なのですが、ナチュリエのサイトでは選択しただけで目的の投稿画面へ移動できる、プルダウンリストとしています。

カスタムユニットの活用

a-blog cmsは、既存の画像・YouTube・GoogleMaps以外にも、完全自作のユニットを作ることができます（もちろんPHPもJSも書きません）。
バージョン2.1から実装されていた機能ですが、先述の「使用しない機能は見せない」にのっとって今回はじめてフル活用しました。

---

たとえば「建築日記」のコンテンツでは、画像のようなパーツしか使われていません。

https://www.naturie.jp/works/Mdf20160725134119-286.html

このコンテンツの日記パーツは、建築中は新しい順、建物が完成すると古い順に並ぶという、旧サイトからのルールがありました。 そこで、入力画面をわかりやすくでき、かつ楽に並べ替えられるよう専用ユニットを作っています。

---

関連エントリー

オーナーインタビューに、Kさんというご夫婦が出てきます。内装がかわいいです///

https://www.naturie.jp/voice/sapporoownervoice1.html

Kさんの家は「フォトギャラリー」「建築日記」にも掲載されています。これらを結びつけることができれば多方面からナチュリエの事例を見てもらえます。水越さんから「a-blog cmsの関連エントリー機能を使えないでしょうか」と提案を受け、実装しました。

---

---

通常、関連エントリーではエントリーのタイトルと概要が表示される前提となっていますが、事例ではリンク先URLを正規表現で条件分岐にかけ、インタビュー・フォトギャラリー・建築日記のラベルがついたボタンに切り替えています。

CSVインポートを採用するメリット

ナチュリエの旧サイトは、フルスクラッチのCMSで運用されていたため、データのエクスポート機能がありませんでした。
しかし、a-blog cmsには高精度なCSVインポート機能があります。実際のサイト内のHTMLから情報を拾っていく必要はあるものの、そこさえクリアできれば行ける！と目算を立てました。

画像カスタムフィールドのCSVインポートフォーマットが公開されていないという難関がありましたが、検証の結果、他のCMS以上に簡単に実装できることがわかりほっとしました。CSVインポートのサンプルデータはGitHubで公開していますので、ご自由にお使いください。

https://github.com/webbingstudio/acms_inport_test_500

CSVインポートは以下のメリットがあるため、最近はどのCMSの案件でも積極的に導入しています。

• CMSの種類・端末・環境を問わず導入できる
• Web制作の知識が浅いスタッフにも作業を依頼できる（インターンさん外部スタッフさんありがとう ToT ）
• スプレッドシートで見ることで「不備があるデータ」「移行不要なデータ」を可視化できる

まとめ

特にa-blog cms関連でお話ししたいことはこのようなところです。他にもcookieと連動してのコンテンツ切り替えなどもしていますが、これはa-blog cmsの公式ハンズオンにもあるので、皆さんも検討してみてください。

a-blog cmsでの大規模なサイト制作に関わるのは、今回がはじめてでした（ちょちょいなら何度かありましたが）。a-blog cmsならではの構築面での注意点、自分のテーマ制作のヒントも多く得られたと思います。
リーグラフィの皆さんありがとうございますm(__)m

ウェビングスタジオでは制作会社へのCMS構築面の技術提供なども行っています。どうぞお気軽にご相談ください。

ってこのサイト、お問い合わせフォームがないですね( ˙-˙ )
mail[ atmark ]webbingstudio.com
です。すいませんリニューアルせねば。

---

ポイントをきちんとおさえれば、「美しい」は作れる。

「OSC2011北海道」の、初級者向けをテーマにしたセッションで、「Webデザイン」をテーマに講師をさせていただきました。

一年ぶりのライトニングトークでひどく緊張しましたが、多くのデザイナーを目指す方、プログラマの方に来場いただき、無事終えることができました。
ありがとうございます。

発表時のスライドは↓↓↓こちらです。
この記事では、時間の関係で割愛した情報と、裏話などを書いておきます。

Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語

美しい。
流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。
しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。
北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。

このサイトではWEBデザインの美しいテクニックがあちこちに使われています。
全ては紹介できませんが、取り急ぎ目立つものだけ。

WEBデザインの可能性を広げる、透過PNG

このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカルな演出を実現しています。
PNG32形式はファイルサイズが大きくなる欠点がありますが、近年のADSL、光回線の普及で使いやすくなりました。

ですが…
あのクソ忌々しいInternetExplorer6はこれに対応しておらず、足を引っ張り続けています。
このIE6でも透過PNGの表示を可能にするのが、「PNGFix」と呼ばれるJavaScriptライブラリです。
「Discover Shiretoko」はjQueryライブラリを使用しているので、jquery.pngFix.jsを採用しています。

jquery.pngFix.js – PNG-Transparency for Windows IE 5.5 & 6

衝撃のGlider.js

いや、これはびっくりしました。
てっきり知床→Firefox間でページを移動するのだろうと思っていましたから。
このダイナミックな横スライドは、日本人が作成したjQueryライブラリ「Glider.js」を採用しています。

Glider.jsを作ってみた。 – Ho-KAGO After School

Firefoxユーザーのなかには、「No Script」プラグインでJavaScriptをオフにしている方も少なくありませんが、このライブラリはdivでグルーピングされたHTMLに対し演出を加えるものなので、内容が読めなくなることはありません。
でも、できればこのサイトくらいはJavaScriptオンで見てあげてください…

一部が重なっているナビゲーション

本文最後尾のナビゲーションは、矢印の一部が重なっています。
四角ベースのCSSレイアウトでこれを実現するには、各ボタンを透過画像で作成し（ここは透明度はあまり関係ないのでgifです）、さらにフロートで横に整列したボタンに対し「ネガティブマージン」や「position:relative（相対配置）」で矢印の一部が重なるように位置ずらしをすることで実現できます。

説明記事がネット上にいろいろあったのだが見つからない…汗

尚、ボタンの重なっている部分は「HTMLで後に書かれている要素」が優先されます。なので、重なりは最小限に抑える必要があります。

トップ専用CSSによるデザインの上書き

「Discover Shiretoko」はトップ以外のデザインでは、共通の背景画像が使われています。
半島のすみっこにくまさんがいるやつです。
ですが、トップページのみ「top.css」を後から読み込ませることにより、導入部をよりダイナミックな構成に変更しています。
こうすることで、作業量を最小限にしつつ、ページ毎の演出を調整することができます。

これはWEBデザイナーの間では割と常套手段なんですが、CSS勉強中の方も自分のサイトやブログなどでお試しください。楽しいですよ。

---

他にもレイヤー配置など、たくさんのテクニックが使われていますが、この辺で。ノシ

何故ここまで高度なテクニックを多用したのか。その答えははっきりしています。

「Mozilla Firefox」が最先端のレンダリング、スクリプト処理に対応できるブラウザであることを、自らのサイトで証明するため。

「Discover Shiretoko」は、制作チームの自信の現れなのです。

LOCALは、北海道における技術系地域コミュニティ(ユーザ会、勉強会等)の活動を支援するとともに、コミュニティ間の連携イベント企画開催等を通して、地域を盛り上げていくことを目標とする有志の集まりです。

< /blockquote>

というわけで、札幌の技術屋さんはみんな大好き、LOCALの定例会を見学してきました。

私は委員会どころか高校の部長会議しか出たことがなく、しかもWeb制作以外はなかなか身につきません。

実際、定例会の内容の65%くらいはわかりませんでした。 :P

そんな無学なうぇびんぐですが、ただ見に行っただけでは本当に邪魔者です。
わかる範囲で感想を書いてみます。

LOCALの概要については、昨年OSC（オープンソース・カンファレンス）で発表された資料がとても参考になります。
北海道のWeb屋さんは是非一度目を通していただきたい。

• OSC2008島根での発表資料（PDFファイル・160KB）

この中で「属人性の排除」を目標にされている通り、定例会は全員参加の、ひじょうに活発なものでした。
イベントの開催、大学への広報、外部団体との折衝、NPO法人化に向けた事務手続きなど、広い年齢層の会員がそれぞれ協力しあって運営を進められている様子に驚いてしまいました。

また、前もってWikiにまとめた議題をプロジェクターで映しながらのスムーズな議事進行や、イベント参加者から集めたアンケートをグラフ集計し、成果や課題を共有しているのも興味深かったです。
自分も必要になったら参考にしよう…

先月開催された「LOCAL DEVELOPER DAY ’09」は大成功だったそうですが、会員の皆さんは満足されていない様子。
（寒い上に地方の参加が望めない冬の札幌で、参加56人は充分凄いと思いますが…）
参加者の大半が大学のポスター等でなくtwitter等の口コミであったことも含め、「オフラインでの認知度をどう上げて行くのか」が当面の課題のようです。

私が興味を持ったのは、後半の議題です。
現状のLOCALのウェブサイトの活動報告を、レポート提出などでルーチン化するか、または委員会を設置するかという件でひとしきり議論になっていました。
結局結論が出ずに散会となりましたが。

この件に関しては、私的にはちょっと思うところがありました。

紙の広報は必要か

今のところはいらない気がします。

LOCALはWeb関連の技術者グループですから、Web以外の媒体を通さなければ興味を持たないような向きがLOCALまでたどり着き、趣旨を共感するとは思えません。

むしろウェブサイトそのものをどうするか検討するのはいいことだと思います。
やるなら二ヶ月分くらいずつウェブサイトのログをまとめて印刷して、大学やジュンク堂に置くような流れなのでしょうか。

ルーチンでいいのでは？

現状のLOCALのウェブサイトは、代表さんがactivityのページを手作業で更新しています。
これでは配信できる情報に限界がありますし、代表さんの視点のみで書かれていては「属人性の排除」から外れてしまうように思います。

半端なコミュでルーチンワークを採用すると、ちゃんと書かない人もいてモチベーションが下がってしまいます。
でもこれだけ個々の会員に個性と熱意があるのだったら、強制持ち回りの方が「自分も参加したいっス！」と思わせるような面白い活動報告になるんじゃないでしょうか。

PukiWikiはちょっと

技術屋さんたちは、PukiWikiが好きです。
データベースがいらないし、思いついたことを簡単にまとめられます。
実際私もWebで集めたtipsをためるのに利用しています。

ですが、wikiは活動趣旨、組織体系などの固定ページと、活動報告などの時系列ページがごっちゃになってしまいます。
フロントページ以外はGoogleには掲載されませんし、手作り感もぬぐえません。

率直なところ、私がLOCALをそこまでまとまった団体だと意識してなかったのは、このウェブサイトからしか情報を得ていなかったから、というのが多分にあります。

---

開発オフのような、気軽な集まりであるなら、続けばいいのだから媒体はMLでもなんでもいいのです。
しかし、NPO化を進めていて、収益の確保が課題なのであれば、玄関＝ウェブサイトは過去のログ整理のコストを考えてもきっちりすべきと思います。

北海道の技術者の交流というのは私もいつも考えていることなので、LOCALさんにはこれからも、たくさんの技術屋さんに支持される札幌コミュの旗手であってほしいです。
Webまわり、何かできるようであれば微力ながらお手伝いしたいところです…
って自分の時間もうまく使えないくせに…

---

関係ないけど、ビズカフェはじめて行きました。
あんな便利な場所にあるのですね。もくもく会とかしてみたいです。

あ、あとLOCALのありんこ大好きです。ありんこグッズあったら買います。