プロフィール

メインメニュー

最近の記事

カテゴリー

カレンダー
2017年3月
« 3月    
 12345
6789101112
13141516171819
20212223242526
2728293031  

アーカイブ

2004年の日記

ケータイ版URL

http:://toyao.net/xoops/
modules/wordpress/

 
ITに関すること、草野球のことなど。
3月
2014
24

デザイン初心者がプロのデザイナーにいろいろ質問して勉強になった話。WordBench京都にて。

2014/3/23に開催されたWordBench京都に行ってきました。
2014年度 第03回WordBench京都 勉強会
 
IMG_16892.jpg
 
 
WordBenchは主にWordPressの話題を扱った勉強会ですが、今回はデザインの話が中心でしたのでWordPressはあまり関係ありませんでした。しかし、デザインからアプローチし、デザイナーにいろいろ喋ってもらう勉強会というのは意外と少ないので、いい機会だったと思います。ためになるお話をいっぱい聞けました。
 
この企画について、京都だけではなく別の勉強会でも開催する価値がありそうと思いましたので、次回に繋げられるヒントを残すために、企画・運営のやり方も含めて考察したいと思います。
 

企画・準備にまつわること

 
今回は、「デザインに関することを、初心者が質問してデザイナーに答えてもらう」という質問形式の勉強会でした。
 
参加者予定者に対して、事前に「デザイナーに聞きたいこと」を開催日の数週間前から募集していました。
といっても、参加者は何を聞きたいのかも分かっていないことがあります。多少知識が無いと「適切な質問」ができません。
そういう意味で、デザイナーからうまく回答が引き出せる質問が集まるかどうかが、一参加者の僕としても心配でした。
 
WordBench京都管理人の瀬戸さんは、質問と回答がうまく機能するように、川井さんと高井さんの2名のデザイナーを回答者として初めからアサインしてくれてました。質問に対して、参加者の中から誰も回答が出ない場合には、彼らに答えてもらうという形式です。
質問に対しての回答を事前にスライド付きで用意してくれてました。図解があったのはありがたかったです。
漠然とした抽象的な質問内容にも、適切な回答を用意してくれていました。
当日はこの2名の方に加えて、答えられる人が互いに意見交換したりしてうまくディスカッションができていたと思います。
 
参加した人数は運営・参加者合わせて22人。テーブルはロの字の会議形式です。
これくらいの人数だったからうまくできたのかも知れません。もしもっと多くの人数、例えば50人くらいの数で同じことをやろうと思ったら、マイクは多分必須になると思うし、人が多くて自由に発言できる雰囲気が損なわれるかも知れません。複数グループに分けるという手を使う必要があるかも知れません。
 
話が盛り上がって3時間があっという間に過ぎ、時間が足りないくらいでした。
デザインの世界はものすごく広いです。これだけの時間で語り尽くせないくらいです。
「時間が余ったらどうしよう」ということはあまり考えなくてもいいのかなと思いました。
 
 
それでは、以下に勉強会で話題になったQ and Aを紹介します。といっても答えは1つではないし回答するデザイナーによって答えはいろいろ違ってきそうなので、他の勉強会で同じ質問をまた別の人にぶつけてみても面白いと思いました。
 
 

デザイナーへの質問と回答

Q1 フォントって大事なの?
A1 大事です。
 
例えば明朝体だったらどのフォントも似たような形をしていますが、ちゃんと見ると同じではありません。
特徴的なのは「あ」の字。よく見比べてみてください。
ヒラギノ明朝は「あ」の曲線の切り返しにおいて、一度筆が止まっているのが分かります。美しいです。
 
IMG_1679.JPG
 
 
明朝体はフォーマルな場面で、ゴシック体はカジュアルな場面で使われます。
例えばお葬式の案内にゴシック体を使うとふざけているように見えてまずい。
エヴァンゲリオンのタイトル字は、ストーリーのバックボーンが宗教的な話なので、明朝体を使った方が怖さ、臨場感がでます。
 
IMG_1684.JPG
 
タイトル文字など特に大事な箇所のフォントを選ぶときは、10フォントくらい比べながら、どのフォントにするか精査するそうです。
一見、フォントの間の細かな違いは誰にも気づかれないかも知れませんが、この完成度がお客さんからの信頼につながるので、手を抜かずにきちんとやりたい、ということでした。
 
フォントの話は、丸一日あっても語り尽くせないくらいあるそうです。
 
 
Q2 色の決め方にはルールがあるの?
A2 あります。
 
ただし、デザイナーが最初から色を決めることはほとんどありません。
多くの場合、既に存在しているWebサイトなどを参考にして決めます。
コーポーレートカラーがある場合(例えばマクドナルドは赤色、など)は、その色を無視するわけにはいきません。これを出発点として、背景や周辺の色を考える必要があります。
 
簡単に色の組み合わせを教えてくれる配色ツールがあります。デザイナーもこういうのを便利に使っています。
Adobe Kuler
ColorSchemeDesigner
HUE/360
 
 
Q3 いまどきのCSSトレンドってなに?
A3 レスポンシブデザイン、フラットデザインなどがあります。
 
BootStrapはレイアウトやボタンなどよく使うパーツのデザインをはじめから用意してくれているツールです。これを使うと見た目の良いデザインが簡単に作ることが出来ますが、デザイナーはあまり使いません。
デザインをあまり得意としないプログラマなどが使うと便利でしょう。
 
うどんに例えて言うと、これはうどんスープの素みたいなものです。
簡単にうどんを作るときに便利ですが、他のうどんとの差別化が難しくなるので、デザイナーはうどんのダシから手作りするでしょう。
 
 
Q4 伝わりやすいデザインのポイントってなに?
A4 多岐に渡るので回答は難しいですが、例をあげます。
 
例えば文章は、文字と文字の行間を空けましょう。
段落ごとに空白行を入れるとさらに読みやすくなります。
 
IMG_1693.JPG
 
 
Q5 1px(ピクセル)の違いって大きいの?
A5 大きいです。
 
例えば、同じ幅のブロックを3列並べる場合のブロック間隔の幅は、1pxでもずれると等間隔に並んでいないように感じるので違和感があります。
 
photoshopなどで作った1pxの黒い線をWebページで表示した場合、仮に0.5pxずれると、ディスプレイでの表示は2pxのグレー色の表示になってしまうことがあります。これはパソコンのディスプレイが1px単位でしか表現できず0.5pxの位置に線を描けないため、苦肉の策で色を薄くして2pxで表現しています。そうならないように、photoshopの設定で1px単位でしか線を描けないようにしておく必要があります。
 
 
Q6 デザイン力を身につけるために普段していることは?
A6 日常で目にするデザインを見て、「なぜこうなっているか」を考えましょう。
 
レストランに行ったときに、メニューのデザインがなぜこうなっているか?を考えてみましょう。
写真に一緒にに写り込んでいる、「いらないもの」はないでしょうか? 自分だったらこうする、というのを考えてもいいかも知れません。
デザインは付け足していくことよりも、いらないものを削っていくことが重要です。
 
 
Q7 デザインに関するお勧めサイトや書籍があれば教えてください。
A7 ノンデザイナーズ・デザインブックがおすすめ
 
 
ノンデザイナーズ・デザインブック [フルカラー新装増補版]
Webに限らず使えます。ここに書かれていることを忠実に守ったらデザイナーになれます。
 
 
Q8 DTPしかしていないデザイナーさんにWEBデザインをお願いするときの注意点
A8 Webの暗黙のルールを言葉でちゃんと伝えましょう。
 
・色空間をCMYKではなくRGBで作ってもらいます。
・紙だと単位はmm(ミリメートル)、A4サイズといった単位があります。そうではなくpx(ピクセル)で作ってもらいます。横幅も210mmではなく1000pxにしてもらうなど。
・紙のサイズを無意識に思い浮かべてしまい、ボタンやリンクを下のほうに配置してしまうことがあるが、そうしてしまうとWebでは最初の1ページ内に表示されずスクロールが必要になることもあるので、ボタンは上部に配置してもらいます。
・印刷媒体は解像度が高いので明朝体など細い字も鮮明に印刷できますが、Webでは文字がつぶれることがあるので、Webで見られる大きさを意識してもらいます。
 
 
Q9 デザイン制作において、顧客の要望やヒアリングで効果的なテクニックは?
A9 客の言うとおりに作業しないこと。
 
客に「赤い文字にしてくれ」と言われて素直に赤くしてはいけない。
客はもしかしたら「目立たせたいから赤くしたい」と思っているのかも知れない。それならば文字を赤くする以外に目立たせるソリューションはあるかも知れない。
客がどういう目的を持っているかの真意を汲み取ること。
 
こちらの要求が通りにくいときは、有名サイトでやっている手法を紹介すると効果的。
客「もうちょっとサイトの横幅を狭くして」
制作者「今はこれくらいのサイズが普通です。これ以上狭くしない方がいいですよ」
客「いやいや、いいから横幅を狭くしろ」
制作者「見てください、Yahooのトップページは○○pxですよ。いまはこれくらいの幅が普通です」
客「なるほど、では狭くせずこのままでいきましょう」
 
AppleとかMicrosoftとかSONYとかのネームバリューがある企業の公式サイトでやっている手法を紹介すると効果的らしいです。
 
 
Q10 WordPress想定でデザインする際、どんなデータを参考にして作成しますか?
A10 WordPress制作の経験を積むしか無いでしょう。
 
WordPressにしやすいサイトというのは実際には存在します。ヘッダ位置にナビゲーションメニューがあり、サイドにサブメニューがあるようなデザインです。
しかし、デザインの可能性は無限です。WordPressで組みやすいからといって、無理にこのレイアウトに合わせるようではプロとは言えません。
システムに合わせるのではなく、本当に実現したいデザインをそのままWebサイトとして作り上げる努力をしましょう。
 
 
Q11 デザインに使うツールでは何を使っていますか?
A11 Cacoo、Fireworks、Illustratorなどです。
 
ワイヤーフレーム作成はCacooが便利です。
WebデザインはFireworks。
Illustratorについては同じような機能を持つ代替ツールが無いです。
 
 
 
他にもQ and Aはありましたが、代表的なものを書きました。
デザインは深いですね! 僕はエンジニア一本でデザインはできませんが、デザインもできたら嬉しいので、こういう考え方や姿勢を少しずつ学んでいこうと思います。
 
 
[関連ブログ]
2014年度 第03回WordBench京都 勉強会 フォントって大事なの?
プログラマさんのデザインに関する疑問にお応えする会” @WordBench京都(2014/3/23) | 網站・茶商 SHINCHAYA
Webの文字組版の問題は、かつてDTPが通ってきた道なのかも – Cherry Pie Weblog

3月
2014
10

入門者に最適な、簡単すぎるWordPressテーマ”doshirouto2014″を作ったので配布します! 初心者はこれでテーマを理解しよう!

2014/3/8に行われたWordPressの勉強会WordBench神戸にて、
「WordPressの常識をくつがえす超簡単テーマ”doshirouto2014″を作ったのでこれでテーマを理解しよう!」
というタイトルで発表しました。
そのときのスライドを公開します。
あわせて、この発表のために作った入門者向け簡単WordPressテーマ”doshirouto2014″を公開します。
 
去年5月に、Twenty Thirteenをベースにした超簡単テーマ”doshirouto”を作ったのですが、その後Twenty Fourteenが2014/12にリリースされてデフォルトテーマになり、doshirotoテーマも古くなってしまいました。
ということで、改めてTwenty Fourteenをベースにした簡単テーマ”doshirouto2014″を作ることにしました。

 
参考までに、去年のdoshiroutoの記事はこちら。
WordPressの常識をくつがえす超簡単テーマ”doshirouto”を作ったよ! 初心者はこれでテーマを理解しよう!
 
 

初心者向けWordPressテーマdoshirouto2014とは

最新リリースされたWordPressバージョン3.8以降に同梱されているTwenty Fourteenテーマをベースにして、初心者にも理解しやすいように改造した入門用テーマです。
こんな人の利用を想定しています。
・WordPressのテーマのしくみを理解したい。
・WordPressのテーマを作ったことがないけど、作れるようになりたい。
・WordPressのテーマって、難しいから今まで手をつけられなかった。
 
 

なぜこのテーマを作ったか?

WordPressのリリースのペースは早く、その度にどんどん高機能化されています。

 
機能が増えて便利になっていくのは良いのですが、その分、初めて触れるユーザにとって参入のハードルが上がってきています。
デフォルトテーマのTwenty Fourteenは、レスポンシブな見た目やWebフォント、おすすめコンテンツの表示など、機能がもりだくさんなのですが、それに比例してファイルの数が多くなっています。数えてみると62もありました。
もはや初心者は一朝一夕でテーマの仕組みを理解するのが難しくなってきています。
このままではWordPressが「なにやら難しくて扱いにくいツール」と初心者に映ってしまい、敬遠されてしまうのではないかと思いました。
実際、僕が直接お会いした初心者から、「WordPressの複雑なテーマの構造の理解に苦しんでおり、カスタマイズができない」といった声を多く聞いています。
確かに、デフォルトのテーマファイルの中身を覗くと、意味の分からない記号の羅列で、いったいどこを触っていいのか分かりませんね…
このままではWordPressの魅力が初心者になかなか理解されないのではないかと思いました。そこでできるだけ簡素にしたテーマを作って、それで「WordPressはここまで簡単になるんだよ」というのを知ってもらいたいと思いました。
doshirouto2014テーマに含まれるファイル数は、たったの6個です。
 
 

doshirouto2014の特徴

・日本語しか対応していません。
・古いバージョンのIEは対応していません(IE9以降はOK)。
・SEO最適化はされていません。
・カスタムヘッダーやWebフォント、genericons、おすすめコンテンツなどの新しい機能には対応していません。
・WordPress Version3.8以降で使用することを前提にしています。
・テーマを構成するファイル数を極限まで減らしたので、テーマファイルを使う人の心理的負担が軽減されています。
・テーマファイル内に日本語のコメントをたくさん埋め込み、ファイルの中身を読むだけで理解ができるようにしました。
 
 

使用上の注意

・あくまで初心者用の簡易テーマですので、練習用としてお使いください。実際にを運用しているサイトに使うといろいろ不都合や不便なところが出てくると思いますのでおすすめしません。
・このテーマには足りない機能がいっぱいありますので、足りないと思った時はデフォルトテーマTwenty Fourteenを使用していただくか、自分で機能拡張してください。
 
