2月にjQueryのセミナーを開催してから早7ヶ月。
ようやく第6回目のセミナーを開催することになりました。

今回は、たにぐちまことさん（H2O Space）、西畑一馬さん（to-R）、そしてリクリの谷 拓樹（Goodpatch Inc.）による、「スマートフォンサイト制作」をテーマとします。

docomoとauが本格的にスマートフォン端末へ注力し始めた今年。
あなたやあなたの周りでも、スマートフォン案件の話が今まで以上に話題になっているのではないでしょうか？
iPhoneに始まり、iPad、Android端末、Androidタブレット、そして発売が始まったWindows Phone 7.5搭載機。
多くの端末に応じたサイト制作が求められている今、今までのスマートフォンとこれからのスマートフォン、そして、もちろんPCサイトも見据えたサイト制作について勉強していきましょう。

<イベント名>

第6回リクリセミナー『スマートフォン向けサイト制作の「これから」を考える』

<日時>

10/29（土） 10:00〜15:00

<場所>

デジタルハリウッド大阪校 地下セミナールーム
（大阪市北区西天満6-5-17 デジタルエイトビル地下1F）
※場所に関する問合せは、デジタルハリウッドさんに直接しないようご留意ください。

<参加費>

一般：4,000円
デジハリ生：無料（※学生証をお持ちください。卒業生は対象外です。）
※スポンサーの協賛、参加者の人数に応じてディスカウント予定です。

<定員>

80名

<参加方法>

セミナー申し込みページからお申し込みください。
URL：http://re-creators.jp/vol6/

<懇親会>

開催予定ですが、未定です。場所や時間は決まり次第、再度告知します。

先日リクリの忘年会にて声をかけていただき、リクリブログに投稿させていただくことになりました。

まずは簡単な自己紹介を。SOY CMSを開発している日本情報化農業研究所に今年の8月に入社しまして、それまでは25年間ほど埼玉都民として生まれ育ちました。東京での業務システムの開発にプログラムを書く人として2年間弱働いていたのが業界のキャリアとなります。よろしくお願いいたします。

連載のメニュー

これからの連載では以下のメニューでSOY CMSの使い方を説明していきたいと思います。

1. 簡単な使い方。SOY CMS組込編。
2. 記事の使い方はブログエントリだけではないよ、ページの部品管理編。
3. 記事の使い方はブログエントリだけではないよ、カタログ制作編。
4. おまけ。テンプレートパックの作り方。

連載の内容

「ウェブサイト制作を簡単に！！」　という大義は古今東西どのシステムでも掲げられている名分ですが、SOY CMSではデザインとコンテンツを分離することによってその実現を目指しています。具体的には

• モックアップをそのままテンプレート化出来る程度の独自記法
• テンプレート化した後でもデザインの修正が簡単なほどの独自記法
• オーサリングツールでもそのまま作業できちゃうほどHTMLほとんどそのままな独自記法

によって、メンテナンス性の向上やデザイン・インターフェース中心開発への切り替え、制作フローの改善を目指しています。
また、システム側でデザインとコンテンツの分離を担当しているのが「記事とブロック」の存在です。これから4回に分けての連載ではこの「ブロックと記事」について説明していきたいと思います。記事というとブログのエントリのように文章(やタイトルや画像など)のように感じますが、SOY CMSではどのページからでも簡単に呼び出せる仕様により、幅広い使い方が可能になっています。

たとえば共通部品の管理。

複数のページで共通するグローバルナビゲーションやフッタなどを記事にしておけば、ひとつの記事の編集でサイトすべてを更新することが出来ます。

たとえばカタログ制作。

ブログの記事の本文には商品画像だけを、追記には商品説明を書いておけば、管理画面のカスタマイズなしにカタログページを簡単に作ることが出来ます。ブログの使い方はお知らせや社員日記だけではありません。カスタムフィールドを使って項目を追加すれば、ブログの更新と変わらない作業でWEBアプリケーションが作成で出来ます。※ただしカタログに限る、わけでもない

ページの部品もカタログの商品も、テンプレートから記事を呼び出すだけの簡単なお仕事です。テンプレートにHTMLコメントを書いて設定するだけ。

