nyakuroのブログ

音楽ユニット"sugarmosaic"のコンポーザーの@nyakuroのブログ。作詞・作編曲 / Web Engineering / 写真・映像などについて書きます。

sugarmosaicのサイトのシステム構成 その1(PHP+ajax遷移+HTML5)

こんにちは、にゃくろ(@nyakuro)です。

ごちうさカフェに行きたくて仕方ないです。
ニートーストカフェのコラボは行ったんですが、今度のやつはメニューがガチですね。凄くかわいいです!あぁ^〜行きたいんじゃぁ^〜

http://www.patisserie-swallowtail.jp/collaboration/event/2014_gochiusa/images/sweets_sum05.jpg

 

今回の話題は、sugarmosaicのサイトの構成についてです。

一番書くのがめんどくさそうだけど、触れておかなくてはならない話題。
パンドラの箱です…(大げさ

いきなり、プログラミングの知識がある前提の記事ですみません。アルバムの話とか音楽的なことはまた後日^〜

 

では、本題に入りたいと思います。

 

トップページから、言語を選んで入れる雨のページ。これです。

一番目立つ機能は、canvasを使った雨粒描画機能ですが、それ以外にもajax遷移だったり、多言語対応、スマホ対応とかいろいろやってます。

また、sugarmosaicでは、さくらのVPSを借りてサーバーを立てて運営しています。OSはデフォルトでCent OSが入っているんですが、個人的に使い慣れているUbuntuに入れ替えました。
とりあえず、バックエンド -> フロント側という順番でシステムの概要を列挙していこうと思います。

 

<サーバーサイド側システム概要>

  • サーバー:さくらのVPS 1000円ぐらいのやつ
  • 基本ソフトとか:Ubuntu 13系 + PHP 5.5系 + MySQL(まだ使ってません)
  • PHPフレームワークBEAR.Saturday
    → MVC はなくてリソース指向という考え方に基いて作られたフレームワークです。データ+CRUD = リソースに当たる感じです。
  • テンプレートエンジン:Smarty
  • ページ表示用のコンテンツデータは、テンプレート側で保持するのではなく、リソースで保持し使いまわせるようにする。


<フロント側システム概要>

 

こんな感じです。
以下、気になる所を抜粋していきます。

Bear.Saturday

PHP 5.5とか入っている割には、古めのフレームワークが入ってたりですが、これはちょっと時間が無かったので、普段使い慣れているのを入れちゃいました…w

メジャーなMVCフレームワークではなくて、リソース指向に基づいたフレームワークです。自分が説明するよりも公式の資料のほうが正確かと思いますので、以下を参照ください。

 

実際にどのようにリソースを構築したかとかは、また別の機会に書けたらと思います。

 

ajax遷移 & 多言語対応 & デバイス判定

この3つを真っ正直に実現しようとすると、1URLごとに2^3 = 8パターンのページを用意しなければなりません。
ですので、コンテンツデータを1箇所のリソースにもたせて、どのパターンでもそのリソースを参照するようになっています。

これも、別の機会に細かく説明できたらと思います。

HTML5を使った音楽再生

特に変わったことをしていませんが、スマートフォンではオート再生オプションが効かないので、UIレベルで仕様を変えています。

スマホのブラウザでは、onClickとかユーザーのアクションがないと、音楽ファイルが読み込まれない仕様になっています。
誰もがパケット定額とは限らないし、通信が不安定であることが考慮されてこういう仕様になっているらしいです。

 

 

全体の仕様としてはこんな感じです!(雑
あまり特別なことはしていないと思います。
一番、込み入った仕様になっている所が、ajax遷移 & 多言語対応 & デバイス判定のところだと思います。

 

それぞれ細かい所を追っていくと、エントリーが1本書けそうな勢いだったので分割しました。また近々書いていこうかと思いますー