では、よいWordPressライフを!
 
doshirouto2014のダウンロードはこちらから!
 
 

1月
2014
16

WordPressの見積り勉強会を終えて、運営の一人として思うこと

先週(2014/1/11)のWordPressの見積り勉強会の感想です。

イベント後にも内外からいろんな考え方、意見をいただいたので、それを踏まえて自分の思いを残しておくことにします。
こんなん書いたらまた怒られそうだけど…
 

やっぱり相場って無かったんだ

各チームが作ったWebサイト構築の見積価格に大きな開きがでました。
まだ見積りをやったことが無い人に見積りを体験してもらったり、価格はともかくそのプロセスを勉強する会でもあったので、出てきた結果(=価格)のばらつきが激しくなるのはある程度予想できていました。
イベント後に寄せられた鋭い指摘を見ると、「これは実社会に通用するものではない」「現実性が無い」「考慮が足りない」というところもやっぱりあるのかなと思いました。
 
今回のイベントを通して一つ分かったのは、みなさんの間に
・見積りってこうやって作るもんだよね
・だいたい常識的にこれくらいの価格だよね
ていう共通認識が存在しない、ということです。
 
Web業界の人間が含まれる勉強会でもこうなったので、業界外の一般の人にとっては、Webサイトの制作料金なんてものはとうてい想像できない金額であるわけです。
 
この状況はなんとか改善したほうがいいんじゃないか、と思います。
一軒家を建てるコストは数千万円かかる、という相場観は業界の人間じゃなくても持っています。
「クルマを買いたい」となると、数百万円の出費になることは僕らは知っています。
もちろん100万円未満のクルマもあるし、1億円以上するクルマもあります。そういう極端な例を言っているのではなくて、普及車であるファミリーカーやセダンの場合は数百万で買えるんじゃない? と思いますよね。

 
Webサイトにはそれが無いんです。「一般的にはこれくらい」という相場が。
 
そのことを、今回の見積り勉強会で再認識しました。

 

見積りする前に、先にお客さんに予算を聞いた方がいい?

「Webサイトの制作の場合は、依頼してきたお客さんにまず予算を聞きます。それをしないと始められない」
という意見がありました。
 
なぜそういう確認をしないといけないか?
それは、お客さんとWeb制作者の間に共通の相場観が形成されてないから、「大体いくら」という落とし所を探らないといけないからだと思います。

逆にお客さんに相場観があれば、予算をわざわざ聞かなくても話は進められるわけです。

「一般的なWebサイトの場合、大体これくらいの価格で出来るよね」というのをお客さんが知っていて、制作者もその相場観を基準に見積りを作れば、お客さんが価格を見て「なんでこんなに高いの!」と仰天する事件は起きません。

 

でも現状はそうではありません。
予算を聞かずに先に見積りを作って、お客さんの思っている価格帯と大きくかけ離れる見積りが出たりします。
なので事前に予算を聞いておくことが必要なんだと思います。

 

このように、
見積りを取る際には「まず先に予算を聞く」ことが当たり前になっている節がありますが、でもそれは本来の見積りのあるべき姿ではなく、
「客と制作者の間で共通の相場観が無いから、仕方なしに先に予算感を聞いている」
のが現状だと思います。

 

見積りは本来、客の予算を聞かなくても作れます。
高い、安いを決めるのはお客さん(消費者)ですが、(オークションなど特殊な売買形態を除いて)生産者側が先に価格を提示ケースの方が多いと思います。

 

今回の勉強会は、WordPressの勉強会の一環として見積りをやりました。

マーケターとかコンサルタントが見積り勉強会をやると違った趣になると思いますが、私達がやっているのはWordPressの勉強会であり、「作る側」の人たちが集まる勉強会です。
その人達が作る見積りですから、生産者側サイドの視点で見積りが出来上がってしまうのは仕方がないことです。
そして勉強会ですから「勉強したいから来ている」のであって、勉強が足りてない発展途上の人たちが多く含まれているので、もちろん完璧な見積りなんて出てきません。

 

その上で、
「こんな見積りおかしいよ」ということであれば、ぜひ僕らを消費者目線を持つ見積りの勉強会に誘ってもらえればと思います。
または、ちゃんとした見積りができる「お客さん目線を持つ人」が僕らの勉強会に来て指導してくれれば、こんなに嬉しいことはありません。

 

相場はあった方がいい

相場の話に戻します。
 
勉強会を開催して「Web業界には相場というものが無いね」ということに気づいたわけですが、
じゃあこの相場は有った方がいいのか? 無くてもいいのか?
 
意見が分かれるところだと思いますが、僕は「相場はあった方がいい」と思います。
 
その方が消費者と生産者のパワーバランスが公平になるからです。

先ほどの「まず先に客の予算を聞く」見積り方式の場合、お客さんに料金表を見せず、制作者サイドだけで見積りを組み立てるので、お客さんは制作者の言いなりになりがちです。
「制作者側の後出しジャンケン」になりますので、制作者側が有利です。
 
例えば、客によって制作者が見積りの価格を変えることができます。
お金持ちの客だったら、たくさん儲けられるようにするため制作者側が見積り額を高めに設定することもできるでしょう。
また、「本当はもっと高いんですけど、あなたにだけ半額で見積り出しました!」という特別感を演出することも出来るでしょう。
それは、これが「相場を制作者側がつかんでおり、客はその言いなりになるしかない」方式だからです。
 
一方、制作料金がオープンにされていて、例えば「1ページ=○円」「トップページデザイン料=○円」という制作単価テーブルがあって、客が先に予算を告げなくても自分で積み上げて価格を計算できる場合はどうでしょう?
この場合は、成果物の対価としての価格がはっきり決まっていますので、お客によって価格を変えるということはできません。
また、「この価格はあなただけの特別なものです」というやり方はできません。

しかし消費者にとってはメリットだと思います。
「ほんとうはもっと安いのに高額な見積りを突きつけられているんじゃないか」という心配をしなくて済むからです。不公平感も無くなります。
 
僕はこの明朗会計こそがお客さんに優しい見積りだと思っています。
「先に客に予算を聞く」方式は、客の懐具合を聞いて、それにベストマッチする見積りを提案できるので、客にもメリットがあると思いがちです。
しかし、不明瞭なこのやり方より、明朗会計である「料金テーブルがある」方式の方がお客さん思いであると思ってます。
もちろん「料金テーブル」を持っていても、開示していないとダメです。
「不特定多数が見ることが出来る料金テーブルがある」必要があります。

 

相場を作りたくない人たち

では逆に、「相場を作りたくない」と思っている人はどんな人たちでしょうか?
「相場を作ることができない」「相場を作ることなんて不可能だ」派の人はここでは置いときます。これはまた別の話になるからです。
 
「相場を作りたくない」人たちは、誤解を恐れずに言うと、「既得権益を持っている人」です。
もし相場が形成されると、多くの場合価格破壊が起きます。「相場を作りたくない」人たちはそれを恐れています。
 
Crowdworksやランサーズなどのクラウドソーシングが台頭してきていますが、このようなサービスが広がるにつれ、Webについても制作事例が増えて、しかも価格がオープンになりますので、
「この制作、作業はクラウドソーシングだと○円くらい」という相場が作られていきます。
そしてそれは、価格が安くなる方向へ引っ張られます。オープンなプラットフォームですから価格競争力が必要です。自然に価格は下がっていきます。

でも消費者にとっては、価格が分かりやすいし、仕事を頼みやすくなるので歓迎すべきプラットフォームだと思っている人が多いと思います。
その証拠に、クラウドソーシングの取引高は年々上昇しています。
 
「相場ができると消費者にとっては安心」というのはWeb制作に限らず、世間一般のすべての売買に当てはまります。
日本でタクシーに乗ると、ちゃんと運賃が表示されていますよね。それより高い価格を払わされることはありません。(まけてくれることはあるかも知れませんが。)
料金がわかっている(=消費者に相場観がある)ので安心です。
でも、外国で日本人旅行客がタクシーに乗るとき、そういう運賃表示がない(あるいは隠している)タクシーがあり、高い運賃をぼったくられるので気をつけないといけません。
 
この場合、料金が開示されてない(=相場がない)から、運転手が有利になります。
 
また、外国で乗るタクシーは、日本人にとって「いくらかかるのか」がよく分かりません。
日本人にとって相場感覚が無いので、たとえ乗った時の運賃表示が明瞭だったとしても、事前に「A地点からB地点まで乗るのにいくらかかるか分からない」ということが起きます。これでは財布にいくら入れておけばいいか分かりません。
 

このように、相場が無い、相場感覚が無い客は生産者側、サービス提供者側の言いなりになります。
逆に相場があると生産者側はごまかしが効かなくなったり、自分の言い値で価格をつけることが難しくなります。なので既得権益者は相場が作られるのを恐れます。

 

未成熟の業界は相場が無い

相場が無い世界は、「まだ成熟していない、発展途上の世界」です。
市場が成熟していくにつれ、価格がはっきり決まっていきます。
 

一般的に価格が開示されてない(一般庶民に相場が認識されていない)ものの例としては

1. 違法なもの(麻薬とかドラッグ、拳銃)
2. レアなもの(有名画家の絵画)
3. 消費者と生産者のパワーバランスが公平でないもの(葬式代)
4. まだ価格付けがされていないほど新しいもの(リニアモーターカーの運賃)
5. 価格をつけるのが難しいもの(世界一周旅行の料金)
 

などがあります。
 
このように、相場が決まってないのはどれもまだ成熟していない(または成熟してはいけない)ものばかりです。
消費者にとって、ぼったくられる可能性が大きいのもこういう分野です。
 
Web制作料金でいうと、現状は上記の4、5あたりだと思いますが、これらは時代が進むにつれ必ず適正な料金に近づいていくと僕は思っています。
いつまでも「価格なんて決められないだろ」と思考停止したり「相場を決めたくない」と既得権益を守るのではなくて、消費者とっても喜ばれるように「相場を形成する」流れに従った方が業界の発展にはいいと思います。
 
どの業界でも、消費者が満足してくれないと発展しません。
「価格が分からない」「ぼったくられ感がある」と不安になるような売買ではなく、消費者がもっと安心して買えるような世界になればいいなと思います。
 
 
では、Web業界で生きている制作者はどうするか? 自分の報酬が下がるのを指をくわえて見ているままで良いのか?
 
そんなことはありません。
「価格がついていない新しい技術を身につける」のがいいと思います!\(^o^)/
 
 

1/18追記

「前提の捉え方が人によって違うのだから見積額が違ってきて当然」
「スキルの低い人、勉強中の人が見積もるのだから見積額が違ってきて当然」
という意見をいただいています。
確かにそうです。なので「この勉強会をもって”相場が無い”とは言えないでしょ」という話になります。
 
すいません、説明が下手で間違って捉えられてしまっているんだと思いますが、そのポイントでの話をしているのではないのです。
 
例えば、「電車の初乗り運賃はいくらですか?」という質問をしたとします。
実際に実験したわけではありませんが、誰に聞いてもだいたい100円〜200円くらいの幅で回答してくると思います。
僕はこれが相場だと思っています。
 
回答前に「JRなのか私鉄なのか前提を明らかにしてよ」と言ってくる人もいるかも知れません。
「東京の話なの? 地方の話なの?」と言ってくる人もいるかも知れません。
でも、それは問題ではありません。前提がどうであれ、たぶん100円〜200円の幅に収まります。
そこで1000円とか10000円と回答する人はいないと思います。
 
Webサイトの制作価格は、前提によって価格が大きく変わってきます。
念のためですが、あくまで一般的なWebサイトの価格の話をしています。
・「コンテンツ量がとても多いサイト」
・「高トラフィックに耐える必要があるサイト」
・「特殊な要件が入っているサイト」
などの話は別です。それはクルマの例えで言うと普及車ではなく、スーパーカーやバスの話になります。
僕は、今回の勉強会の歯医者さんの架空案件は「普及車」にあたる一般的なWebサイトだと思っています。
(これも人によって捉え方が違うかも知れませんが)
 
なので「前提がはっきりしないと価格が出ない」という声が上がる時点で「その世界には相場が無い」と思います。
 
 
もう一つ、wordbench.orgのサイトのコメントに書きましたが、缶ジュースの価格の話です。
「缶ジュースの価格はいくらですか?」という質問をすると、「120円」と回答する人が多いと思います。
僕らは、それを街中の自動販売機で買える価格を想定して回答します。
富士山の山頂やスキー場で売っている価格で回答する人は稀だと思います。
知らず知らずのうちに、共通の前提条件がみなさんの頭の中に作られています。
なので前提条件をいちいち確認しなくても回答できます。
どんなスキルの人に聞いてもだいたい前提条件は同じになるだろうと思います。
 
Webサイトの制作価格は、人によって思い浮かべる前提がぜんぜん違うので、価格が大きく変わってきます。
前提が無いと答えられないから、「その世界には相場が無い」と感じました。
 

6月
2013
15

WordPressの次期バージョン3.6を一挙レビュー!「コンテンツ編集」を強化した新しいWordPressを見よ!

6/15に開催されたWordCamp神戸2013
“What’s new! TwentyThirteen + WordPress3.6″というお題で発表してきました。
 
2013/6/15時点でのWordPressの最新バージョンは3.5.1であり、次期バージョンは3.6になります。
次期バージョン3.6はリリースが遅れていて、まだリリースされていません。
現在どこまで開発が進んでいるかは、Make WordPress CoreのサイトのTracで見ることができます。
 
現時点では開発途中の3.6beta3までは入手することができますので、これをもとに次期リリース版3.6を先取りしてみました。
 
 
Version3.6では以下の機能が搭載されます。
1. 新テーマ(外観)の登場。

 新デフォルトテーマTwentyThirteenにより、見た目が変わります。
2. 改訂履歴機能が強化されます。(リビジョン比較)

 → 誰が修正したのかが分かります。記事の比較もできます。
3. 自動保存機能 (AutoSave)

 → インターネット回線が途切れても大丈夫!
4. 投稿ロック (PostLocking)

 → 自分が編集するときに、他の編集者に編集させないようにできます。
5. メニュー機能の使い勝手改善
6. 投稿フォーマットの刷新 (をする予定だった)

 → 投稿画面に投稿フォーマットのボタンが設けられました。
 
 
 