次回以降では「かっこいいおまめ商事」の制作チュートリアルをもとに、SOY CMSの使い方を解説していきたいと思います。よろしくおねがいいたします。

日も差し迫り過ぎであれですが、明日10/31（土）に開催される「 第25回WebSig会議「エコだけじゃない！『ネットを使って社会をよくする』新潮流とWeb屋の関係」 をUSTREAMを介して大阪でも見よう！ということで、今回もモリカワミホさん主催で行うことになりました。

行きたいと思っていたけど、東京まではちょっと…と思っていた方、ぜひご参加ください！

<日時>

10/31（土）13時〜 [準備をお手伝いくださる方は12時30分集合]

<場所>

サムティフェイム新大阪
大阪市淀川区西中島6丁目5番3号

<料金>

参加人数により変動ですが2000円前後 
総経費15,000円[部屋代、プロジェクタ代、他雑費]を人数割りするので 
参加人数が6名を下回った場合はひっそりと他の場所で開催予定。

< 集合場所・必要なもの>

現地集合・ノートパソコン（あれば持参ください）

< 参加方法>

mixi内の「第25回WebSig会議中継in大阪します！」にて参加表明してください。

< 懇親会>

イベント終了後、適宜懇親会という名の飲み会をするかもしれません。

※中継が繋がらない可能性や画質が悪いこともありえます。その点をご留意の上ご参加ください。

アンケートからの感想

以下アンケートからコメントを抜粋しておきますので、どんな雰囲気だったのかを感じで頂ければ幸いです。

菊池崇さん「HTML5 Loading」

• 自分で調べていても掴みきれないというか、何となくもやもやしているところがありましたが、今日のお話でチャレンジしてみたいという勢いがつきました。
• HTML5の流れがわかって全体像がつかみやすかったです。ブラウザでモックアップを作るという考えが目からウロコでした。
• HTML5の目指すところと考え方の基礎となる部分に共感できる部分が大きく、今後の広がりが想像できたのがとても収穫です。ありがとうございました。
• HTML5の説明が簡単で今ようやく頭にストンと落ちた気がします。
• HTMLの歴史は勉強になったし、何が大切なのかという点を最も単的に理解できたと思う。

長谷川恭久さん「コンテンツ戦略を意識したデザインアプローチ」

• 例を出しての解説だったので非常にわかりやすかった。考え方を変える良い機会になったと思う。
• めちゃくちゃ勉強になりました。色々再確認できた感じです。
• 技術よりのセミナーが多い中、聞き応えがあり、為になりました。
• 実践レベルでのコンテンツ戦略の方法を伺えて、とてもわかりやすかったです。
• とても勉強になりました。特にクライアントさんの対処法が今後に活かせそうです。

スライドデータ

菊池崇さんと長谷川恭久さんのスライドデータは以下で公開されております。
復習や勉強にご利用ください。

菊池崇さん
Re:Creator’s KansaiにてHTML5 Loading を講演

長谷川恭久さん
リクリでコンテンツとデザインについて話しました

感想・ご意見など

下記のblogにて感想を書いて下さっております。ありがとうございます。

• Re:Creator’s Kansai セミナー：菊池崇さんのセッションを聴いて
• Re:Creator’s Kansai セミナー：長谷川恭久さんさんのセッションを聴いて
• Re:Creator’s Kansai 第2回セミナー参加してきました。

次回、第3回リクリセミナーは、12月6日（日）に開催です。
詳細が決まり次第、告知＆参加者募集をします。

8/29（土）に開催される「 第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」 を前回同様、USTREAMを介して大阪でも見よう！ということで、今回もモリカワミホさん主催でアルファサード様の会議室をお借りして行うことになりました。

行きたいと思っていたけど、東京まではちょっと…と思っていた方、ぜひご参加ください！

<日時>

8/29（土）13時〜 [準備をお手伝いくださる方は12時30分集合]

<場所>

アルファサード有限会社 会議室
大阪市中央区淡路町3-2-8 トーア紡第二ビル 702号

<料金>

若干（数百円程度）
※模造紙を購入予定です。その他諸経費については当日人数割します。

< 集合場所>

直接アルファサード様をお訪ねください。

< 参加方法>

mixi内の「第24回WebSig会議中継を大阪で見ませんか！」にて参加表明してください。

< 懇親会>

