sugarmosaicのサイトのシステム構成 その1(PHP+ajax遷移+HTML5)
こんにちは、にゃくろ(@nyakuro)です。
ごちうさカフェに行きたくて仕方ないです。
ハニートーストカフェのコラボは行ったんですが、今度のやつはメニューがガチですね。凄くかわいいです!あぁ^〜行きたいんじゃぁ^〜
今回の話題は、sugarmosaicのサイトの構成についてです。
一番書くのがめんどくさそうだけど、触れておかなくてはならない話題。
パンドラの箱です…(大げさ
いきなり、プログラミングの知識がある前提の記事ですみません。アルバムの話とか音楽的なことはまた後日^〜
では、本題に入りたいと思います。
トップページから、言語を選んで入れる雨のページ。これです。
一番目立つ機能は、canvasを使った雨粒描画機能ですが、それ以外にもajax遷移だったり、多言語対応、スマホ対応とかいろいろやってます。
また、sugarmosaicでは、さくらのVPSを借りてサーバーを立てて運営しています。OSはデフォルトでCent OSが入っているんですが、個人的に使い慣れているUbuntuに入れ替えました。
とりあえず、バックエンド -> フロント側という順番でシステムの概要を列挙していこうと思います。
<サーバーサイド側システム概要>
- サーバー:さくらのVPS 1000円ぐらいのやつ
- 基本ソフトとか:Ubuntu 13系 + PHP 5.5系 + MySQL(まだ使ってません)
- PHPフレームワーク:BEAR.Saturday
→ MVC はなくてリソース指向という考え方に基いて作られたフレームワークです。データ+CRUD = リソースに当たる感じです。 - テンプレートエンジン:Smarty
- ページ表示用のコンテンツデータは、テンプレート側で保持するのではなく、リソースで保持し使いまわせるようにする。
<フロント側システム概要>
- HTML5 + CSS3 + JavaScript ( jQuery )
→ モダンブラウザのみサポートです。IE6 or 7とかは真っ向から切り捨てましたw - [1] 通常にアクセスする用のURLと、ajax遷移のためにJSONを出力するURLを別切り
- [2] 多言語対応
- [3] 同じURLにアクセスしても、デバイス判定をして、PCとスマホで表示するデザイン等を切り替え
- canvasを使った雨描画機能(jQuery)
→ [JS]リアルさが想像以上!ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js | コリス - HTML5を使った音楽再生
- jQueryを使った演出
こんな感じです。
以下、気になる所を抜粋していきます。
Bear.Saturday
PHP 5.5とか入っている割には、古めのフレームワークが入ってたりですが、これはちょっと時間が無かったので、普段使い慣れているのを入れちゃいました…w
メジャーなMVCのフレームワークではなくて、リソース指向に基づいたフレームワークです。自分が説明するよりも公式の資料のほうが正確かと思いますので、以下を参照ください。
実際にどのようにリソースを構築したかとかは、また別の機会に書けたらと思います。
ajax遷移 & 多言語対応 & デバイス判定
この3つを真っ正直に実現しようとすると、1URLごとに2^3 = 8パターンのページを用意しなければなりません。
ですので、コンテンツデータを1箇所のリソースにもたせて、どのパターンでもそのリソースを参照するようになっています。
これも、別の機会に細かく説明できたらと思います。
HTML5を使った音楽再生
特に変わったことをしていませんが、スマートフォンではオート再生オプションが効かないので、UIレベルで仕様を変えています。
スマホのブラウザでは、onClickとかユーザーのアクションがないと、音楽ファイルが読み込まれない仕様になっています。
誰もがパケット定額とは限らないし、通信が不安定であることが考慮されてこういう仕様になっているらしいです。
全体の仕様としてはこんな感じです!(雑
あまり特別なことはしていないと思います。
一番、込み入った仕様になっている所が、ajax遷移 & 多言語対応 & デバイス判定のところだと思います。
それぞれ細かい所を追っていくと、エントリーが1本書けそうな勢いだったので分割しました。また近々書いていこうかと思いますー