詳しくは当日発表したスライドにて解説しています。

 
 
 
セッション中に使用した動画がありますので、あわせて公開します。

自動保存機能(AutoSave)


 

改訂履歴機能(リビジョン比較)


 

投稿ロック(PostLocking)


 

カスタムメニュー


 
 
 
このWordCampでのセッションについて、聴講してくれたのは30名〜40名と言ったところでしょうか。
有料イベントだったからしょうもないセッションにはできないし、会場もきれいだったし参加者の姿勢も真剣だったので、人数が少ない割には緊張しました。
個人的にはエバンジェリスト直子さんがいらっしゃったので、これは緊張しますよ。今回たまたま新機能について発表するだけの立場の人の話をその道のスペシャリストが聴いているなんて!
お茶の間でサッカーを見てるだけの1サポーターがたまたま「今の日本代表の課題と展望」というテーマで村の公民館で話しているところに、なぜかザック監督がまぎれこんでいる状況ですよ。
顔文字で表現するとこれですわ。→ Σ(´∀`;)
 
参加人数が少ないのはある程度予想はしていました。同じ時間帯に大串さん、宮内さんのウェブディレクターのためのWordPressサイト運用事例のセッションがあり、やはりこちらの方に大勢の人が流れ込んだみたいです。
最新版の機能が気になるってのは少数派で、ほとんどの多くのWordPressユーザーはそんなのはあまり気にせず使ってますよね。
僕も(こんなことを言ってしまえば元も子もないですが)、実はWordPressの最新版にはあまり興味はなく自分のブログは古いバージョンのものを使っています。
バージョンアップめんどくさいし。
でも3.6のセッションの担当をWordCamp運営の方からお願いされたので、これもいい機会と思って新機能を勉強しました。
今まで見ることもなかったWordPressの開発者ブログを読んだり、開発者のtwitterを眺めたり、ソースを解析したり、3.6で開発対象になっているタスク(チケット)を漁ったり、新機能について言及している英語のブログを探したりしました。
おかげさまで3.6の新機能についてはかなり知識を蓄えられたかと思いますw。
自分としては、あまり得意ではない分野のスピーチでしたのでかなり準備に時間がかかりましたが、いい経験をさせてもらえたと思います。
「聴講する人ではなく、前でスピーチする人がいちばん勉強になる」というのは真理ですね。WordPressのコアや新機能についてもこれからはもっと興味を持って接することができそうです。
しかし、今回得た知識や作ったスライドが、3.6がリリースされてその次の3.7が出る頃には古くなっちゃう(ライフタイムが短い)ので残念ではありますが…w
 

5月
2013
5

WordPressの常識をくつがえす超簡単テーマ”doshirouto”を作ったよ! 初心者はこれでテーマを理解しよう!

注:この記事は古いです。この1年後に、新テーマ”doshirouto2014″を公開しています。詳しくはこちらを御覧ください。
入門者に最適な、簡単すぎるWordPressテーマ”doshirouto2014″を作ったので配布します! 初心者はこれでテーマを理解しよう!
 
 
5/6に行われたWordBench神戸にて、
「WordPressの常識をくつがえす超簡単テーマ”doshirouto”を作ったのでこれでテーマを理解しよう!」
というタイトルで発表しました。
そのときのスライドを公開します。
あわせて、この発表のために作った入門者向け簡単WordPressテーマ”doshirouto”を公開します。
 
 

初心者向けWordPressテーマdoshiroutoとは

WordPressの次期バージョン3.6に同梱されているTwentyThirteenテーマをベースにして、初心者にも理解しやすいように改造した入門用テーマです。
こんな人の利用を想定しています。
・WordPressのテーマのしくみを理解したい。
・WordPressのテーマを作ったことがないけど、作れるようになりたい。
・WordPressのテーマって、難しいから今まで手をつけられなかった。
 
 

なぜこのテーマを作ったか?

WordPressのリリースのペースは早く、その度にどんどん高機能化されています。
機能が増えて便利になっていくのは良いのですが、その分、初めて触れるユーザにとっての参入のハードルが上がってきています。
デフォルトテーマのTwentyThirteenは、レスポンシブな見た目やWebフォント、あらゆるメディアの投稿形式に対応していたりと機能がもりだくさんなのですが、それに比例してファイルの数が多くなっています。数えてみると59もありました。
もはや初心者は一朝一夕でテーマの仕組みを理解するのが難しくなってきています。
これではWordPressが「なにやら難しくて扱いにくいツール」と初心者に映ってしまい、敬遠されてしまうのではないかと思いました。
実際、僕が直接お会いした初心者から、「WordPressの複雑なテーマの構造の理解に苦しんでおり、カスタマイズができない」といった声を多く聞いています。
確かに、テーマファイルを開くと意味の分からない記号の羅列で、いったいどこに手を付けて良いか分かりませんね…
このままではWordPressの魅力が初心者になかなか理解されないのではないかと思いました。そこでできるだけ簡素にしたテーマを作って、それで「WordPressはここまで簡単になるんだよ」というのを知ってもらいたいと思いました。
 
 

doshiroutoの特徴

・日本語しか対応していません。
・古いバージョンのIEは対応していません(IE9以降はOK)。
・SEO最適化はされていません。
・カスタムヘッダーやWebフォントなどの新しい機能には対応していません。
・(まだリリースされていませんが)WordPress Version3.6以降で使用することを前提にしています。
・テーマを構成するファイルを極限まで減らしたので、使用者の心理的負担が軽減されていると思います。
・テーマファイル内に日本語のコメントをたくさん挿入したので、ファイルの中身を読むだけで理解ができるようにしました。
 
 

使用上の注意

・あくまで初心者用の簡易テーマですので、本格的なサイトには向かないと思います。
・このテーマには足りない機能がいっぱいありますので、足りないと思った時はデフォルトテーマを使用していただくか、自分で機能拡張してください。
 
では、よいWordPressライフを!
 
doshiroutoのダウンロードはこちらから!
 
 

5月
2013
2

’13食博覧会・大阪(2013)のおすすめや見どころや楽しみ方を、先日行ってきた私が紹介します。

2013年のゴールデンウィーク中にインテックス大阪で開催されている’13食博覧会に行って来ました。
事前に公式ホームページなどを見て、出店情報とかイベントとか調べたつもりでしたが、あまり情報が無い感じでしたので、実際に参加した自分の観点でおすすめや見どころ情報を残しておこうと思います。
食博覧会は5/6まで開催されていますので、何かの参考になればと思います。
 
僕は5/2(木)の朝10時のOPENをちょっと過ぎた時刻に入場しました。
平日とはいえ、けっこう混んでいました。休日だったらもっと混むんだろうな…
 
201305021956.jpg
 
 
以下、それぞれの会場の雰囲気をお伝えします。
続きを読む

12月
2012
12

就職活動サイトの構築にFuelPHPを使ったので事例紹介

こんにちは。FuelPHP Advent Calendar 2012に参加します上村と言います。
 
Advent Calendarの前日記事は@yamamoto_manabuさんでした。
FuelPHP + eXcale | No Regret No Life
eXcaleという国産PaaSサービス上でFuelPHPを動かす方法を紹介しています。eXcaleは今なら無料だそうですよ!これはいいですね。
 
さて、私は就職活動に関するマッチングサイトOfferBoxを開発しており、そのシステムでFuelPHPを利用しています。
ここではその事例紹介と、ログイン周辺の実装についてご紹介します。
 
 

OfferBoxの紹介

OfferBoxという、就職活動マッチングサイトをFuelPHPで構築し、2012年9月から運用しています。
非会員用の紹介サイトはWordPressで作り、会員専用画面をFuelPHPで作っています。
ログイン画面はこちらです。
https://offerbox.jp/offerbox/slogin
 
開発の流れ
2012/7 開発着手
2012/9 α版リリース
2012/12 β版リリース
 
開発規模
さくらVPS 4G
Apache + MySQL + PHP
FuelPHP V1.2.1
 
MySQL Table数:13
Controller数: 26
View数: 87
 
このOffeBoxというサイトでは、企業が自分のニーズに合った新卒の採用人材を検索し、適合する人材にコンタクトをとることができます。
学生とのコミュニケーションを図れるSNSのような機能を持っており、企業が学生に対してお気に入りをつけたりメッセージを送受信することができます。
気に入った学生が見つかれば、オファーをして面接の段取りを進めることができます。
 
Untitled.png
 
 

2種類のログイン画面。その実装方法

このシステムは学生と企業の双方が使うシステムであり、それぞれログインが必要ですので、学生用のログインと企業用のログインを別々に用意しています。
FuelPHPではログイン処理を作る際のひな形としてSimpleAuthがあり、その枠組みを利用するとログイン機能を1から作らなくても済みます。
SimpleAuthを使ったログイン機能の実装の事例は、いくつか紹介されています。
 
FuelPHPで簡単認証システム | WinRoad徒然草
FuelPHPでログイン機能をサクっと実装 – BTT’s blog
[FuelPHP] FuelPHPで作るログイン管理 | 9ensanのLifeHack

 
しかし、複数のログイン機能を持ったサイト事例は無いみたいで、いろいろ探したのですが見つかりませんでした。
そのような状況で手探りで実装し、分からないことがいっぱいでしたが、なんとか作れましたのでご紹介します。
 
 

auth使用の宣言

fuel/app/config/config.php
に定義します。

'packages'  => array(
	'auth'
),

 
fuel/packages/auth/config/auth.php

fuel/app/config/
の下にコピーし、以下のように書きます。StudentAuth(学生ログイン用)とCompanyAuth(企業ログイン用)の2つのドライバを登録します。

return array(
	'driver' => array('StudentAuth', 'CompanyAuth'),
	'verify_multiple_logins' => false,
	'salt' => '(適当な文字列)'
);

 
 

ログイン用テーブルの作成

fuel/packages/auth/config/simpleauth.php
をコピーして、
fuel/packages/config/studentauth.php
にrenameし、以下のように書きます。

	'table_name' => 'student',

これはテーブル名の定義ですが、’users’となっていたテーブル名を’student’という名前に変えてます。
 
同様に、
fuel/packages/config/companyauth.php
を作成し、以下のように書きます。

	'table_name' => 'company',

こちらは企業ログイン用のテーブルです。
 
MySQLテーブルは、本家SimpleAuthのマニュアルに載っている
SQL文を使います。テーブル名はstudentとcompanyで作ります。

CREATE TABLE IF NOT EXISTS `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `group` int(11) NOT NULL DEFAULT '1',
  `email` varchar(255) NOT NULL,
  `last_login` varchar(25) NOT NULL,
  `login_hash` varchar(255) NOT NULL,
  `profile_fields` text NOT NULL,
  `created` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`,`email`)
);
CREATE TABLE IF NOT EXISTS `company` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `group` int(11) NOT NULL DEFAULT '1',
  `email` varchar(255) NOT NULL,
  `last_login` varchar(25) NOT NULL,
  `login_hash` varchar(255) NOT NULL,
  `profile_fields` text NOT NULL,
  `created` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`,`email`)
)

 
 

認証ロジックの作成

認証のためのロジックはfuel/packeges/の下に置くことになります。
このディレクトリはFuelPHPパッケージコアに含まれる部分なので、ここに手を入れるとFuelPHPコアとユーザ開発ロジックが分離できなくなるし、バージョンアップ時にも気を遣うので、僕はこのディレクトリはあまり触りたくないのですが、まぁでもここを触るしか方法が無いのでしょうがないですね。
 
fuel/packages/auth/bootstrap.phpは以下のようにします。
StudentAuthとCompanyAuth関連の定義を追加しています。

Autoloader::add_classes(array(
	'Auth\\Auth'           => __DIR__.'/classes/auth.php',
	'Auth\\AuthException'  => __DIR__.'/classes/auth.php',

	'Auth\\Auth_Driver'  => __DIR__.'/classes/auth/driver.php',

	'Auth\\Auth_Acl_Driver'     => __DIR__.'/classes/auth/acl/driver.php',
	'Auth\\Auth_Acl_SimpleAcl'  => __DIR__.'/classes/auth/acl/simpleacl.php',
	'Auth\\Auth_Acl_StudentAcl'  => __DIR__.'/classes/auth/acl/studentacl.php',
	'Auth\\Auth_Acl_CompanyAcl'  => __DIR__.'/classes/auth/acl/companyacl.php',

	'Auth\\Auth_Group_Driver'       => __DIR__.'/classes/auth/group/driver.php',
	'Auth\\Auth_Group_SimpleGroup'  => __DIR__.'/classes/auth/group/simplegroup.php',
	'Auth\\Auth_Group_StudentGroup'  => __DIR__.'/classes/auth/group/studentgroup.php',
	'Auth\\Auth_Group_CompanyGroup'  => __DIR__.'/classes/auth/group/companygroup.php',

	'Auth\\Auth_Login_Driver'          => __DIR__.'/classes/auth/login/driver.php',
	'Auth\\Auth_Login_SimpleAuth'      => __DIR__.'/classes/auth/login/simpleauth.php',
	'Auth\\SimpleUserUpdateException'  => __DIR__.'/classes/auth/login/simpleauth.php',
	'Auth\\SimpleUserWrongPassword'    => __DIR__.'/classes/auth/login/simpleauth.php',

	'Auth\\Auth_Login_StudentAuth'      => __DIR__.'/classes/auth/login/studentauth.php',
	'Auth\\StudentUserUpdateException'  => __DIR__.'/classes/auth/login/studentauth.php',
	'Auth\\StudentUserWrongPassword'    => __DIR__.'/classes/auth/login/studentauth.php',
	'Auth\\Auth_Login_CompanyAuth'      => __DIR__.'/classes/auth/login/companyauth.php',
	'Auth\\CompanyUserUpdateException'  => __DIR__.'/classes/auth/login/companyauth.php',
	'Auth\\CompanyUserWrongPassword'    => __DIR__.'/classes/auth/login/companyauth.php',
));

 
authパッケージには、ディレクトリはacl、group、loginの3種類あります。
aclとgroupのディレクトリは今回の要件には使わないので、必要なloginディレクトリの部分だけ拡張すれば良いと思っていましたが、acl、groupも同じように作らないとうまく機能しませんでした。
ということで以下のファイルを新規作成することになります。
 