終了後、参加者の皆さんで懇親会を予定しています。
ご都合のつく方はぜひご参加ください。（予算：3500円〜4000円を想定）

※中継が繋がらない可能性や画質が悪いこともありえます。その点をご留意の上ご参加ください。

※今回は事前課題があります！
「第24回WebSig会議の【事前課題】に関するお願い」をご覧になって
もし可能であれば“大阪中継組”と明記の上、提出してください。 ]]> http://www.re-creators.jp/blog/2009/08/25_298.html/feed 0 http://www.re-creators.jp/party/2009/07/28_272.html http://www.re-creators.jp/party/2009/07/28_272.html#comments Mon, 27 Jul 2009 15:40:04 +0000 coyummy http://www.re-creators.jp/?p=272 8/1(土)に忘年会以来となる、リクリの交流会が開催されます！

夏といえばビアガーデン！
皆さんふるってご参加ください。

参加受付はmixiのRe:creators Kansaiコミュニティから表明ください。
もしなんらかの事情でmixiが利用できない場合は、幹事のkennsuさんのメールアドレスへご表明ください。

<イベント名>

リクリ交流会@ビアガーデン

<日時>

8/1（土） 19:00〜

<場所>

中華料理 神仙閣 大阪店
（大阪府大阪市北区梅田1-3-1-1200 大阪駅前第1ビル12F）

<参加費>

男性:3,200円

女性:2,900円

中華バイキング＆フリードリンクのコース

<参加方法>

mixiのRe:creators Kansaiコミュニティにて参加受付中

セミッターのログや、参加された方々がblogにてレポートを書かれてますので、どんな雰囲気だったかを感じてみてください。

セミッターログ
http://semitter.com/websig247/messages/?sid=23&sem_id=6292432

モリカワミホさん
http://blog.con-naissa.com/2009/06/23websig.html

板さん
http://www.studio-bloom.net/archives/1503

なおみさん
http://703.ciao.jp/naominblog/?p=567

よしぱんさん
http://d.hatena.ne.jp/shipayon/20090606/1244276868

coyummy
http://d.hatena.ne.jp/coyummy/20090607/1244378832

最後になりましたが、中継予定のなかったグループワークまで中継してくださったWebSig24/7のモデレーターの皆様、本当にありがとうございました！

Web Directions South’08で講演をおこなったDiggのDaniel Burka氏の紹介と、その時の語られたユーザビリティについてのお話から学ぶ海外のユーザビリティ思想について菊池聡氏が講演されます。
※Daniel Burkaご本人の来日ではございませんのでご注意を。

元ネタのスライドはこちら↓

このスライドだけでは内容は分からないと思いますが、なんだかインスピレーションは沸きませんか？
詳しくは3月20日に、海外のユーザビリティと日本のユーザビリティの違い、その中でも僕たちが生かせるもの是非参加して学びましょう。

特典：Web Direction East’09のチケットが当たる！？

参加者５０名以上になりましたら、抽選で１名に今年開催予定のWeb Direction East’09のチケットが当たるようです。
また昨年開催されたWDE’08の限定WDE08カンファレンスバッグのプレゼントもありますので、こちら目当てで参加してもいいかも笑

参加条件ではありませんが、こちらのWeb Directions East09 -express-のmixiトピックから参加表明してもらえた方がプレゼント／抽選の目安になるということなので、よければ表明の方よろしくおねがいします。

イベント終了後、交流会なども考えていますので、ご興味がある方は上記のmixiトピックまたは「Web Directions East」コミュニティや「リクリ」のコミュニティなどをチェックしてください。

プラグインやハードコーディング

WordPressをCMS的に使うときにどうしても必要になるけども、扱いにくいのが表の存在です。HTMLでいうtableですね。

WordPressのビジュアルエディタにはtableを挿入できるようなものがないので（ですよね？）、まず考えられるのはHTMLでハードコーディングすること。ただ、運用担当者がHTMLをあまり知らない場合はプラグインで解決するという方法もあります。使ったことはないですが、例えば、WP-Tableなどはできそうですね。

でも、最近個人的に気に入っているのがカスタムフィールドを使う方法です。ただし、この方法は採用情報などフォーマットが一定の場合にしか使えません。

カスタムフィールド

