｢BaserCMS勉強会＠福岡 vol.3｣にて発表した資料のフォロー･エントリーです。
今回、ライトニングトークを｢BaserCMS＋iPhone用コンテンツやってみました。｣という題名で行わせて貰いました。
具体的にどんなファイルやどんな設定を行って試してみたのか、その辺りは飛ばしてお話させて貰ったので、ここで扱った内容を補足しておきます。
BaserCMSはテーマ(テンプレート)を利用して、自由にビュー側(公開側)をコーディングする事が出来る上に、各コンテンツ別のテーマも作る事が出来ます。(各ブログ用、各問合せフォーム用など)
今回はこれを利用して、サイトにiPhone用のものを用意する事が出来ないかな？という趣旨になります。
正確な意味で｢BaserCMSをiPhone対応にする｣という事とはちょっと違うので、その辺りが残念な点ですね。。。
BaserCMSにもともと備わっているモバイル対応ページのように、iPhone対応ページを用意出来るかどうかについては、またぼちぼち考えて行こうかな？って思ってるところです。
なので今回は｢iPhone用コンテンツ｣を、BaserCMSが持ってる複数ブログ作成機能を利用して、そのブログの1つをiPhone用のものとして使ってみよう！という事になります。
]]>
留意事項
これらのファイルや情報はまだまだ改善が必要なものなので、ローカルでちょっと試してみるとか、ファイルの中身を見てみるくらいに留めておいて下さい。
もし、何かの参考にでもなるようだったら幸いです。
追加するテンプレート、ファイルの一覧
iPhone用のコンテンツ(ブログ)のために、テンプレートやファイルを用意します。
BaserCMSにデフォルトで入っている｢demo｣テーマ利用を例とします。
コードの確認や利用ファイル一覧の確認は、下記よりダウンロードする事が出来ます。
▼20110123_app.zip
利用時のファイル配置は以下になります。
app
┣ plugins
┃ ┗ blog
┃ ┗ views
┃ ┗ helpers
┃ ┗ blog.php (iPhoneページ用のタグを幾つか追加したヘルパー)
┗ webroot
┗ themed
┗ demo (テーマ名フォルダ)
┣ blog
┃ ┗ touch_contents (ブログページ用)
┃ ┣ archives.ctp
┃ ┣ index.ctp
┃ ┗ single.ctp
┣ css
┃ ┗ jqtouch.css (jQTouch用CSS)
┣ elements
┃ ┣ widgets (widget用テンプレート)
┃ ┃ ┣ blog_calendar.ctp
┃ ┃ ┣ blog_category_archives.ctp
┃ ┃ ┣ blog_monthly_archives.ctp
┃ ┃ ┗ blog_recent_entries.ctp
┃ ┣ iphone_about.ctp
┃ ┣ iphone_blog_comment.ctp
┃ ┣ iphone_blog_comments.ctp
┃ ┣ iphone_footer.ctp
┃ ┣ iphone_global_menu.ctp
┃ ┣ iphone_header.ctp
┃ ┣ iphone_index_navi.ctp
┃ ┣ iphone_sidebar.ctp
┃ ┗ iphone_widget_area.ctp
┣ js
┃ ┣ jqtouch.js
┃ ┗ jquery.js
┣ layouts
┃ ┗ touch_layout.ctp (iPhoneサイト用のレイアウト)
┗ themes (jQTouch用のテーマ)
┗ apple
┣ img (中身省略)
┃ ┗ ･･･
┣ theme.css
┗ theme_add.css (表示調整用に追加したCSS)
追加したヘルパー
■/app/plugins/blog/views/helpers/blog.php
ブログヘルパー(表示用タグの集まり)に、幾つか処理を追加してます。
もともとある /baser/plugins/blog/views/helpers/blog.php を拡張したものになります。
Blogのコンテンツ用テンプレート
■/app/webroot/themed/demo/blog/touch_contents
ブログのコンテンツ表示用テンプレートです。
▼ブログの基本設定 -> オプション -> コンテンツテンプレート名 => touch_contents
レイアウト用テンプレート
■/app/webroot/themed/demo/layouts/touch_layout.ctp
▼ブログの基本設定 -> オプション -> レイアウトテンプレート名 => touch_layout
ウィジェット用テンプレートの追加
■/app/webroot/themed/demo/elements/widgets
このウィジェットの箇所については、すいませんがちょっと優しくない方法になります。
追加するだけではダメで、一部改変が必要になります。
iPhone用として作成したブログのNOをメモします。ブログの基本設定に入った「NO」の番号です。その番号を以下の赤文字の数字の箇所に書きます。
ウィジェット用テンプレートのそれぞれで行います。
<?php
// ブログIDで分岐(iPhoneブログの時とそうでない時)
if($data['blogContent']['BlogContent']['id'] == 2) {
?>
＜iPhoneブログ(コンテンツ)用の表示＞
<?php
} else {
?>
＜iPhoneブログ以外での表示＞
<?php
}
?>
jQTouch用のテーマ
■/app/webroot/themed/demo/themes/apple
jQTouchの配布サイトにて配布中のファイルの、themesディレクトリに入っているフォルダをそのまま利用します。
これに、表示調整を行っている /app/webroot/themed/demo/themes/apple/theme_add.css ファイルを追加します。
配布元サイトは以下です。
■jQuery: The Write Less, Do More, JavaScript Library
■jQTouch -- jQuery plugin for mobile web development
widgetの用意
iPhoneコンテンツで利用するwidgetを用意します。
▼システム設定 -> ウィジェットエリア管理 -> 新規登録 => iPhone用
中身は「カテゴリー、月別、最近の投稿」を設定。
特に何かを変える必要はなく、ドラッグ＆ドロップで追加して｢利用する｣にチェックを入れて｢保存｣します。
iPhone用ブログの作成
iPhoneコンテンツとして利用するためのブログを作成します。
ブログの作成までに到達するルートは以下。
- ニュース管理 => 新規ブログを登録
- ニュース管理 -> ブログ一覧 => 新規登録
追加・作成したテンプレート、ウィジェットを適用させます。
※ブログを登録したら記事編集に飛びますけど、｢新規ブログカテゴリを登録｣に行って、先にカテゴリを幾つか登録しておくと良いです。カテゴリを作ったら、記事編集に入り記事を登録します。
グローバルメニューの追加※必須じゃないです
今回の勉強会の ＠ryuringさんのセッションで、管理画面のグローバルメニューの調整について話が出ていたので、ここでも紹介しておきます。
iPhone用のコンテンツを追加した際には、管理画面にもともとある｢ニュース管理｣メニューのように、iPhoneブログ用のメニューを追加しておくとアクセスが簡単になります。
▼システム設定 -> グローバルメニュー管理 -> タイプを｢管理画面｣にして検索ボタンを押す => 新規登録
公開側のナビゲーションだけでなく、管理側のナビゲーションも変更する事が出来るのも、BaserCMSの良いところですよね。
作業のまとめ
やることの一覧をまとめてみます。
- ウィジェット管理でiPhoneコンテンツ用のウィジェットを追加。
- iPhone用として利用するコンテンツ(ブログ)を追加。
- 動作に必要な js や css を追加。
- (ウィジェットの適用ブログIDを書き換えた上で)テンプレートを追加。
といった感じになります。
まとめとかダメなところとか
まだまだたくさん考えるべきところがあります。
目的だった｢テンプレートの追加作成とBaserの設定だけで行う｣という点は実現出来ませんでしたし、拡張が必要だし、フォームの動作が出来てません。
残念な結果となりましたが、私自身はいろいろ勉強になりました。
発表資料
■公開した閲覧デモ：これの短縮URL => http://baserstudy.materializing.net/vol3/touch/
■BaserCMS＋iPhone用コンテンツやってみました。 | ZENPRE（ゼンプレ）
今回のプレゼン資料公開に当って、株式会社Fusicさんのサービス｢ZENPRE｣を利用させて頂いてます。ありがとうございました。
USTREAMと連動して資料公開が出来るプレゼン･サービスです。
詳しくは以下にてどうぞ丶(･ω･)ノ
■ZENPRE（ゼンプレ）｜遠隔地からセミナー・勉強会へ参加！
■株式会社Fusic（フュージック）
あとがき
今回、初LTという事でとんでもなく緊張していたのですが、温かい雰囲気の皆さんのおかげで、なんとか話しをする事が出来ました。
ほんとありがとうございました_(．．)_
ライトニングトークの雰囲気とか、資料の数と話の長さのバランスも判んなかったので、その辺から手探りしつつやってました。
話すのがヘタなので、良い機会を頂きました。
この内容は自体は｢こうやってみたけどダメでした｣的な内容なので、この経験を活かして、もっと実用的ななにかをいずれやりたいなぁ、って思ってます。
参考
■テンプレート基本関数リファレンス｜その他ドキュメント｜制作・開発マニュアル｜BaserCMS
■ブログのテンプレート変更｜デザイナーズ｜制作・開発マニュアル｜BaserCMS
]]>
■BaserCMS - 国産オープンソース！コーポレートサイトにちょうどいいCMS
■Live Commerce ! オープンソースECサイト構築プラットフォーム
■activeCollab - Project Management and Collaboration Tool
■ExpressionEngine - Publish Your Universe!
■Pligg CMS
■Nucleus CMS Japan
■Fresh Reader - Productivity Booster - fast RSS feed reader
![ファイルをアップしてSTEP2に進んでみた画面 [画像]](http://farm6.static.flickr.com/5211/5383321901_f75fcef2de_b.jpg){kind=link}
![｢再チェック｣して表示された画面 [画像]](http://farm6.static.flickr.com/5212/5383356707_60cb775a54_b.jpg){kind=link}
![データベース設定画面 [画像]](http://farm6.static.flickr.com/5212/5383983468_1075efcc43_b.jpg){kind=link}