121211-0002.png
 
 

学生ログインロジックの作成

studentauth.phpを作ります。simpleauth.phpをコピーしたものをベースに、そこから修正していきます。
・ simpleauth.phpの中で、”Simple”や”simple”となっているところをかたっぱしから”Student”、”student”に置換します。
 クラス名、設定名などあらゆるもの。
 大文字、小文字にも気をつけて変換するようにします。
・Session変数は学生用と企業用で名前が重複しないように考慮する必要があります。
 例:
 \Session::set(‘username’, $this->user['username']);
 の場合は
 \Session::set(‘studentusername’, $this->user['username']);
 のようにします。
studentgroup.phpを作ります。simplegroup.phpをコピーしたものをベースに、そこから同じように文字列置換します。
studentacl.phpを作ります。simpleacl.phpをコピーしたものをベースに、同じように文字列置換します。
 
 

企業ログインロジックの作成

companyauth.phpを作ります。simpleauth.phpをコピーしたものをベースに、そこから修正していきます。
・simpleauth.phpの中で、”Simple”や”simple”となっているところをかたっぱしから”Company”、”company”に置換する。
companygroup.phpを作ります。simplegroup.phpをコピーしたものをベースにします。
companyacl.phpを作ります。simpleacl.phpをコピーしたものをベースにします。
 
 

ログイン制御(Contoller)と画面(View)を作る

学生ログイン画面を作っていきます。
 
 

Controllerの作成

fuel/app/class/controller/studentlogin.php

public function action_login()
{
    $data = array();

    // submitボタンによるPOST時
    if (Input::post())
    {
        // Authオブジェクトを取得します。引数でStudentAuthを指定します。
        $auth = Auth::instance('StudentAuth');

        if ($auth->login())
        {
            // 認証OKならログイン後のページへリダイレクトします。
            Response::redirect('studentindex');
        }
        else
        {
            // ログイン失敗時の処理
            $data['username']    = Input::post('username');
            $data['login_error'] = 'Wrong username/password combo. Try again';
        }
    }

    // 学生ログインページの表示
    echo View::forge('studentlogin',$data);
}

 

Viewの作成

fuel/app/views/studentlogin.php

<?php echo Form::open( '/studentlogin/login'); ?>
ユーザ名<?php echo Form::input('username',  Input::post('username') ) ?>
パスワード	<?php echo Form::password('password',  Input::post('password') ) ?>
<?php echo Form::submit('submit', 'ログイン',); ?>
<?php echo Form::close(); ?>

 
121212-0004.png
 
企業ログインは、companylogin.phpとします。上記ソースコードの’student’の部分がcompnayになるだけです。
 
 

ユーザ登録

ユーザ登録のメソッドをstudentlogin.phpに書きます。

Controller

fuel/app/class/controller/studentlogin.php

public function action_add_user()
{
	if (Input::post())
	{
		$username=Input::post('username');
              $password=Input::post('password');
              $email=Input::post('email');

              // Authオブジェクトを取得します。引数でStudentAuthを指定します。
		$auth = Auth::instance('StudentAuth');
		// ユーザ作成
		$auth->create_user($username,$password,$email);
 	}
	// 登録フォームの表示
	echo View::forge('studentadduser_user');
}

 
企業ユーザ登録も同様に、companylogin.phpに同じメソッドを作ります。上記ソースコードの’student’の部分をがcompnayになるだけです。
 

View

fuel/app/views/studentadduser.php

<?php echo Form::open( '/studentlogin/add_user'); ?>
ユーザ名<?php echo Form::input('username',  Input::post('username') ) ?>
パスワード	<?php echo Form::password('password',  Input::post('password') ) ?>
Email<?php echo Form::input('email',  Input::post('email') ) ?>
<?php echo Form::submit('submit', '登録') ?>
<?php echo Form::close(); ?>

企業ユーザ用View(companyadduser.php)も同様です。studentの部分をcompanyに置換します。
 
121212-0003.png
 
 

ログアウト

学生ログアウトのメソッドをstudentlogin.phpに書きます。

Controller

fuel/app/class/controller/studentlogin.php

public function action_logout()
{
	//ログアウト
	Auth::logout();
	//ログアウト画面の表示
	echo View::forge('studentlogout');
}

企業ログアウトはcompnaylogin.phpに書きます。
 
Viewはこちら
fuel/app/views/studentlogout.php

ログアウトしました
<a href="/studentlogin">ログイン</a>

企業ユーザも同様です。studentの部分をcompanyにします。
 
121212-0005.png
 
 

ログイン後の画面

ログイン後の画面とは、ログインに成功したら表示する最初の画面のことです。
ログイン中の状態の場合のみ表示が許される画面ですので、認証が成功しているかどうかをControllerでチェックする必要があります。
企業ユーザでログイン中にもかかわらず、学生用の画面を開いた場合は、誤動作を防ぐために企業側のログアウト処理をするようにしています。
実際のユースケースでは企業と学生の両方のアカウントを持つ人はいないのですが、開発の現場ではテスト時にそういう使い方もするので、一応その考慮を入れています。

fuel/app/class/controller/studentlogin.php

// 事前処理
public function before()
{
	$this->auth	= Auth::instance('StudentAuth');
	// ここで、企業ログイン中であればログアウトする。
	if( Session::get('companyusername') ){
		Auth::logout();
	}

	// ログインチェック
	if( !$this->auth->check('StudentAuth') ){
		// 認証に失敗したらログイン画面にジャンプ
		Response::redirect('/studentlogin');
	}
}

// ログイン後トップ画面
public function action_index()
{
	// ログイン後トップ画面の表示
	echo View::forge('studentindex');
}

企業用も同様です。studentの部分をcompanyにします。companyの部分はstudentにします。
 
 

さいごに

このように、1つのサイトで複数のログイン機能を実装する場合は、SimpleAuthを単にコピーして”Simple”の部分の文字列を置換するだけではダメです。
追加作業として
・セッションの名前が重複しないようにする。
・学生と企業の同時多重ログインをしないようにする。
などの考慮が必要になります。
実際の製作段階では、単純に2つのAuthを作っただけではうまくいかず、うまくログアウトされなかったり、無限ループに陥ったりしていろいろ苦労しました。
結局、SImpleAuth認証のロジック内を細かく精査して、不具合の原因となる部分を潰していったので、SimpleAuthを参考にしたと言っても全然Simpleにはいかなったです。
このノウハウが参考になれば幸いです。
 
 
次は@NEKOGET「FuelPHPドキュメント翻訳へのお誘い」です。日本語化の方々お疲れ様です。いつもありがたく使わせていただいております!

9月
2012
6

神戸ITフロンティアセミナーに行ってきました

神戸のポートアイランドで開催された、神戸ITフロンティアセミナーに行ってきたので聞いたことをメモします。
 
僕がよく行くIT系の勉強会とは違って、平日ですし商工会議所主催ということもあって、来場者の年齢層が高めでした。
講演内容も、専門的な内容ではなく、入門的な感じでした。
 
120906-0001.png
 
 
200人くらい入れそうな神戸商工会議所のホール
IMG_1563.JPG 

 

ITで拓かれる未来 Google及川卓也さん

 
言葉が次から次へと淀みなく出てくる講演はさすがだなと思いました。
きっと経験に裏打ちされた、ものすごく豊富な知識があるんだと思います。
 
IMG_1565.JPG 
 
 
・及川さんはIT業界20数年のキャリア
・ウェブブラウザ ChromeとかGoogle日本語入力を作っている。
 
講演は
・ソーシャル
・ビッグデータ
・スマートデバイス
の3つのキーワードのお話。
 

ソーシャルについて

・Google検索は、検索結果に自分の知り合いがソーシャルでお勧めしたもの分かるようになっている。
 検索結果に、ソーシャルな価値判断が加わっている。
・Socialの本質は「人と人とのつながり」でありこれをSocial Graphと言う。
・ロケーションサービスとは、自分がいる周辺で起こっているイベントやつぶやきを知ることが出来るサービス。
 → 災害時などでは有効。
 

スマートデバイスについて

・スマートデバイスとは、単に性能が良ければいいわけではなくて、人間の五感を補助する役割が備わって
 初めて「スマートデバイス」と言う。そういう意味で体の一部となるもの。
・自分のスマートフォンを他人に使われるのを躊躇するのは、スマートフォンが自分の体の一部、脳の拡張であるため。
・昔、1970年にCRAY-1というスーパーコンピュータがあったが、
 今のスマートフォンはその10倍に相当するスペックを持っている。
・Google検索は、通勤途中に携帯をいじっている人が使っていると思っていたら、違った。
 夜テレビを見ているときに、分からない言葉を調べるために検索が良く使われることが分かった。
 だとしたら、テレビ自体に直接検索できるような機能を持つことが望ましい。
・テレビはスマートデバイスになるか?
 テレビは家族が使うものなので、テレビをスマートデバイスにするつもりならば、家族共同で使う
 ことを前提にするべき。なので必要とされるアプリもスマートフォンと違ってくるはず。
 

Big Dataについて

・Google検索の「もしかして」の機能はビッグデータを利用している。
・間違ってひらがなモードで「ごおgぇ」で検索しても、「google」の検索結果が出る。
 これは「ごおgぇ」で間違えて検索してしまった人が、次に「google」で検索しているという
 統計データがあるため。それを利用している。
・昔の音声認識の技術では、使う前にまず自分の音声を学習(エンロールメント)させる必要があった。
 これにより、自分の声の特徴を記憶させる。
 → 今はそんなことはしなくても良くなっている。
  それは、現代はいろんな癖のある人の声のデータベースをたくさん持っているから。
・ビッグデータを解析するためのツール → MapReduce, Hadoop
・Map=広げる、Reduce=減らす。つまり、たくさんのデータをMapのように広げて、それを多くの
 コンピュータに処理させる。そしてそれを解析して統計データとして抽出する(Reduce)
・Google日本語入力
 IMEの開発においては、通常、辞書を掲載する人が要る。
 しかしGoogleの中にはそういう役割をする人がいない。
 Webで公開されているデータをすべて集めて、単語を取り出して、辞書を自動生成しているから。
 Google日本語入力を出せたのも、ビッグデータの恩恵による。
・位置情報サービスについて
 自分のいる位置の周辺情報が探せるのは便利だが、自分の個人情報が知らないところで
 活用されているという不安要素もある。
 しかし、セキュリティに関して考慮しているサービスは、個人情報を必要以上に取得しようとしない。
 なぜならば、個人情報は持てば持つほど情報漏えいなどのリスクが高まるから。
 Gooleに関しては、個人が特定できないような匿名性を保った上でデータを集めている。
 
・2005半ば以降、ポピュラーになったアプリはブラウザで行うWebアプリが多い。
 それまではパソコン上で動作するネイティブなアプリケーションが中心だった。
 
・Windows95の時代
 .txtの拡張子をダブルクリックするとメモ帳が開く。これはファイルがアプリに関連付けられているから。
 しかしスマートフォンはどうか? 写真を編集するにもユーザがアプリを選ばないといけない。
 そういう意味で、スマートフォンになって利便性が低下しているところもある。
 そこを便利にしていくことが課題。
 
・ブラウザ
 現代のブラウザはもはや「インターネット閲覧ソフト」ではない
 クラウドアプリケーションである。
 ChromeはBlueToothで通信して、クラウドを介さない通信も可能になってきている。
 例えば、ChromeでBluetoothを使って、模型の動きを制御するとか。
 
・Openな開発、Closedな開発
 どちらが優れているかどうかは決められない。
 しかし、Closedで成功するのはOpenよりもより難しいのではないか。
 プロダクトは、考えもしなかった使い方をユーザが生み出すことによって生まれることが多くなっている。
 それがOpenの利点。
 Googleマップの初期は、マップの機能だけだったが、そのうち(利用規約違反なのに)
 ユーザによるカスタマイズが行われ、グルメマップ、駐車場マップとして使われた。
 Googleとしては想定外の使われ方をされた。
 → 方針転換してGoogleはそれを認め、APIを公開するようになった。
 
・リーンスタートアップ
 「大まかな合意と、動くプログラム」
 Rough consensus and Runnning
 100%完成させなくても、とにかく動くものを。
 TCP/IPなど通信のプロトコルは、実は簡単なものの積み重ね。
 
 
 

NFC(近距離無線通信)で空前の好景気 ブリリアントサービス杉本礼彦さん

 
個人的には、知らないことが多かったので非常に参考になりました。
NFCはこれから流行りますかね!?とても楽しみな技術です。
 
 
・NFC=Near Field Communicationの略
 
NFCLABの紹介
 会員数 317名
 神奈川の六角橋の商店街と、NFCLABのイベントをやることを検討中。
 
・ブリリアントサービスでは、植物工場を作っている。
 Andoroid端末で植物工場の明るさなどを制御する。
 赤色の赤外線を多くすると→レタスが大きく、生育が速い、甘い。
 青色の赤外線を多くすると→レタスが小さく、硬くなる。苦い。
 → これを応用すると、生育環境が自在に操作できるので、例えば九条ねぎがどこでも作れるようになる。
 
・レグザとアクオスの違いを小学生は理解できない。
 iPhoneとAndroidの違いを小学生は理解できない。
 → それはハードの能力の違いであり、「何ができるか」に直接訴求できるものではないから。
 → それを、上記の植物工場のように○○が育てられる、という付加価値を付けたい。
   それにはソフトウェアの技術が必要。
 
・合コンのシステム
 参加している男女がそれぞれ一箇所にかたまらないように平準化させるため、スタッフが目視で
 合コン中の男女分布をみてシャッフルしたりしていた。
 しかし、NFCがあれば、各参加者に手首にタグをつけてもらうことで、誰がどこにいるか分かる。
 サーバーで集中管理することにより、どこに女性が固まっているかなどの分布が分かる。
 
・Androidの増え方
 一日 100万アクティベーションされている
 そのうち、NFCを搭載しているのは週に100万台。
 今のiPhoneにはNFCは搭載されてないが、iPhone5に搭載されるかも?
 
・NFCの種類
 - カードエミュレーションモード
  Suicaのように、端末側に電池はいらない。
  これは電磁誘導を使って、電力を端末側に送っているため。
  このように電波を使って電気を供給しているので、改札の通過に少し時間がかかる。
 
 - リーダー/ライターモード
  スマートフォンに搭載されているモード。端末の方から電波を出すことが出来る。
  読み書き可能。
 
 - P2Pモード
  機器間通信
  SNEPというプロトコル仕様
  スマートフォン同士で通信できる。しかし用途はスマートフォン同士だけに限定されない。
  NFCにおける標準プロトコルはSNEPになると考えられる
 