コードでいうと、あらかじめ次のようなコードが書かれた独自のテンプレートを作っておきます。

<table class="recruit">
<tbody>
<tr>
	<th>勤務時間</th>
	<td><?php echo post_custom('勤務時間'); ?></td>
</tr>
<tr>
	<th>休日</th>
	<td><?php echo post_custom('休日'); ?></td>
</tr>
<tr>
	<th>給与</th>
	<td><?php echo post_custom('給与'); ?></td>
</tr>
<tr>
	<th>備考</th>
	<td><?php the_content(); ?></td>
</tr>
</tbody>
</table>

とこんな感じであらかじめ独自のテンプレを作っておいて、あとは運用担当者にカスタムフィールドを使って値を入れてもらえれば表が生成されるという方法です。これなら運用担当者がHTMLを知らなくても表を作成することができます。

ちなみに、このときの投稿の本文は「備考欄」を別に作っておき、そこに収納されるような形にしています。

もちろん、オーサリングツールなどで表を作ってもらい、コードを貼り付けてもらうことも可能なのですが、こういう方法があることを知っていると表現の幅が広がりそうな気がします。

さて、今回からWordPress as CMSということで、どんなコードでWPをCMSっぽく使うのかについて書いていきたいと思います。第1回目はいきなり英語ブログのエントリー紹介から始めます。

エントリーは、みんな大好きWebDesign WallからBuilding Custom WordPress Themeです。

Building Custom WordPress Theme

1. WordPressのデフォルトテーマの構造がどのようになっているのかをよく観察する（ヘッダー、記事タイトル、サイト内検索など）。
2. デフォルトテーマで基本的なことが分かったらPhotoshopでモックアップを作る。
3. モックアップをベースに各ページごとに静的なHTMLとCSSを作る。
4. デフォルトテーマのフォルダをよく見てみて、WordPressのテーマがどのように動作しているのかを分析する（テンプレート入門やテンプレート階層を参考のこと）。
5. 作ったHTMLとCSSが入ったフォルダをwp-content/themesにコピーする。デフォルトテーマのフォルダのcomments.phpとsearchform.phpも一緒にコピーする。
6. デフォルトテーマのCSSファイルのコメント部分（冒頭の9行ほど）を新しいテーマのCSSファイルにコピーする。
7. HTMLファイルをいくつかのPHPファイル（header.php、sidebar.php、footer.php）に分割する。
8. HTMLのヘッダー部分をheader.phpとして保存し、デフォルトテーマを参考にしながら、title要素やmeta要素、グローバルナビなどをテンプレートタグに置き換える。
9. HTMLのサイドバー部分をsidebar.phpとして保存する。カテゴリやサイト内検索、アーカイブなどをテンプレートタグに置き換える。
10. HTMLのフッター部分をfooter.phpとして保存し、必要に応じてテンプレートタグに置き換える。
11. HTMLファイルの残り部分はコンテンツのみになったので、get_headerなどで各PHPファイルを読み込ませ、構造を作る。
12. ループを理解する。ループは単純にいうと、記事がブログ内にあればそれを表示し、なければ見あたりませんと表示する命令のことだ。
13. デフォルトテーマから<div id=content>..</div>までをコピーし、HTMLファイルに貼り付ける。また、投稿日時や記事タイトル、カテゴリ、前後の記事へのリンクなどをテンプレートタグに置き換える。
14. プレビューでテーマを確認する。
15. single.phpというファイル名で同じような作業を行う。
16. page.phpでも同じことをする。ただし、こちらにはコメントや投稿日時などは必要なければ消しておくこと。
17. あとは新しいテーマのフォルダからHTMLファイルを削除すれば完成だ。あとはsearch.phpや404.phpなども作ればよい。

WP as CMSのために

基本的なサイトの作り方は僕もこの流れとほとんど一緒です。特に、まずモックアップからHTMLファイルを作って、各パーツにバラバラにしていき、それからテンプレートタグというのは全く一緒ですね。ただ、CMS化するのであれば、コメントを必要とされることがあまりないから、そのへんは飛ばしますかね。

かなり雑な訳ですが、原文の方はスクリーンショットもついていますし、サンプルデザインもダウンロードできますので、英語だとあまり引いちゃわずにぜひとも試してみてください。