・NFCは電子マネーのことだと思っている人が多いがそれだけではない。
 サンフランシスコのクリッパーカードというのがある。
 Badgeinというサービスでは、
 このクリッパーカードに勝手にカレークーポンのデータを埋め込む付加価値をつけている。
 そのことで、カードはカレークーポンの役割を果たせるようになる。
 このように、暗号化領域でない場所に独自にデータを置くことができる。アイデア次第で使い方はもっと広がる
 
・将来、貨幣と同じくらいにNFCの重要性が高まるかも知れない。
 ・NFCを搭載したAndroidが普及している。
 ・NFCをユーザが扱うとき、昔より簡単に使えるようになってきているので、普及しやすい。
 ・だが、それを利用したサービスがあまり出てこない。
 →この条件は、Windows95の黎明期と同じ。プラットフォームはあるが、
  それを利用するサービスがあまり無かった時代。
  NFCのサービスが普及すれば、大きなビジネスになるのではないか?
  空前の好景気が来るのではないか?
 
 
 

あなたにもできるモバイルアプリ開発ツールAppExeのご紹介 Mobilous 宮田明さん

 
技術者でなくても簡単にモバイルアプリを開発できるツールAppExeをご紹介いただきました。
 
・モバイルデバイスはiOSやAndroidなどのがプラットフォームが複数あり、
 共通のプラットフォームを作るのが難しい。
・そこでモバイル用アプリケーション(Webアプリケーション)を簡単に作るためのツールAPPexeの紹介
・業務システムを短い工数で作ることが出来る。
・ソフトウェアの知識が無くてもアプリが作れる

8月
2012
5

オープンソースカンファレンス 2012Kyoto に行ってきました

オープンソースカンファレンス 2012 Kansai/Kyotoに行ってきました。
2日間の開催でしたが、僕は2日目の8/4(土)だけ行きました。
僕が出席したセッションのまとめを残しておきます。
 
IMG_1466.JPG
 
 

インフラエンジニアなら知っておきたいストレージのはなし

スピーカー:島崎さん
 
自宅SAN友の会とは:
自宅にSANの検証環境を作りたいひとのコミュニティ
 
SANの話とか、SANディスクに構成するRAIDの話です。
民生用のパソコンではあまり触れることが無いですが、業務用のサーバーですとディスクにSAN装置が採用されるケースがあります。
 
会場内アンケート。全体で50人くらい。
・自宅にSAN環境がある方 → 1人
・仕事で使っている → 5人くらい
 
ライブマイグレーションとは:
 VMを稼働させたまま、別のハードウェアに移動する技術。
 → ハード故障のときも、別のハードウェアに仮想マシンを移動することにより業務を止めずに運用できる。
 
LUN: LogicalUnitNumber 論理ボリュームのこと
[参考]LUNとは【Logical Unit Number】(論理ユニット番号)
 
・VMWareはFibreChannelのサポートが厚い。
・いろいろ説明したけど、触ってみないとやっぱりイメージしづらい。
 → 家でやろう!
 
・専用ハードは安いものでも70万くらいする。
 普通は数百万〜数千万 → 買えるかボケ!
 
・ディスクアレイの接続方法:
 iSCSI すぐできるので面白くない。
 FCoE まだ高い。
 FibreChannel 意外に安くできる。
 
やり方としては2択
・Linux+SCST
・Solaris/COMSTAR
安くやれば3万円くらいでできる。
 
一般家庭にSANを導入する人は少数だと思いますが、こういう生き方も、我が道を行くという感じでいいかもですね。
 

jQuery MobileとPhoneGapによるHTML5/JavaScriptで楽々スマフォアプリ開発

スピーカー:おかもとさん
 
jQueeyMobileを使うと、Objective-CやJavaなどでモバイルデバイスのネイティブアプリを作らずにそれなりにモバイルアプリっぽいサイトを作れるので便利です。
僕も自分のフリーソフトウェアで使おうと思っているのですが、まだ実装できていません…
 
モバイルフレームワークのプラットフォームのシェア
jQueryMobile が1位 28.6%
2位は PhoneGap
 
jQueryMoblieの利点
・Webサイトでスマホっぽい動作が実現できる。
・どのモバイルデバイスでもそれなりに動作する。
・divにdata-role 属性をつける。
・スマートフォンぽい、株にボタンを配置することも可能。
・120もの豊富なアイコンが利用可能なIcom-Pack。
・Androidでは、clickイベントの反応は遅いので、vclickを利用したほうが良い。
・加速度センサーを使ったアプリも作れる。
・カメラを使ったアプリも作れる。
・位置情報を使ったアプリも作れる。
・ゲームのような自由なレンダリングを行う画面は無理。
 
jQueryMobileは重い?
・Androidを使う場合は重い場合がある。
重い場合は
・アプリケーションキャッシュを使用する方法
・遅延ロドを利用する方法
・プリフェッチ
などを使うとよい。
 
導入事例: こくちーず、CAPCOMなど
 
PhoneGAPについて
・AppStore,GooglePlayへの登録ができるので、マネタイズも可能。
・プラグインによる拡張可能。
・Webブラウザだけじゃ利用できない機能が利用できる。
・PhoneGAPはWebブラウザでは利用できないところもサポートする。
 
スマートフォンのWebサイトをアプリっぽくしたい場合は、jQueryMobileとかPhoneGAPってかなり使えるなと思いました。
 
 

Linux セキュリティ超入門

スピーカー:杜若さん
 
杜若さんはSUSE Linuxの人
・SUSEはドイツ発祥のLinuxディストリビューション
・パッケージシステムはRPM
・先祖はSlackware
 
会場参加者(約70名)
・CentOS利用者が多い。
・SUSE使っている人は数名。
 
・セキュリティについての話
 SSHでrootに入るのはダメ。設定ファイルを直接編集しなくても、SUSEの管理ツールYaSTでssh設定できる。
 
・サーバーソフトウェアを堅牢なものに
 bind9じゃなくてUnbound、NDSに乗り換える。
 ApacheじゃなくてNginxやLighttpdに乗り換える。
 
・LDAPとは:
 ユーザ管理をデータベース上で行うツール。ユーザ数が多くなるとこっちの方が楽みたいです。
 参考: LDAPとは【Lightweight Directory Access Protocol】
 
セキュリティ対策についてもう少し突っ込んだ話を聞ければよかったのですが、あまり目新しいことを聞けなかったのがちょっと残念でした。
 
 

MyDNS.JPと汎用制御装置GVCであれこれ制御

スピーカー:かぶらぎさん
 
・MyDNS.jpというダイナミックDNSサービスをやっている。
・MyDNS.JPの管理は1人でやっている。
・かぶらぎさんの本業はISPのシステム全般。
・ダイナミックDNSへのIPの更新手段については、POP3とかFTPとかでIP通知を受け取り更新ができる。
・ユーザは個人法人官公庁海外など多岐に渡る。
・DNSのソフトウェアはPowerDNSを使っている。
・ディスクはSSD使ってる。
・日本や香港などの先進国を除く、発展途上のアジアではIPV4が枯渇している。
 いろんな人が競ってIPV4を買いあさっている状態。
・PowerDNSとは?
 SQLエンジンをベースにしたDNSサービス。
 BINDのようにZONEファイルというものがない。
 DNSレコードがDBの中にある。
・MyDNS.jpはオランダ、ロサンゼルス、インド、日本の4箇所で運用している。
・VPSの世界の変化が激しい。
 VPS業者が会社をたたんだりすることは日常茶飯事なので、VPSは無くなることがアタリマエのこととして運用を考えること。
・世界のVPSを分散しても、費用は月々5000円くらいで世界展開が出来る。
・DNSの運用負荷としてはあまり大したこと無い。CPU使用率0%のときが多い。
・DNSのQuery latencyも0.055msであり時間はかかってない。
・汎用制御装置 GVCについて
 Linuxとマイコンボードを使った、いろんな機器への制御を行うための規格を策定中。
 例えば、「外出先から自宅の温度をみてエアコンをONする」「鳥の餌を食べに来るネズミを撃退したい」などを解決するシステム。
 
僕も何年も前から利用させてもらっているダイナミックDNSのMyDNS.jpですが、そのサービスを作っている本人にお会いすることができて光栄でした。
このサービスを1人でされていることにも驚きですが、話もとても面白く、ぐいぐい引きこまれました。
DNSサービスってbindだけじゃなくていろいろあるんですね。他の選択肢をあまり知らなかったので勉強になりました。
 
 

国産baserCMSの基本機能と秘めたポテンシャル

スピーカー:江頭さん
 
江頭さんはbaserCMSのコアデベロッパー
 
・CakePHPで開発している。
・baserCMSとは: WordPressほど高機能じゃないけど、ちょうどいい機能がパッケージされているCMS。
・シンプルをモットーにしている。
・コーポレートサイトにちょうどいい機能がパッケージングされている。
・ブログが複数設置可能。
・スマホ、携帯に標準対応。
・管理画面で必要な機能だけを表示できる。
・MITライセンスなので、自由にカスタマイズ可能。
・日本語完全サポート。
・開発者との距離が近い。
・2009年β版リリース。
・2010年2月 安定版リリース。
・25000ダウンロード達成。
・ヘテムルとロリポップ!の簡単インストール搭載されている。
・高機能なメールフォーム。
・管理メニューは出す項目、出さない項目をカスタマイズできる。D&Dで並び替えもできるから便利。
・日付の選択ボックスが、「平成」など和暦に対応している。
・開発スタッフ12名。
 
印象に残ったのが、
「SIなどの業務システムは、既存の仕組みでは効率が悪いからシステム化することによってコスト削減するという目的がある。なので削減効果が見えやすい。一方Webシステムは、広告宣伝の意味合いが強いので、先行投資に近く効果が見えにくい」ということでした。なるほどそうだなと思いました。
baserCMSは、CakePHPで出来ており、システムを拡張したい時にはフレームワークの流儀にのっとってやれるので、そこは他のCMSより有利な点だと思います。
CMS単体で使うというより、「実現したいシステムを設計する際に、baserCMSをベースに拡張する」という使い方ができそうな気がしています。
 
 

まとめ

OSC京都は2日目だけの参加でしたが、とてもたくさん得るものがありました。
オープンソースソフトウェア界で活躍されてる方と交流し、自分自身とても刺激になります。
自分も何か生み出せるよう、貢献できるよう頑張りたいと改めて思った一日でした。
 

7月
2012
25

高知へ行って来ました(観光編)

ウェブクリエイター高知の勉強会レポートを先日書きましたが、それとは別に観光も楽しんできました。
 
初日、勉強会スタッフの方々とかもん亭へ。
高知グルメを堪能しました。
 
高知といえばカツオのタタキ。900円
IMG_1262.JPG
 
チャンバラ貝。サザエのような味がしました。
IMG_1264.JPG
 
うつぼのタタキ。味は覚えてませんが、癖もなくおいしくいただけました。
IMG_1266.JPG
 
揚げ物盛り合わせ。手前がゴリの唐揚げ、右奥がまんちょうの唐揚げ
まんちょうというのはマンボウの腸だそうです。ちょっとコリっとしておいしかったです。
左の緑色をしたものが、四万十の青のりの唐揚げですが、これが絶品でした。
IMG_1265.JPG
 
 
2日目午前中は、路面電車に乗りました。
僕の地元兵庫では路面電車がなく、高知の路面電車が珍しかったので、意味もなく終点の伊野まで乗ってみました。高知中心部から伊野まで片道45分くらい。
高知の路面電車はレトロな雰囲気で味がありますね。
 
IMG_1287.JPG
 
タブレット交換のシーン初めて見ました。タブレットといってもiPadじゃないですよ。今ではこの方式使っている鉄道ってほとんど無いと思います。
IMG_1315.JPG
 

大きな地図で見る
 
 
伊野で1時間くらい散歩しました。壁に雨よけの瓦(水切瓦)を配置するのがこちらの建築様式だそうです。
IMG_1299.JPG
 
 
ふたたび高知の中心部に戻って、ひろめ市場。この賑わい!
IMG_1405.JPG
 
 
 
翌日(3日目)は夕方まで観光できました。勉強会スタッフの中野さん、入交さん、松本さんがわざわざ案内していただきほんとに恐縮でした。
お陰様で充実の高知観光をすることが出来ました。
 
高知城
196_large.jpg
 
高知城天守閣からの眺め
199_large.jpg
 
カツオのタタキってこうやって作るんですね。燃料はワラです。
206_large.jpg
 
桂浜にて。心なしか高知には顔出し看板が至るところにあります。
こうなったらもう恥を捨てるしかありません。
218_large.jpg
 
 
龍馬さんにも会いに行きました。高知市街から車で30分くらいのところにあります。
IMG_1416.JPG
 

より大きな地図で 2012/7/22 高知3日目 を表示
 
 
高知の地元の方に案内していただいたおかげで、高知の名所を効率良く回ることができました。それでめちゃ親切にしていただき感謝でいっぱいです。
いい思い出ができました。ほんとうにありがとうございました!

7月
2012
24

7/21に高知の勉強会「Webクリエイターズ高知」でお話してきました

7/21にWebクリエイターズ高知
『 選ばれるCMSとその理由 』WordPress × a-blog cms
という勉強会があり、WordPressのお話をしてきました。
4/24に岡山Webクリエイターズでa-blog cmsの山本さんとセッションさせてもらったのをきっかけに、高知の勉強会でもお誘いいただきました。
 
WCK Sessions vol.2 『選ばれるCMSとその理由』WordPress × a-blog cms
WCK Sessions vol.2 レポート – Webクリエイターズ高知
 
 
21_large.jpg 
 
 
 
写真いっぱい撮ってくださり感謝です! カッコよく撮れてるやつはソーシャル用のアイコンにしよかなー。
7_large.jpg
 
会場は「龍馬の生まれたまち記念館」という、博物館を兼ねたホールで、坂本龍馬に関する歴史や文化が展示してあります。勉強会に使ったホールも、木組みの趣きのあるお部屋でした。
近くに坂本龍馬生誕地があります。
 
 
当日の発表資料を公開します。
前半は、WordPressの現状とか他CMSとの比較、後半資料はWordPressの使い方についての発表で、全部で70分+質疑応答10分でやりました。
 
 

 
 

 
 
 
 
関連サイト、ブログ
togetterまとめ
『選ばれるCMSとその理由』WordPress × a-blog cms まとめ – Togetter
杉本さんのブログ
高知県でウェブディレクターの重要性を説くブログ:WCK Sessions vol.2 開催しました!(2012.07.21)

 
 
 
 
併せて高知観光もしてきたのですが、それはまた別エントリで!

6月
2012
30

7/21のウェブクリエイターズ高知のCMSに関する勉強会でWordPressのお話をしてきます

来る7/21(土)に高知で行われる勉強会で、WordPressについてお話させてもらうことになりました。
 
WCK Sessions vol.2 『選ばれるCMSとその理由』WordPress × a-blog cms
 
_system_events_banners_1278_normal_1338869279_wcks2.png
 
 
先日4/23に岡山WEBクリエイターズ「春のCMS徹底比較バトル」にお招きいただきました。
そのときにつながったa-blog cmsの山本さんのコネクションで、今回高知の勉強会に呼んでいただけることになりました。
こんな私が山本さんとまたもや対峙するのは恐れ多いですが、せっかくの機会をいただいたので頑張ってきます!
 
高知は昔鉄道マニア少年だった頃に、青春18切符使って夜行列車で行ったことあったかも…でも全然覚えてないから実質初めての高知ということにします。
観光ルートも考え中です。
やっぱり桂浜の龍馬には会っとかなあかんよね!

6月
2012
22

転ばぬ先の杖:WebサーバーのコンテンツとMySQL DBをバックアップしてFTP転送するスクリプト

先日発生したファーストサーバの障害により、サーバ上のデータを消失した方が多くいらっしゃるようです。
 
大丈夫と思っていてもいつか必ずやってくるのが災害。万が一に備えてデータをバックアップしておけば安心ですね。
簡単ではありますが、Webサーバ上のコンテンツファイルとMySQLデータをバックアップして別のサーバ(バックアップ用FTPサーバ)へFTP転送するスクリプトを作成しましたのでご参考にどうぞ。
※利用は自己責任でお願いします。
 
 
 
serverbackupshell.png
 
 
 
 
CentOS6.2(さくらVPS)でテストしました。
Webサーバーは、rootでSSHが使えることが前提です。FTPしか使えなかったり、root権限がもらえない共有サーバーでは残念ながら使えないと思います。
ただし共有サーバーでも、cronの設定ができたり、独自シェルスクリプトの実行を許可されてるサーバーならば、root以外のユーザでうまく動かせるかもしれません。

 
/usr/local/bin/webbackup_and_ftp.sh

#!/bin/bash
#--- 各自の環境に合わせて設定してください -----
# local
LOCALBKPATH=/backup              # Webサーバー内のバックアップディレクトリ
LOCALHTDOCS_PATH=/var/www/html   # Webコンテンツのドキュメントルート
LOCALMYSQL_USER=mysqluser     # MySQL データベースユーザ名
LOCALMYSQL_PASS=mysqlpasswd     # MySQL データベースパスワード
LOCALMYSQL_DB=mysqldbname         # MySQL データベース名

# FTP
FTPSERVER=hogehoge.com              # FTP接続先
FTPUSER=ftpuser                      # FTPユーザ
FTPPASS=ftppass                # FTPパスワード
FTPUPPATH=/backup                # 接続先サーバーのバックアップディレクトリ
#-------------------------------------------------

datestr=`date +%Y%m%d-%H%M%S`

archive_web=${LOCALBKPATH}/htdocs_${datestr}.tar.gz
tar czf ${archive_web} ${LOCALHTDOCS_PATH}
archive_sql=${LOCALBKPATH}/${LOCALMYSQL_DB}_${datestr}.sql.gz
mysqldump -u ${LOCALMYSQL_USER} -p${LOCALMYSQL_PASS} ${LOCALMYSQL_DB} |gzip -c > ${archive_sql}

ftp -i -v -n ${FTPSERVER} <<EOF
user ${FTPUSER} ${FTPPASS}
bin
cd ${FTPUPPATH}
put ${archive_web}
put ${archive_sql}
EOF

echo "File backup finished."

exit 0

 
 
 
 
このスクリプトをWebサーバー上においたら、ファイルパーミッションを変更します。
MySQLのパスワードが書いてあるので”rootユーザのみ読み書き可能”にしておいた方が良いです。

chown root /usr/local/bin/webbackup_and_ftp.sh
chmod 700 /usr/local/bin/webbackup_and_ftp.sh

 
これを定期的に自動実行してくれるようにcronに登録します。
例えば、毎週日曜日の朝5:00に動作するようにするには、/etc/crontabに以下の内容を追記します。
 
vi /etc/crontab

* 5 * * 0 root /usr/local/bin/webbackup_and_ftp.sh >/dev/null 2>&1

 
参考: crontabの書き方 — server-memo.net
 
 
 
 

注意事項

・スクリプトを実行すると、Webサーバー上の/backup ディレクトリと、リモートFTPサーバー上の/backupディレクトリにバックアップファイルが溜まり続けますので、定期的にファイル削除する必要があります。
・さくらのVPS(CentOS6.2)にはもともとftpコマンドが入っていませんので、ftpクライアントを先にインストールしておく必要があります。

yum install ftp

 
 
このスクリプトは最低限の処理しかしていませんが、ここから拡張して、以下のような処理を付け足すこともできると思います。
・バックアップが成功したか失敗したかをログに残す。
・実行結果をメールで送信する。
・sftpを使用してセキュアな転送をする。
・Webサーバーとバックアップ用FTPサーバーの間でバックアップファイルの同期(ミラーリング)をする。
・古くなったバックアップファイルを自動で削除する。
 
もしサーバーのバックアップでお悩みの方がいらっしゃいましたらご相談に乗りますのでご連絡ください。
 

6月
2012
20

新MacBookAir インストール作業続き

先日、MacBookAirを買って、セットアップを続けています。
前回「新しいMacBookAir買いました」の続きです。
 
 

SourceTree (gitクライアント)

グラフィカルでなかなか使いやすいです。
Free Mac client for Git, Mercurial and SVN – Atlassian SourceTree
 

emacs (エディタ)

GNU Emacs For Mac OS X
 
移行は、旧パソコンの ~/.emacs.d/ をコピーしてきます。
そのままだとパーミッションの関係でコピーできないので、維持的にパーミッションを緩くしてコピーします。
 

firefox

このへんを見てfirefox syncをセットアップしブックマーク等を同期しました。
Firefox Sync アカウントを管理する方法 | 操作方法 | Firefox ヘルプ
 

transmit (FTPクライアント。有料)

お気に入り(ブックマーク)のexportは、
[お気に入り]>[書き出し]でできます。
 

AppCleaner (アプリケーション削除ソフト)

FreeMacSoft
 

ClamXav (アンチウィルス)

ClamXav
 

Sequel Pro (MySQL管理ツール)


MySQLのデータベース、テーブル管理に便利です。phpMyAdminより便利だと思います。
ただし、MySQLが外部接続可能なレンタルサーバーは少ないので使える場面は少ないです。
Sequel Pro
 
お気に入り(接続先サーバーリスト)を移行するには、以下のファイルをコピーします。
~/Library/Preferences/com.google.code.sequel-pro.plist
ただし、パスワードは移行されません。
 
< 参考> Export Favourites? – Google Groups
 

Finderの設定

普段は隠されていて見えないドットファイルを見えるようにします。
Macの隠しファイルや隠しフォルダを表示する裏技 / Inforati
 
ドットファイルを見えるようにする設定

defaults write com.apple.finder AppleShowAllFiles -boolean true
killall Finder

 
もとに戻す場合

defaults delete com.apple.finder AppleShowAllFiles
killall Finder

 
ファイルの拡張子を表示する設定
[Preferences]>[Advanced] で”Show all filename extensions”のチェックをONにします。
 

Skitch (ドローソフト)

Mac App Store – Skitch
 

Thunderbird (メーラ)

Thunderbird — Windows 7 対応メールソフトの決定版
 
旧パソコンから新パソコンへのデータの移行は、
~/Library/Thunderbird をコピーすればいいです。
Thunderbird/以下に置かれている profiles.ini の中身は特に変更不要でした。
 
手順としてはこんな感じ。
1. パソコンにThunderbirdインストールして起動
2. Thunderbird終了
3. ~/Library/Thunderbird が出来ているので、Thunderbird.orig などして名前を変更する。
4. 旧パソコンからコピーしてきたThunderbirdフォルダを ~/Library/ 下に置く。
 
< 参考> Mac版!FirefoxとThunderbirdのバックアップ方法 | DesignDevelop
 

JollysFastVNC (VNCクライアント)

JollysFastVNC
 
接続先リモートホストの一覧データは旧パソコンからエクスポートする方法が無いみたいなので手動で移行しました。
 

FileMerge (差分比較ツール)

xcode を入れると自動的についてくるので、xcodeを入れます。
xcodeはAppStoreから”xcode”で検索してインストールできます。
xcode起動後、Open Developer Tool > FileMerge で起動。
 

DiffMerge (差分比較ツール)

SourceGear | DiffMerge | overview
 

OmniDazzle (プレゼン用ポインティングツール)

OmniDazzle – The Omni Group
 

DarwinRemote (Wiiリモコン操作ツール)

DarwiinRemote | Free Games software downloads at SourceForge.ne
 

sugarsync (オンラインストレージ)

写真も動画も簡単同期&共有。オンラインストレージ|SugarSync
 

dropbox (オンラインストレージ)

Dropbox – Simplify your life
 

keynote (プレゼンテーション作成)

AppStoreからインストールしました。
 

VLC (動画ビューア)

VideoLAN – Official page for VLC media player, the Open Source video framework!
 

MPlayerX (マルチメディア再生ソフト)

AppStoreからインストールしました。
 

LibreOffice (無料オフィスソフト)

ダウンロード » LibreOffice : 自由なオープンソースのオフィススイート
 

MacWinZipper (Windowsユーザに圧縮ファイルを送るためのソフト)

MacWinZipper (WinArchiver) | Tida Inc.
 

STUFFIT EXPANDER (解凍ソフト)

StuffIt File Compression & Zip, RAR and more – Official Website
 

CotEditor(エディタ)

CotEditor Project Top Page – SourceForge.JP
 
 
 
あと、プリンタドライバとか入れました。
これでだいたい必要なものは揃いました。

6月
2012
18

新しいMacBookAir買いました

今日到着しました。新しいMacBookAir.
 
6/12に注文して、6/18に到着しました。
 
システム構成
・MacBook Air 13インチ
・1.8GHzデュアルコアIntel Core i5(Turbo Boost使用時最大2.8GHz)
・8GB 1,600MHz DDR3L SDRAM
・128GBのフラッシュストレージ
 
IMG_1150.JPG
 
去年(2011年)に同じサイズのMacBookAirを購入して使っていたのですが、最近フリーズが多くて作業に支障が出てたのと、eclipseなどの開発環境を動かすと内蔵4GBメモリでは足りないと感じたので、スペックアップすることにしました。
お下がりのパソコンを実家など他のところに譲るという目的もあります。
 
せっかくなんでOSもクリーンインストールしてみました。
 
Command+Rを押しながら起動すればMac OS X Utilitiesが立ち上がります。
 
IMG_1162.JPG
 
ここでDisk Utility を選んで、もともと存在する”Macintosh HDをEraceします。
(左でMacintosh HDを選択して、Eraceタブ選択>Erace実行)
そしてDiskUtilityを終了します。
 
そうするとまたMac OS X Utilitiesの画面が出てくるので、今度は”Reinstall Mac OS X”を選んでOSを再インストールです。
システムリカバリ用の領域は、もともとパソコン本体内に1GBくらいの領域が確保されているのですが、ここにOSイメージが全部入っているわけではないみたい(必要最低限のブートのみ?)ので、OSインストールはネットワーク越しにインストールすることになります。
したがってインターネットに繋がるネットワーク環境が必要です。
Wifi だとダウンロードに1時間以上かかります。
Wifiじゃなくて有線LANでできないかなと思って試しに有線LANアダプタGU-1000Tを接続したらうまく認識してくれたので有線LAN経由でダウンロードしました。これだとだいたい20分弱くらい。
ダウンロード後、さらに20分前後くらいでMac OS X Lion が再インストールされました。
英語の勉強もかねて、Languageを英語にしました。噂によると日本語環境よりも英語環境の方が動作が軽いというメリットもあるらしいです。
 
 
 
IMG_1170.JPG
 
IMG_1174.JPG
 
クリーンインストールすると、ディスク使用領域はだいたい15GBくらい。そんなにたくさんのファイルを持ち歩かないので僕は128GBのSSDでもあまり不便ではありません。
仕事などで必要なくなった古いファイルは、NoteBookに保存せず別のデスクトップ機に移すという運用にしています。
 
 
ここから各種アプリケーションを入れたり、セットアップしました。
古いパソコンからTimeMachine機能を使って、使用環境をそのままコピーしてくる手もあるのですが、旧パソコンが頻繁にフリーズするのは何かソフトウェアが悪さをしているんだと思いますし、その不具合も含んだまま環境を移すのはあまり得策ではないと思いました。また、不要なファイルも併せていっぱい移行してくることになるので、容量がどうしてもかさばり、新しいパソコンを使い出した時点ですでに残り容量が心細いことになります。
最初から散らかった空間で作業するよりも、新しいフレッシュな空間を作りたかったので、新規インストールすることにしました。
 
 
といっても、旧パソコンでは今まで長い時間をかけて少しずつインストールしてきたアプリとか設定とかを、ひとつひとつやり直していくのはかなり大変です。
1日ずっと移行作業と格闘していましたが、まだすべて終わっていません。
 
 

移行作業の一例

 

ssh用の公開鍵、秘密鍵の移行

.ssh/ の下にある、config, known_hosts, 公開鍵、秘密鍵などを新環境にコピーします。
・古いパソコンのファイル共有をONにします。[システム環境設定]>[共有]>[ファイル共有]
・ファイル共有経由で .sshをまるごとコピーするのですが、そのままだとパーミッションが邪魔してコピーできないので、
 ひとまずすべてのファイルの権限を777にしときます。
・移行先で、パーミッションを元に戻します。
 .ssh/ は 700、秘密鍵は600にします。
 

システム環境設定

・Keyboardのリピート間隔を一番短く
・トラックポインタの速度を一番速く
・Spotlightのショートカットキー変更(Spotlight Shortcut)
 ^Space から ^Shift+Spaceへ。
・Keyboard Shortcuts
 Finderなどの同じアプリケーション間のウィンドウ切替のキーをCmd+F1で出来るようにする。
 (もともとのキーアサインはCmd+` だがうまく動作していない様子なので)
 Keyboad & Text Input > Move focus to next window で設定。
・Dockを自動的に隠す
 Automatically hide and show the Dock
・トラックパッドのスクロール速度を変える
 Universal Access > Mouse & Trackpad > Trackpad Options > Scrolling Speed を変更
 

Google日本語入力 Settings

・SpaceInputType を Halfwidth
・他にも英数字とか記号とかをHalfwidthに
 

Chrome

・旧マシンから設定の同期
 これでブックマークや拡張機能やらいろいろ移行
 

Bluetoothマウスの設定

・旧パソコンのBluetooth設定を無効にして、新パソコンにBluetoothリンクするようにします。
 

eclipseインストール

3.7.2 Classic をインストール
・PDTプラグインを入れる (PHP開発環境)
 eclipseの [help] > [Install new software] で追加できます
・Aptanaプラグイン入れる(HTMLとかの編集でいろいろ便利)
 Aptana | Download Aptana Studio 3.1.3
・Eclipse git プラグイン入れる
 
・今まで使っていた既存プロジェクトをImportする
 File > Import > General > Existing Projects into Wordspace で
 select root directory のテキストボックスにプロジェクトのパスを設定する
 

その他もろもろインストール

bettertouchtool(マウスジェスチャの拡張)
・skype
iTerm2 (ターミナル)
ecto (ブログエディタ)
・iCloudの設定
・iTunesの設定、iPhoneの同期
・メールの設定
simplecap (画面キャプチャツール)
・無線LANの設定
 
 

他にまだまだインストールしないといけないソフトや設定があるので、続きは別の日に行いました。
続きはこちらのエントリで。
新MacBookAir インストール作業続き
 
 
今日使ってみたところでは、外部ディスプレイとの相性があまり良くない感じです。Acerのディスプレイ使っていますが、接続すると背景がちゃんと出て来なかったりします。OS起動中にディスプレイ接続すると機能するのですが、OSを停止した状態で先にディスプレイ接続して、OS起動するとOSが立ち上がって来ません。
運用で回避できるレベルですが、なんとなく不便と感じてしまいます。ディスプレイのせいなのかなぁ。

6月
2012
4

6/3 WordBench神戸のふりかえり

6/3に神戸まちづくりセンターで行われたWordBench神戸のふりかえりです。
 
第12回 WordBench神戸 : ATND
今回はお題がとても魅力的だったためか、定員20名が一日のうちに埋まり、参加者枠を増やす事態となりました。
 
IMG_1068.JPG
 
 

「レスポンシブルなテーマの作り方」@HissyNC

 
プレゼン資料:レスポンシブルなテーマの作り方
 
 
正確には「レスポンシブル」ではなく「レスポンシブ」でしょうか。
PCディスプレイの画面サイズは、横1024pxを超えるサイズが一般的です。PC用のWebサイトはこの横幅を考慮して作られています。
レスポンシブなテーマでは、これに加えてスマートフォンなどで利用されている横320pxなどの小さいサイズに対しても、レイアウトをうまく組み替えたり、表示する画像のサイズを変えたりすることができます。表示が整うように1つのcss中に、PCやスマホなどデバイス毎(正確には解像度毎)のcss設定を記述してマルチデバイス対応する技術です。
今まではWPTouchなどのスマートフォン用プラグインを入れて、デバイスごとに全く違うレイアウトや表示技術を使っていたところを、レスポンシブなWebデザインにすることで比較的簡単にモバイルデバイスに最適化されたレイアウトの表示をさせることができます。
 
印象に残った話。
・IE6~IE8はレスポンシブ技術に対応していない。
・PC用、スマホ用と別々に作っていたテーマを、レスポンシブWebデザインで柔軟に対応することができるため、制作コストの削減になる。
・MediaQueryの使い方などの知識がいるため、マークアップエンジニアのスキルが必要となる。
・PCで見る場合でも、レスポンシブデザインのテーマではモバイルデバイス用のcss記述も合わせてダウンロードしていることになる。逆にモバイルデバイスの場合でも、画像はディスプレイに合わせて小さく表示されるかも知れないが、画像はPCで使っている画像と同じものでありサイズは変わらないので、データ転送量としてはレスポンシブを使わない従来のWebサイトよりも不利になる。
・レスポンシブデザインのシミュレーションは responsive.is で出来る。
 
 

「WordPress事例の徹底解説」@tkc49

 

 
NPO法人としてよくWordPressサイトを作っている細谷さんのWordPress構築事例です。
西宮 イイトコ情報 ウブスナ」という観光情報サイトの例を説明していただきました。
ユーザーが簡単に記事を投稿できるように、カスタム投稿タイプとカスタムフィールドを駆使して、定形記事を書くための仕組みを実装しています。
デフォルトの状態では、記事投稿時はタイトルと記事内容くらいしか入力するところがありませんが、カスタムフィールドを使うことで、チェックボックスとか、専用のテキストボックスフィールドを設けることができます。
またカスタムメニューを使うことで、例えば「このサイトについて」などの固定ページの記事編集のためのページを、管理画面の左メニューに目立つように配置することが出来ます。
 
IMG_1072.JPG
 
 

「WordPress3.4特集」@bren_boss

 

 
次期リリース版のWordPress Version3.4で実装される機能についてのお話。
目玉機能はテーマカスタマイザーだそうです。
これがあれば、オンライン上でテーマの内容をリアルタイムに編集することが出来ます。
今までは管理画面の中で、タイトルの色を変えたりトップ画像を指定したりする機能はありましたが、テーマカスタマイザーがあればそれ以上のことができるし、実際に表示されるテーマを見ながらカスタマイズできるので、ユーザーがテーマをカスタマイズしやすくなります。
ただし、そのぶんテーマファイル側で対応しなければならない仕組みが増えるので、テーマカスタマイザー対応のテーマを作れるのはよりシステムを理解した人に限られてくるでしょう。そういう、ユーザーと開発者の役割の二極化が進む機能と言えます。
 
 
 
 

勉強会を終えての感想

とても内容の濃い勉強会でした。スピーカーの方の話がどれも面白くためになりました。
内容が高度だったので、ちょっとついていくのが大変でしたし、全部自分のものにはできていませんが、技術を知るきっかけにはなったので、これから学習するときに役に立つと思います。ありがとうございました。
 
一方、今回の勉強会は高度で内容の濃い話だったため、初心者には難しかったようです。「カスタム投稿タイプ」とか「タクソノミー」等のWordPress専門用語が分かっている前提での話が多かったので、敷居が高く感じた方も多かったみたいです。
 

5月
2012
14

WordCurryとWordBench神戸分科会(2012/5/13)の振り返り

2012/5/13に開催されたWordCurryと、WordBench神戸分科会のふりかえりです。
 

WordCurry

_event_images_0004_5897_WordBench0513WordCurry_original.png
 
WordCrabWordうどんに対抗して、神戸でも「カレーを作ってみんなで食べよう」てだけのイベントをやりました。
 
WordBench神戸のカレーコミュニティ”WordCurry”
 
まずは買い物リストを作成し、
IMG_1003.JPG
 
近くのスーパーで買い出し
IMG_1007.JPG
 
西宮市民交流センターの調理室でカレーを作ります。
IMG_1009.JPG
 
準備からの参加者は10人くらい。カレーを食べるだけの参加も入れると20人くらいになりました。
男性陣もかなり頑張りました! ていうかみんなカレー作り手慣れてる!
 
カレーは全部で甘口、中辛、辛口、@nipper_onsideさん特製キーマカリー の4種類できました。
少しずつ全部食べてみましたが、どれも美味しくできており大成功でした! お腹も満たされました。
_photos_large_578518276.jpg
photo by @luchino__
 
 

WordBench神戸分科会

カレーを食べた後は、調理室の隣にある和室でWordBench神戸の勉強会です。
30人弱の方に来て頂きました。
 
WordBench神戸分科会
 
 

プラグイン大会議

30人もの人数でディスカッション形式にすると、喋る人が何人かに限られてしまい、喋らずに聞くだけの人が多くなってしまうのが悩ましいところです。
今回は、WordBench京都でも行われたワールドカフェ形式を初めてやってみることにしました。
 
ワールドカフェというのは聞きなれない言葉ですが、要するにグループディスカッションです。
時間を区切っていろいろな人とグループディスカッションすることにより、全員とディスカッションしているのと同じような効果が得られます。
 

第1ラウンド

4~5人くらいのグループを6つ作り、そこで20分グループトークしてもらいます。
ワールドカフェ形式で行うにあたって、以下の点に気をつけます。
・結論を出す必要は無い。
・リラックスする。カフェのような空間で。
・アイデアを自由に出す。
・いたずら書きOK。絵を書いてもOK。
・まずはグループ内で自己紹介から始める。
 
お題は、「便利なプラグイン紹介」。プラグインの名前と、なぜ便利なのかを、グループで1つ用意された用紙(A3サイズ大)に書いてもらいます。
便利なプラグインが思いつかなければ、「こんなプラグインはないかしら?」という問いかけを考えてもらうようにしました。
 

第2ラウンド

第1ラウンドが終わったあと、グループごとにホストを1人決めます。ホストにはその場に残ってもらい、他の人は旅人として別のグループのテーブルに移ります。
新しく旅人を迎え入れたホストは、第2ラウンドの開始時に第1ラウンドでどういった話があったかを紹介し、旅人はそれぞれのグループで話し合われた内容を紹介しあいます。そしてそれらをもとに、新しいアイデアや知識を用紙に書き加えていきます。
 

第3ラウンド

第2ラウンドが終わったあとは、旅人は第1ラウンド時のグループに戻り、第3ラウンドを始めます。
ホストと旅人は第2ラウンドでどういった話があったかをお互いに紹介して、さらに用紙に付け加えていきます。
 

発表

第1ラウンド~第3ラウンドで話し合われた結果をうけて、グループ毎に発表してもらいました。
それぞれのグループを集計するとかなりたくさんのプラグインが挙がりました。
 
 
各グループの記入用紙を紹介しておきます。
IMG_7992.JPG
 
IMG_7993.JPG
 
IMG_7994.JPG
 
IMG_7997.JPG
 
IMG_7998.JPG
 
IMG_7996.JPG
 
IMG_7995.JPG
 
 

紹介されたプラグインリスト

Post Expirator 投稿の有効期限を設定することができる。
jQuery Colorbox 画像投稿するだけで自動的に Lightbox 表示にしてくれる
Easing Slider スライドショーを簡単設置できる
All in One SEO Pack 基本的な内部SEO対策
runPHP 投稿記事内で PHP を実行させる
HeadSpace2 千手観音の如き機能と噂のSEO系プラグイン
Ktai Style 携帯対応プラグイン
UserAgent Theme Switcher iPadやAndroidなどデバイスごとにテーマ変更できる
WP SuperCache ページ表示高速化
SyntaxHighlighter Evolved ソースコードの整形表示ができる
Contact Form 7 お問い合わせフォーム
Custom Field Template カスタムフィールドを使いやすくする
Custom Post Type UI カスタム投稿タイプを使うためのプラグイン
WP Total Hacks 20項目以上のカスタマイズができる
TinyMCE Advanced ビジュアルエディタを強化
TinyMCE Templates ページや記事のテンプレートを作成する
WPtouch スマートフォン対応
WPtap Mobile Detector スマートフォンに最適化されたWordpressテーマを適用できる
Multi Device Switcher デバイス毎にテーマを切り替える
Google XML Sitemaps サイトマップ(sitemap.xml)作成
WP-DB-Backup データベースを自動バックアップしてくれる
Custom Post Type Permalinks カスタム投稿タイプのパーマリンクを設定できる
Contact Form 7 to Database Extension お問い合わせ内容をデータベース管理する
Front-end Editor 管理ページに行かず記事を編集できる
Admin SSL 編集管理ログイン画面でSSLを使用できる
CSV importer CSV形式で一気に記事をインポート 
001 Prime Strategy Translate Accelerator 実行速度を短縮させる表示高速化プラグイン
Better WP Security セキュリティ強化
Regenerate Thumbnails WordPressのサムネイル再生成プラグイン
WP Zen-Coding Zen Codingを導入するプラグイン
PS Auto Sitemap 表示スタイルが選べるサイトマップページプラグイン
Resize at Upload Plus 画像縮小プラグイン
Head Cleaner サイトのヘッダとフッタを整形し最適化&高速化を行う
Admin Menu Editor 管理画面の項目名を変更できる
 
 
 
また、プラグイン紹介だけでなく、以下のような質問が出ました。
・みんなはプラグインをいくつくらい入れてるの?
・プラグインは入れれば入れるほど、動作が重たくなる?
・ブッキングカレンダー:予約プラグインだれか使ったことある?
・用途が終わったプラグイン、使わなくなったプラグインは削除した方が良いか?
・FacebookやTwitter などのソーシャルメディアとの連携はどうしたらいい?
・プラグインをアンインストールしてもDBテーブルが削除されない場合、それを削除してくれるお掃除プラグインってないの?
・WordPressのダウングレードはできる? → できます。
 
ワールドカフェ形式は初めての試みでした。僕は事前に本を読んだのでやり方は分かっていましたが、それを参加者に短時間でうまく説明するのが難しいと感じました。説明用のアジェンダは用意しておいたのですが、それだけでは意図を伝えきれない部分も多く、参加者の方がどう行動したら良いか困った場面も少なからずあったと思います。
ナビゲーターとしての役割をうまく果たせたかどうかはわかりませんが、ディスカッションは活発に行われたようなのでとても有意義な時間にはなりました。
制限時間が来たときに会話を制止するのが難しいくらい、それぞれのグループで活発な話が交わされていました。メンバー間の交流も図れてお互いのノウハウも交換できたし良い機会だったのではないかと感じています。
たまにはこういうグループディスカッションの場を作ってもいいなと思いました。
 
 
 

案件で詰まっていることのサラシ大会

プラグインのディスカッションで時間を多く使いすぎたため、このテーマに割く時間がなくなってしまいました。すいません。
時間が無い中、少し質問が出たので掲載しておきます。
 
WordPressを動かすのにおすすめのサーバーはどれ?
・ファーストサーバー、さくらとかが良い?
・ヘテムルはメールサーバーがこけやすい
・ロリポップはあまりおすすめしない
・CORESERVERは? セーフモード動作なので、ちょっと癖がある
・カゴヤのサーバーは速い 管理画面は難あり 電話問い合わせ可能
・アイルの iclusta+は安定している
・電源が確保されているかが重要。安いところはUPSが貧弱 発電所の供給力が問題になっている日本よりも、海外サーバーを使うというのも一つの手
 
オオサカンスペースのトップページに表示している「ニュース」のような記事一覧を、イベントが終わった後は「過去のイベント」のカテゴリに自動で移動させたい。これを実現するにはどうしたらいいか?
 
 
 
カレーで満腹になったあと和室でまったり勉強会というのは、かなり眠気を誘うシチュエーションでした。でも椅子に座って受ける勉強会だけじゃなくて、こういう風変わりな勉強会もいいんじゃないかと思いました。ディスカッションに適したテーマがあれば、またワールドカフェ形式も取り入れたいと思います。
 

5月
2012
9

北陸の味覚、白えびとか

北陸に来ています。
 
金沢にある割烹魚匠庵でご当地グルメを堪能しました。
この店でひととおりの北陸名物は堪能できたので、もうこの店1つで十分でしたw
 
5月~6月に富山を中心に出回る白えび。唐揚げやかき揚げにするのが一般的だそうです。
IMG_0931.JPG
 
サクサクと軽い触感で、かっぱえびせんの味がしました。
白えびバーガーというものが富山にあるそうですが、そこまで辿りつけず金沢で妥協しました。
 
金沢の郷土料理「治部煮」鴨の肉とか入ってます。
IMG_0933.JPG
 
ノドグロのニギリ(中央)とか、白えびの軍艦(一番右)。ノドグロは高級魚として扱われている魚だそうです。ハマチのような味がしました。
IMG_0934.JPG
 
氷見牛のコロッケ。アツアツで美味しかったです。
IMG_0935.JPG
 
 
 
 
金沢駅が無駄に豪華すぎて笑けました。
IMG_0944.JPG
 
[参考]
金沢駅むだに豪華すぎワロタwwwwwwwwwwwwwwwwwww:ハムスター速報
 
 
 
 
宿泊した山代温泉の「ゆのくに天祥」では、温泉に入っている間に温泉卵を作れる企画があるので試してみました。
IMG_0952.JPG
 
こんな感じで自分の卵に目印をつけて
IMG_0954.JPG
 
こんな感じの温泉卵用桶に30分ほど湯煎しておきます。自分がお風呂から上がるころにはちょうどいい塩梅の温泉卵が出来上がります。
IMG_0956.JPG
 
IMG_0955.JPG
 
温泉卵って、ほんとうに温泉でできちゃうんですね。「鉄砲汁」とか「人形焼」みたいになんかの例えで「温泉」てつけているだけかなと思っていました。

5月
2012
4

「WordPressの天下はいつまで続く? WordPressの現状と未来」というテーマで発表してきました

4/24 岡山Webクリエイターズでの登壇

去る4/24(火)に、岡山Webクリエイターズの勉強会でWordPress関係のテーマで発表してきました。
 
「WordPressの天下はいつまで続く? WordPressの現状と未来」という題です。
 
岡山WEBクリエイターズ – 第13回 岡山WEBクリエイターズ勉強会のお知らせ
岡山WEBクリエイターズ – 第12回 岡山WEBクリエイターズ勉強会のご報告
 
 

 
西宮に住んでいる僕が、今回岡山にお招きいただいたのは、去年(2011年)9月のWordCamp神戸が縁です。
WordCamp神戸では「他のCMSと比較したWordPressのメリット/デメリット」という題で発表させてもらいました。そのセッションの場に岡山Webクリエイターズの方がいらっしゃって、今回岡山で開催するテーマ「春のCMS徹底比較バトル」でちょうど良い題材として推薦いただき、今回の岡山遠征となりました。
 
こういう縁でお招きいただけるなんてほんとうに光栄なことです。またがんばろうって気持ちになります。
 
IMG_0885.JPG
 
20120424_336.jpg
 
CMSバトルということなんで、激しい殴り合いになるのかと思いましたが、終始和気あいあいとした楽しいイベントでした。
僕がWordPress代表として登壇するのもおこがましいし、a-blog CMSの山本さんというすごい人と並列で出演するのも恐れ多かったですが、根拠のない自信でなんとか乗り越えました。
 
山本さんのレポートはこちら。
第13回 岡山WEBクリエイターズ勉強会で a-blog cms を紹介してきました | kazumich.log
 
ご自身の会社で開発されている国産CMS a-blog CMSの紹介をされていました。
a-blog CMSの存在は知っていましたが、初めてレクチャー受けたので新鮮でした。管理画面でかなり自由なことができますね。
柔軟すぎるカスタムフィールドのおかげで、野球のスコア用の入力フォームを作れちゃうのには感動しました。カスタマイズにおいて、WordPressみたいにPHPコードを書かないといけない場面が無いので、デザイナーには嬉しいCMSだと思います。
これを機会に、僕も触ってみようと思います。
 
当日のつぶやきをまとめたtogetterはこちら。
第13回 岡山WEBクリエイターズ勉強会「春のCMS徹底比較バトル」 – Togetter
 
懇親会にも参加させていただき、たくさんの岡山の方と方と触れ合うことができました。この機会を与えていただいた運営の方に感謝です!
新神戸から岡山までは新幹線で30分。ドアtoドアで90分くらいで行けますのでけっこう近いですね。帰りは飲み会を早退させていただくことになりましたが、日帰りで最終の新幹線で帰って来ました。
 
 
 

4/28 WordBench大阪での登壇

 
そして、ほぼ同じプレゼンを4/28のWordBench大阪でもやりました。
内容は4/24の岡山版とほとんど同じですが、1ページだけ追加しました。
岡山での持ち時間は30分でしたがWordBench大阪は50分ほどあったので、このプレゼンをゆっくりやったのと、追加でtumblrの紹介を行いました。
 

 
 
当日のUstream録画はこちら。
http://www.ustream.tv/recorded/22183014
 
 
振り向くとtumblr砲がすぐそこまで来ていることがお分かりになると思います。
 
201205041237.jpg
日本でのトレンド( xoops, wordpress, tumblr比較 )
 
全世界で見ると、blogというキーワードをも凌駕しそうということが分かります。
201205041241.jpg
 
[参考]
ブログは死んだ。これからはTumblrだ。 : ギズモード・ジャパン
 
めまぐるしく動くWeb業界ですが、いろいろと面白くなって来ましたね。今後の展開が楽しみだったりします。
 

4月
2012
14

HTML5など勉強会に参加してきました。旬のHTML5技術を勉強したよ。

まにまにフェスティバルの前夜祭という名のHTML5勉強会に参加しました。4/13に大阪で開催されました。
 
第4回 HTML5など勉強会 まにフェス前夜祭 特別企画 : ATND
 
Chrome、Opera、Firefoxの制作サイドの方が、東京からわざわざ来られてセミナーしてくれるという、関西ではなかなか無いチャンスでした。
企画された方々、どうもありがとうございます。
 
会場は2年前に開業したばかりの梅田阪急ビル。めちゃきれいで広々! でも中はちょっと分かりにくい構造でした。
30階まで行くのに、いったん15階でエレベーター乗換えが必要であることが分からず、1階から30階までの直通エレベーターをずっと探してしまいました。
 
IMG_0867.JPG
 
ここのエレベーターが馬鹿でかい! 大きさが業務用エレベーターみたいな感じ。どれくらデカイかというと、中で卓球できそうなくらい。このエレベーターが6基ほどあります。
梅田の阪急オフィスビルの馬鹿でかいエレベーター。四畳半はあるで! – YouTube
 
勉強会会場の様子。100名以上は入ります。この設備ええなぁ。高そうやけど…
IMG_0868.JPG
 
 
 
以下、勉強会で得たことをメモりました。
 
 
 
 

『Getting started with WebSocket』 Google 北村英志さん

スライドが公開されています。
「はじめてのWebSocket」
 
HTML5技術の1つ、WebSocketの解説です。
利用者がブラウザからリクエストを送って情報を得るというスタイルの「ポーリング型」の通信はWebの黎明期から今日までずっと使われてきていますが、WebSocketの登場により、相手側(サーバー側)からプッシュ受信できる双方向型の通信が実現できます。
この通信が可能になると、できることがぐっと広がります。例えば、
・リアルタイム株式情報
・ゲーム
・地震速報などの緊急速報
などが実現できます。
WebSocketが無い時代でも、ブラウザ側から定期的にポーリングして、擬似的に双方向通信に見せかける技術は存在していました。ですがWebSocketによって本物の双方向通信が実現するということです。
 
WebSocketに未対応のブラウザとして、IE9がありますが、IE10からは対応予定だそうです。
そんな未対応ブラウザに対しては、Polyfill(ライブラリ)といったJavaScriptで補完する技術を使ってWebSocketライクな技術が実装できるそうです。
 
Node.jsはWebSocketの1つの実装形態です。いままでNode.jsってどんなものか良く分かっていませんでしたが、ようやく意味が分かってすっきりしました。
iPhone版のSafariはWebSocketに対応していますが、バージョンが古いのでサーバー側で吸収してあげないといけません。
 
WebSocketを実装したチャットの例と、バイナリメッセージを送受信できる音声再生ページをデモしてもらいました。
特に音声再生ページの方はなかなかすごい。北村さんのPCで音声ファイルをアップロードすると、そのページを開いている複数のPCで同時に音が鳴り出すという、新感覚のサイトで驚きました。
HTML5 Demo: Web Socket
Audio Stream Experiment
 
 
 

「Web on TV: 失敗しない作戦」 Opera ダニエルデイビスさん

Web on TVについての解説。
最近のテレビはインターネットに接続すればWebブラウザとして利用できます。しかしテレビはパソコンと違って、いろいろな制約がつきまといます。
テレビ用のHTMLコンテンツを作る際の注意点は、
・PCで見るコンテンツに比べて、文字を大きくしないと見えない。2.5emくらいにしないと読めない。
・テレビ用にコンテンツを作るのが困難な場合、モバイル用のページを流用したら捗る。
CSSメディアクエリを利用することで、TV用のスタイルを適用することができる。(ただし万能ではない)
・テレビメーカーは、ブラウザのエージェント情報を公開してくれていないケースが多い。エージェントを調べたい場合は実機で確認するしかない。
 
しかしテレビはPCに比べて短所ばかりではありません。
・テレビはいつだってリビングルームの中央にある。
・明るい画面と高品質のスピーカーが備わっている。
・PCと違って、老若男女誰でも使い方を知っている。
・数人が同時に楽しめる。
 
探してみればテレビに適したネットコンテンツがありそうですね。
今までテレビでのネット利用について考えたことはあまりなかったのでダニエルさんの話は新鮮でした。
 
 
 

『Web On Kernel』 Mozilla Japan 浅井智也さん

Firefoxというと、Chromeにシェアを食われて最近元気なくなってるなーと思ってましたが、いやいやそんなことはありませんでした。
HTML5技術を積極的に採用し、本気でWebの世界を変えようとしています。
 
現時点で、ブラウザだけで出来ることはまだまだ少ないです。例えば、
・スマートフォンデバイスの電源状況を知る
・通信環境かWifiなのか3Gなのかを知る
ということはWeb技術だけでは出来ません。これをしようと思うと専用アプリが必要になります。
 
しかし、HTML5でこれが可能になります。
他には、
・デバイスのローカルストレージにアクセスし、操作する
・Bluetoosth、USBなどを制御する
などが可能になります。
 
これができればネイティブアプリは要らなくなり、Webこそがあらゆるデバイスのプラットフォームとなります。
Mozillaはそれを目指しているということでした。
 
 
6/30(Sat)に大阪産業創造館でFirefoxのカンファレンスをやるそうです。
FirefoxDevelopersConference2012
 
 
 

Microsoft 春日井さん

ライトニングトークという枠だったのであまりお話を聞けませんでしたが、今後リリースされるIE10や、Windows8について語っていただきました。
 
・3/28からIE6を使っている人は自動アップグレードされるようになった。これにより、IE6は次第に市場から消えていく。
・Windows XP SP3は2013年4月8日でサポートが終了。
・アメリカは IE6のシェアは1%、それに対して日本は6% (日本のIE6のシェアが依然高い)
・IE9は2011年4月26日に日本語版開始
メトロとは:スマートフォンデバイスを意識したWindowsの新しいUI
 メトロ版はSilverlightやフラッシュをサポートしない。
 
春日井さんのマシンでメトロの動きを実際に見せてもらいましたが、通常のWindows画面との切替がかなり高速で使いやすそうでした。
IE=もっさりという印象が僕にはありましたが、春日井さんのマシンではかなり軽快に動いていました。
メトロはWindows7でしか動かないのかな? あのエクスペリエンスはWindows8待ちですかね。(Window8コンシューマプレビュー版は既にリリースされています)
 
 
 
 
知らないことが多くてかなり勉強になりました。自称デベロッパーとしては、node.jsのようなWebSocket技術はぜひ身につけておきたいです。これは今後のインターネットにおいて、重要な役割を果たすと思います。
僕は携帯電話やカーナビなどの組み込み製品の開発経験がありますが、そういう現場でソケット通信とか非同期I/Oの技術は良く使うので、この経験がもしかしたら生きるかも!?と思いました。
 
 
 
今回の勉強会は、リクルートエージェントが提供するWeb CAT Studioがサポートしてくれています。ステッカーもらいました。
 
IMG_0870.JPG
 
 
以前、WordBench神戸が2/18に開催したWordPress+HTML5勉強会in神戸でもサポートしていただいたりと、リクルートエージェントさんにはいろいろお世話になっております。Web業界の勉強会などを応援していただいています。今後ともよろしくお願いします。