2008年8月31日日曜日

札幌Java勉強会に参加してみようかと

先日アナウンスが流れたようですが、札幌でもJava勉強会が開催されるようです。

思いっきりアウェーですが、どんなもんか参加してみようかと。

  • 日時 9月20日(土)13:00~17:00
  • 会場 白石区区民センター集会室A
  • 内容 読書会「ユースケース駆動開発実践ガイド」
  • 参加費 300円~500円(学生は安いって事? 現地徴収?)
  • 参加方法 事前に連絡いれるといいみたい。(正式ではないですが)googleグループに参加すれば詳しくアナウンスありそう

詳しくは札幌Java勉強会-01参照のこと。

おいらの立ち位置

正直おいらの興味範囲+仕事ではJavaの必要性をあまり感じてなく、Javaの経験もEclipse使ってソケット通信するちょっとしたツールを作ったぐらいなので、あまりJavaJavaするようなら参加を見送ろうと思っていたところですが、初回は地均しも兼ねてちょっと汎用的な題材(設計・モデリング)を扱うようなので、参加してみようかと。

ただ、自分的にはRailsを使うことが多く、規模も小さく、おおよそ一人で作るので、あまり重厚な設計プロセスは必要ない(考えを整理するツールとして使えればよい)感じです。ただ、全体的な考え方や概要は知っておいた方が良いかなと思って。

おいらの場合は企画段階から参加することが多いので、打ち合わせ内容をうまくまとめたり、発注者側にイメージをうまく仕えられるようにしておきたいって言うのもあるかな。

個人的興味範囲

せっかくなので、Javaに関する興味範囲をまとめてみると

  • Andoroidアプリ作りたい(かも。まだ日本でのAndoroidが現実味を帯びてないので。規約で縛るiPhoneアプリ開発環境よりイメージは良さそう)
  • Rails on JRubyに関するノウハウ(でもこれってJavaの範疇じゃないかもね)
  • JavaサーブレットやTomcatを使ったデプロイのノウハウ(実際にサーブレットを動かしたこともないので)
  • Red5のようにコアコンポーネントだけ公開されていて、制御するためにJavaを使う必要があるアプリを使いたい(個人的には使うならJRubyでいいかーと思ってるけど)

特に、Flashを使ったシステムを扱っていると、旧マクロメディア系のサーバサイドミドルウェア(という表現が正しい? LiveCycle Data ServicesやBlazeDSって)を使う必要が出てくることがあって、これってJavaが使えることを前提にしていたりするので、Flash系のシステムを極めるなら(極めなくても比較対象に含めるなら)Javaを使ったシステム開発の流れは知って置いた方が良いかなぁと思っています。

ただ、Adobe製品を買って使うとカネもノウハウも使用用途も限られてしまうので、Javaで書き換えられたオープンソースのクローンを使いたいなぁと思っているところです。その方がおいらのような立ち位置で仕事をしている人には使いやすいと思うので。

特に、サーブレットを使ったサービス(アプリケーションサーバ)の公開・運用ノウハウってあると思うんだよなぁ。PHP使っていると全然気にしないんだけど、RailsとかJavaってPHPに比べてアプリケーションサーバ!!ってのが前面に出るから。


2008年8月27日水曜日

札幌における勉強会に対しての助成制度を調べてみた

昨日のエントリーに続き、行政側からなにか支援は受けれないかなぁと思って、実際に問い合わせの電話をかけまくってみました。(流石に突撃してたらい回しにされるのは避けたかった)

結果としてあまり良い情報は出てこなかったのですが、一応こんな感じだったよーという報告をまとめます。

札幌市の助成(金銭的補助)方面

今年から市民活動のための寄付を元にした基金が設立され、団体登録の後選考されれば助成が受けられるみたい。

  • NPOである必要はなく、任意団体でOK
  • 札幌市民が参加者の大半である必要がある(札幌市民が他の市町村で活動するのはアリだが、他の市町村のために勉強会を開くなどは不可)
  • 詳しくは団体登録及び助成の概要(PDF)を見るべし

ざっとした流れ

  • 9/17 応募締め切り・書類選考
  • 10/25 二次審査(公開プレゼンテーションでの審査)
  • 11/初旬 選考されれば助成開始
  • これを毎年繰り返す

ただし、寄付は使い道や団体名を指定して受け付けるものもあり、現状は指定されている寄付が大半なので、「勉強会のため」という名目で助成を受けるのは難しいかも、とのこと。(地域振興云々みたいな書類を書ければ通るかもねー的な)

なにぶん、今年からなので流れが良く読めないみたい。(かつ大人の世界の雰囲気が・・・)

窓口

札幌市市民まちづくり局市民自治推進室市民活動促進担当課

011-211-2964

札幌市の広報(告知方法の多様化)方面

札幌市のホームページへのバナー掲載は、一般企業からの広告料を取って行っているものなので、金さえ払えば可(もちろん審査はあるだろうけど)。

その他札幌市が配布している印刷物に、お知らせ欄や広告を掲載するような方法はあるものの、札幌市が主催するのものに限られるので、任意団体が広告を掲載するのは現状では無い。

ただし、地下鉄の掲示板などに任意団体のポスターなどを貼る事は可能。この条件は

  • 管轄する市の部署から後援を受ける必要がある(名義貸し程度。影響小)
  • ポスターは作ってから持ち込む必要がある
  • ポスター関係の受付は札幌市総務局広報部広報課(011-211-2036)になる
  • 広告掲載の2ヶ月前までに予約が必要(内容が大体決まっていればよい)
  • IT関係の勉強会についての管轄部署はどこになるか、いろんな部署に電話をかけたが全て「いやー、うちの部署じゃないわ」ばっかりで、話にならない。ので、市長にタレコミメールしておいた。(進展があれば続報する)

あー。縦割り。まぁこんな事問い合わせてくるやつぁ少ないだろうから、イレギュラーフローだとはしても、それでも対応悪すぎ。かなり心証悪いです。電話で良かったぜー(実際に市役所に行ったら何時間かかったか…)

ポスターだけなら別に頑張らなくてもいいかなぁと思って萎えた。もう忘れた。何も覚えていません。

北海道方面

札幌市とは打って変わってとても対応が良かったのが道庁。

上記のような助成や広報は担当部署が複数に跨るんだろうけど、ワンストップで返答してくれた。

しかも、道だけじゃなくて、経済産業省や、札幌市(ごめんね)とか他の所にも問い合わせしてくれたみたい。

ただ、結果としてIT勉強会系で使えそうな支援制度は無かったとのこと。

使えそうな施設としては

かでる2・7

あと、道の施設じゃないけど

札幌市産業振興センター

札幌コンベンションセンター

を紹介してくれたけど、これも王道だよなぁ。

なんにせよ、とても丁寧な対応感謝します。

窓口(?)

北海道経済部商工局産業振興課IT産業グループ

011-231-4111

まとめ

札幌市には市民団体が使える基金があったけど、これを勉強会で使えるかどうかは微妙。まぁ、やらんよりはいいか、程度。

他、道や国レベルでは直接の支援策は無いみたい。

まぁ、言い方とか裏技はあるんだろうけど。(でも大人の世界の臭いがしたので入ったら睨まれる気もする)

なーんか、あまり実のある話にはならなかったけど、現状は掴んだので、あとはこのエントリーが議員さんの目に入ることを祈って閉めます。(続報が有ればまた後で)

2008年8月25日月曜日

地方における勉強会について考えてみた

昨日Ruby札幌勉強会に参加してきて、RegionalRubyKai(ryの一環として札幌Ruby会議01 を行うことになった過程とか勢いを感じてきました。

雰囲気のわかる資料↓。

この動画の23分27秒あたりに出てくる「 Regional RubyKaigi の御提案 - 角谷さん」あたり参照。

これに被るんだか被らないんだかよくわかりませんが、色々思うことがあったので、地方におけるIT系勉強会について書いてみたいと思います。

なお、おいらがイメージしやすいように、地方のいち都市として札幌を前提に書いていますが、話の趣旨としては全国の各地方都市に当てはまるかと思います。

なお、あまり深く考えて無いので(w)ブレストの結果集まったアイデアぐらいに受け取ってください。

話に出てくる団体の説明

札幌にて勉強会(やそれに類するモノ)とかイベントを1.5月/回ぐらいの頻度で主催している団体。たぶん共通の問題を持ってると思う。

Ruby札幌 〜札幌でRuby絡みをわやわやしているところ。プログラマ・技術者向け。Rubyist向け。

北海道WEBコンソーシアム 〜札幌で主に受託Webシステム・サイト開発絡みをわやわやしているところ。プロデューサー・デザイナ向け。

LOCAL 〜北海道における技術系地域コミュニティの活動をバックアップするためのコミニュティ。OSC2008 Hokkaidoは実質ここのメンバーで運営されていた(?)

他にもアレとソレとコレぐらいのコミュニティが活動してるんだけど、おいら実情をよく知らない。

地方における勉強会の意義

現状に即した地方での勉強会のあり方を考えてみた。

  • 絶対的なマス(特定の問題に興味がある人や、その有識者)が少ないので、東京のように「いち企業が公開したサービス」や「いち新技術」に対する突っ込んだ勉強会は成立しにくいのでは? IT 勉強会カレンダー で東京ではどんなことが行われているかあたりを参照。(てか実質的には中の人と話さなければ、かつ「中の人と話して良いよ」と親分と話を付けれるコネがなければ成り立たないと思うので、中の人が居ない地方では成立しない)
  • 特にIT関係の勉強会では、ビデオキャストされたり、勉強会のまとめがブログ記事として流れるので、よほど突っ込んだ話か、コネクション目的でなければ、勉強会そのものに参加する必要性は低いのでは? (特にRubyの勉強会などではチャット経由で遠隔地から質問できたりするし)
  • 突っ込んだ勉強会に参加する必要がある人(ビジネス上の理由や本流に触れたい人)ならば、東京まで行ってでも実際に参加してきた方がメリットは大きいのでは?(なので、地方ではこれの優先度が低くて良いのでは? もちろん開催できればそれに超したことはないけど)
  • 地方ではむしろ、「参加者間の横のつながりや情報共有・雑談(ある程度自立できる技術力を有する人に多い?)」とか「勉強方法や新しい世界への導入(特定分野について勉強したい初心者に多い?)」が主な目的になるのかなぁと思う。

たとえば、おいらの興味範囲として「Amazon EC2&S3&EBS」とか「集合知プログラミング」とか「Hadoop」があるけど、これは北海道では開催できない(開催できたとしても身内のみとか)だと思う。(という具合に諦めている)

地方における勉強会の問題点

Ruby札幌北海道WEBコンソーシアムの主催者からの話や、LOCALのサイトから鑑みるに、

  • 必要な会場設備(電源・無線LAN・スクリーンとプロジェクタなど)を備える施設が少ない。会場確保が大変
  • ビジネス的な理由抜きで協力してくれる企業(研究機関など)が少ない。これがあると会場やセッション内容に幅が出る気がする。
  • せっかく勉強会を開いても、それが参加者予備軍に知れ渡っていない(これは地方だけの問題ではないかも)
  • 日付決定、会場等確保、案内等の負担が大きい。 このへん参照
  • 懇親会の負担も大きいけど、これはイベント終了後に挙手で決めても良いのでは?(予約無しで呑もうなんて甘い? もしくはxx呑み部とかね)
  • 有識者を呼びたいけど予算が無い(招待のための交通費・宿泊費など)
  • 勉強会の意味合いから見ると、動画配信した方が何かと良い気がする(というか全ての勉強会は動画を配信して欲しい)けど、実際問題として機材が高額だったりノウハウが無ければ配信できない。うまくシェアする仕組みがあればいいんだけど…
  • コミュニティに貢献しようという人の絶対数が少ないので、成り行き任せでは運営に協力してくれる人が集まらず、結局コアメンバーの負担が増えて、勉強会が続かなくなる気がする。なので、地方では手伝ってもらうためのフローをあらかじめ盛り込んでおいては?
  • 上記全てを内包するけど、主催者側のコアメンバーに負荷が集中(労働力や金銭的)してしまっている。現状自腹&努力?
  • 全ての勉強会を知っているわけではないけど、「勉強会」というスタイルである以上、「提供側」と「甘受側w」に分かれると良いことがない気がする。やはり持ち寄り精神が大事じゃないかなぁ。営利目的じゃないんだし。

まとめると、「会場確保」「広報活動と参加者取りまとめ」「活動予算」あたりが問題になるのかな。

特に「時間があったらちょっと来てくださいよ」と簡単に呼べる東京と違って、地理的制約が大きい地方では、有識者を呼ぼうにもまずはカネになってしまう。(Ruby札幌は今までこの予算はどうしてきたんだろう?)

あと、一般的問題点として

  • 参加者のスキルや立場によって、勉強会に求めるモノが違う(かも)

があると思う。

地方の勉強会では、どうしてもマスの小ささから、勉強会が乱立できないので、広く浅くになってしまう気がする。

参加者のセグメント分け

たとえばRuby札幌を例にすると

スキルレベル

  • ruby初心者(主にRubyを使ってちょっとした業務ツールを作りたい人)
  • rails初心者(主にWebアプリを作りたい人)
  • 中上級者(作ろうと思えばRubyに限らずそこそこ何でも作れる人)

立場

  • ホビーユーザ
  • 仕事で使う人
  • 研究者(学生含む)

単純にかけ算の関係ではないけど、6セグメント以上あるのでは?

北海道WEBコンソーシアムだともっといろんな人が居ると思う。(プログラマ・デザイナ・営業・プロデューサー・経営者etc)

テーマ重要

全ての人に満足できる内容を用意するのは無理だと思うので、開催毎にテーマを決めて興味ある人に参加してもらうようにして、毎回初心者でも理解できるセッションと、マニアック(でも聞いていて面白い)セッションを盛り込めばいいのかなぁと思う。

ここ2年くらいで、札幌でも勉強会やイベントなどが増えてきたイメージ(実際には情報共有が出来てきたせいかもしれないけど)があって、さらに増える気もするけど、さすがに毎週勉強会に参加するのは辛いと思うので、あまり興味ない勉強会は参加しないという考えが出てくる。(今のところ、機会が少ないのでどんなものでも全て参加したいと思っている。はず)

そうなってきたとき、広く浅くであっても、参加したことに満足感を得るように、開催毎にある程度の方向付け(テーマ)が重要になってくると思う。

勉強会に何を求める?

たとえば、初心者は

  • プログラミング言語やアプリケーションの効率的な使い方(勉強の仕方)
  • またはそれによって広がる世界(今は仕組みを理解できなくても、xxを使えるようになると、こんな事ができるようになるよーとか)

に興味があるんだろうし、ある程度スキルがある人なら

  • 新技術に突っ込んだ話(特定企業の新サービス・WebAPIや流行ってきた新技術など)
  • 昔から存在するけどあまりなじみのない技術に突っ込んだ話(負荷分散、高可用化、仮想化、自然言語処理、全文検索、Linux運用方法、apacheやpostfixなどのデーモンなどとの絡ませ方などなど)
  • 同じ分野に興味を持つ人(またはビジネスに繋がりそうな人)と知り合いになる

に興味があるんだと思う。この理論で言えば、Ruby札幌のコアメンバーはRubyの使い方に対して長けている(裏を返せば飽き始めている)ので、純粋にRuby関連の技術ではなく、Rubyと絡めることが可能な「Ruby以外」の技術の方が興味あるんだと思う。他の団体も然り。(や、言い過ぎか?)

※更新 論点から外れたところで誤解を招く表現があったため、削除します

参考として、おいらがRuby札幌や北海道Webコンソーシアムに何を求めるかと言うと、あまり具体的に思い浮かぶモノはないんだけど、強いて言うなら

  • 技術者間の友達を作る(コネ含む)
  • 特定技術に関する雑談がしたい(情報交換含む)
  • 自分がまだ知らない技術に対するとっかかり(刺激)が欲しい
  • 自分の興味がある分野を題材にした勉強会ならば、それに対して深く突っ込みたい

って感じかなぁ。

個人的にはフリーランサーしてるのでこういう機会じゃなければ酒を飲めないってのも大きいw

極端な話、勉強会じゃなくてもいいかな。開発集会とかその後の呑み会(+気の合う人と後日メールとかチャット)だけで十分なのかも。

特にオープンソース系の言語だと「いろんな技術のつなぎ役としての言語」という意味が大きいと思うので、Ruby中上級者全員を満足させるのは難しい気がする。逆にそういう人は(地方では)メタ的なものを求めてるんじゃないかなぁと思う。そういう意味では「開いて」「呑めれば」それでいいのかも。(そういう意味でRuby勉強会って難しいよなーとか)

勉強会におけるスタンス

勉強会やコミュニティに貢献することで、自分の生活が貧しくなるのは嫌なので、特定の人が疲れないようにうまく回すには以下のことが必要になると思う。

  • 参加者をお客さんとして扱わない。みんなで勉強会を成立させようというスタンスでやる。
  • 費用・労働力の分担をフローに盛り込む
  • 参加者を巻き込む。(あ、オープンソースみたいだね)

(野外のジンギスカンパーティに呼ばれたとき、最初から最後まで箸と皿抱えて座っている人は居ないのと同じ考え。北海道にはこの土壌はあるんじゃないでしょうか)

勉強会という特性から考えると、むしろこっちの方が都合の良い事が多い気がする。

具体的には、こんな感じ?

  • 必要経費として参加料を徴収する(300円ぐらい?)
  • 動画配信できてないコミュニティでも、動画配信できるようにする財源(労働力や機材代)として、サイト上から募金を受けては? (地理的問題や時間の都合で参加できない勉強会で、録画ビデオが存在すれば購入してでも見たいものはたくさんある。ちょっとの募金で金銭的問題はクリアできるなら、おいらは募金すると思う。で、募金と言えば PayPal 。でも実際どうなんだろう?使ったこと無いし。興味はある)
  • テーブルやイス、電源周りの用意や後片付けなどは参加者に手伝ってもらう(サイト告知時や終わった後などに声かけする)
  • 勉強会で何をしたいかを発言/集約する仕組みを作る。(具体的にはアンケートシステム?)
  • スピーカーやってみようかなぁって人も居ると思うので、ライトニングトークや公募スピーカーに向けての時間枠を確保し、Web上などで常時募集する。
  • USTREAM を使ったリアルタイム中継や、その後のニコニコへのアップロードとかは、興味のある人を募って手伝ってもらう(ちなみにおいらは興味がある)
  • 懇親会は参加者主導にする。好きに行けと。ただし、行きたい人で固まって行こうと。(勉強会の後に親睦会があること自体は告知し、店の予約などはしないが、各自行くかどうかは心に決めて来いと。で勉強会の締めで挙手。10人くらいなら入れるでしょ? おいら呑みたいw)
  • 主催者側の肉体的・経済的負担を目に見えるようにする。たとえば、準備するためのタイムテーブルを公開したり、勉強会を開催するために協力してくれた人や、費用(有識者を招いたときの費用も含む)をまとめて、こんなに大変なんだからちょっとで良いから手伝って風に協力を仰ぐ。(そこまでしなくても実情がわかれば手伝ってくれるかも。Webコンの主催者は「部活動」という表現をしていた。的確な表現だと思う)
  • 以上をいきなりやれと言われても出来ない(参加者が戸惑う)と思うので、まずは流れを作る。

※北海道Webコンソーシアムは毎回参加料として500円(会員は300円)取ってますが、参加者側としてもあまり苦にはなってないようです。(会場費に使ってますとアナウンスがあるため)

※ただ、お金を取る以上Web上などで会計報告は必要かも知れません

逆に、主催者側で主導すべきは

  • 会場確保
  • イベント内容や日時を決める
  • スピーカー(主に有識者)への根回し・招待・調整(これが一番疲れるんだろうけど、これはコネが必要だからねぇ)
  • 会計

ぐらいで、あとは状況によってその場で協力者を募ってもいい気がする。

会場を押さえるノウハウの共有

これをうまく共有できると、開発集会とかSusukino.rb/.js/.mxml/.airとかが勢いで開ける気がする。

実際、Java絡みの勉強会を北海道で開きたいって声もあった気がする。

既存の勉強会のお手伝いも、しやすいかもね。

上記の通り、ある程度なんでも出来る人は、自分の興味範囲を深く突っ込みたいんだと思うので、適切なタイミングで一期一会的に単発の勉強会があってもいいんだと思う。(まぁ、前提として数人集まらないと話にならないので、声かけ出来るぐらいのコネ+開けた広報システムが無いとダメだろうけど)

コンテンツマッチ広告業界について勉強した | IDEA*IDEA あたり参照

要点

  • 20人以上入れて、机と椅子があって、電源が取れるところ(ここまで必須)
  • 無線LANが使えるところ
  • プロジェクターとスクリーンが使えるところ
  • あまり高額ではないところ(多少なら割り勘でも負担にならない)

検討すべき他の事項

  • 会場はどこかの会社の会議室などを使えないか?(その方が機材が揃いやすい?)
  • 札幌駅脇の紀伊国屋の上の小樽商科大学のフロアを使わせてもらえないか?(大学の施設は何かと使いやすい。ただし大学の職員による責任者が必要。パイプ求む)
  • 条件を満たす施設はあるけど予算がないということであれば、道や市役所などから補助はもらえないか?(NPO法人化必要?)
  • 交通の便はどうか?
  • 近くに飲み屋街はあるか?

行政からの補助制度

行政からの補助とか言うと「えーメンドー」とか聞こえてきそうだけど、簡単なら申し込めばいいし、面倒ならスルーで良いと思う。(そこまで本格的に困っているわけでもないだろうし)

予算と広報に関しては、行政の力を借りるのが良い気がするので、補助してくれる制度があるのかどうか調べてみた。

受け入れ体制はありそう。ただ、よくわからんので明日にでも個人的に市役所・道庁へダイブしてくる。(勢い大事。相手してくれるかなぁ?)

質問事項のメモ

  • 上記設備を備えた会場はあるか?
  • 行政から経済的補助は受けれるか? またそれによって行政側からの干渉はあるのか? 受けれるとしたら条件は?
  • 広報活動を行う上で、定期発行物やホームページなどに載せてもらうことはできるか?
  • 特定団体の代表ではなく、いち個人として、実現可能性や具体的にどうすりゃいいの?って部分を聞いてきて、叩き台にする。

個人的にはLOCALで受けて、その下に各コミュニティがついて予算をもらう&ノウハウ共有ってのがいい気がする。

ただ、実際補助を受けるとなると色々関係者が動かなきゃならないんだろうし、おいら的にも本気で推しているわけでもないので、さらっと調べて叩き台になればそれでいいかなぁと思っているだけ。役所対応されるとムカッとくるので、明日には「あんなのダメだ」と言い切るかも知れませんw

広報活動

やっぱり参加者(今回は自分の興味に合わないからやーめたーと言ってる人含む)は多い方が面白い。(その分大変だろうけど)

特定団体だけ(縦割り)ではなく、特定地域で行われるイベント全て(横割り?)を集約して、集約したモノをみんなに使ってもらうのが便利だと思う。

これは実質IT 勉強会カレンダー でいい気がする。

ただ、たくさん登録されてて見にくいのでIT 勉強会カレンダー検索 (能動的に絞り込み)、またはこのスクリプトの様なgoogleカレンダーをフィルタリングするプロキシ(のようなもの)を経由して、北海道絡みだけのイベントカレンダーを公開(受動的に絞り込み)して使ってもらうのが良いかも。誰かサーバ資源余っている人設置してみてください。(Herokuでやろうとしたらrobots.txtが邪魔してダメだった。現状ではプロキシ的なものを経由させなければ、googleカレンダーだけではフィルタリング・自動同期できない)

あと、勉強会に参加するような人が見てるかどうかわからないけど、市役所や道庁が出している広報や、道庁・札幌市のHPに勉強会の情報を載せてもらうとかすれば、裾野は広がる気がする。(リンク先が上記特定地域版googleカレンダーになっているのが理想)

お、忘れてた。おいら北海道のIT関係イベントをまとめるコミュニティ(と言えるのか? トラコミュって)を作ったんだった。現時点では意味がないけど、みんなが使ってくれると意味のあるモノになる気がする。(でもマジメに広めようという気はない)

あと、人が集まるであろう所にポスター(までは行かなくても、告知できるもの)を貼るとか、特定スペース占有可能な掲示板的なものを使わせてもらう事って出来ないのかなぁ。たぶん、参加者予備軍(IT関係の会社などに勤めている人とかとか)の大半は、勉強会があること自体を知らないと思う。

知っていて来ないのは良いとして、知らなかったから来ない(知ってたら来てたのに)ってのはとてももったいない気がする。

個人的意見

  • みんなが楽しめればそれでいいのでは? (学問的にストイックな内容が含まれてもいいけど、それが主体だと辛いのでは? 意味が無くてもそれが楽しいならいいのでは? OSCでのマラカスコントローラーのように)
  • かつ、主催者側も自分が楽しければそれで良いのでは? (あまり参加者の顔色を見ずに、自分の興味範囲を好きなようにしゃべれば良いのでは? おいらなら、みんなのためとか、地域のためとか言ってると、たぶん疲れて嫌になる)
  • 基本的に勉強会に参加するだけで楽しいと思うんだけど、主催者側だけが肉体的・経済的に辛いとうまく回らないと思うので、コミュニティ全体として回るような工夫が早急に必要では?(とりあえず受け入れ準備だけでも整えては?)
  • 「自分は初心者なので勉強会に参加することで勉強したい」と言う人が多い印象だけど、実際には刺激を受けてモチベーションが向上するぐらいしか、効果がないように思う(そりゃそうだ)。スキルを上げたいなら、ちゃんとまとまっている書籍なりサイトを読んで、ニュースを追って、かつ自分で何かを作り上げてみないとスキルアップはしないと思うから。この「勉強方法を伝える」という意味では、勉強会の中でセッションがあっても良いとは思うけど、最終的にはWeb上にまとまっていた方が使い勝手が良いと思う。
  • 逆に自分で勉強してみて、どうもうまくいかない時があると思うので、そんな時に気軽に聞ける場所(SkypeのオープンチャットやIRC、もしくは開発集会)があれば理想かも。現状こういう意味ではあまりうまく機能してない気がする。
  • なーんで、プレゼン資料をネット上で公開しない人がいるんだろうねぇ。特定のイベントでしか話さないことに意味がある(金を取ってるとか)とか、その一時期だけしか意味がない(あとは著作権上問題がある)ならわかるけど、ノウハウの固まりみたいなプレゼン資料(パワポとかにまとまっているやつ)を、サイト上で広く公開しない理由がよくわからない。なんの為にプレゼンしたの?みたいな。
  • イベントを開くためのノウハウや支援団体(北海道ならLOCAL?)が広く公開・認知されている状態ならば、ちょっと何かやってみようかなぁという人が出てくると思うし、既存の団体(Ruby札幌やWebコン)のイベント内のセッションや、分会となってもいい気がする。「時間だけ確保しといたから好きに使って」みたいな。(主催者側があれこれ考えて疲れちゃうよりよっぽどいい気がする)
  • と、いう意味でもっとLOCALが強権と金握って、協力するからどんどん訪ねてきなさいはっはっはーぐらい言っても良いと思う。(現状Webコンとかは未参加だよね)
  • 悪影響がないなら、NPO法人化してでも行政から補助を受けた方が(主催者・参加者共に)良いと思う。もっと有名人の話を「北海道で」聞きたいよねぇ。

さて、巻き込もう

おいらはどのコミュニティの運営側の人でもなく、内情や今までの経過を知らないので、上記のようにはならない可能性は十分にあるのですが、まぁ、どうせ外野なので言うだけ言ってもいいだろうとw (徹夜で書いたのであまり現実的ではない話もあるし)

企業の力をもっと使った方がいいとか、カネカネ言うなとか、いろんな意見があると思うので、トラックバックなりコメントなり、電話や呑み会で仲間と話してみてください。

んで、積極的に勉強会に参加してみてください。

おいらはとりあえず、LOCALのMLに参加して、道庁と市役所に行ってこよう。

しまった、増田で書いた方が話題性があったか?!


2008年8月23日土曜日

RubyOnRailsの設計手法もレールに乗せよう

「Ruby on Rails によるシステム開発をモデリングで効率的に行う」連載記事を書いた - Akasata's Page(あかさたのページ)

という記事を見つけまして、これが自分の考えとピッタリだったのでご紹介。

経緯

以前においらはmasuidrive on rails - アジャイルな環境作り - そんなに急いでどこへ行く を見て、railsって書き始めたら便利な機能がたくさんあるから早いんだけど、それ以外の部分(デプロイとか設計とか)はrailsはノータッチなんだなぁと思ってました。

資料から見えるmasuidriveさん的な答えは、

  • rails-create-svnなどのrails環境セットアップツール
  • capistranoと連動したapacheのconfジェネレータ(最近はEC2上で動いている模様)

のようで、おいら的な答えは

  • rocketstarter(rails-create-svnと同じ範囲をサポート)
  • sqld4r(WWW SQLDesignerのデータファイルからマイグレーションとモデルの関連付けを生成)
  • adminpage_scaffold_generator(rails標準のgeneratorの見た目だけを本番で使えるレベルのモノに置き換え。controllerやviewは書き換えて使う前提)

でした。

これで思い立ったときにコーディングを始めることは出来るけど、でもやっぱり、ある程度の規模のシステムなら先にER図を書いておきたいし、ある程度レイアウトや機能をモックを使って煮詰めて関係者の合意を得てから、本格的なコーディングに入りたいです。

でも結局、rails用に整備された設計を支援するツール類は無い状態でした。

また、rubyやrailsの強みであるgemやrailsのプラグイン をうまく使うと、作業効率がとても向上するなとは思っていましたが、日本語のサイトでは情報が集約されているところは少なく、結局は使い方を覚えるのに1つ1つ試してみるしかない状況でした。これは非常に時間がかかりました。(プラグインの性質上、どこで公開されているかもまとまっていない状況なので)

railsの設計手法もレールに乗せる

おいらはPHPを使ったシステムで設計手法の「せ」の字ぐらいは知ってるつもりでしたが、railsぐらい作り方が決まっているモノなら設計手法も決まり切っていて良いんじゃないか、と思っていたところでRuby on Rails によるシステム開発をモデリングで効率的に行うを読みました。

あーそーそー、これこれ。という感じで読んだ瞬 間から全肯定でした。

まず読むべきモノ

さらっと上記の概要をまとめると

  1. 5W1Hを明確にし、作ろうとしているアプリケーションの存在意義を洗い出す。これはユースケースモデリングにて行う。
  2. 必要な機能とその実装方法を検討する。これはフィーチャモデリングにて行う。
  3. データ構造を検討する。普通railsはデータベースを使うので、これはER図にて行う。

となり、図にすると

rails_design

になるんですが、 今までにおいらが用意したモノを使うと、

rails_design_flow

てな感じで、実装方面は結構網羅できてました。これはもうrocketstarterとsqld4rに任せて、細部調整ぐらいで良いでしょう。

なので、ここではモデリング方面を中心に、自分で作業してて思ったことを交えてまとめてみます。

大事なこと

便宜上順序立てて説明してますが、実際にはほぼ同時進行的に設計を進めることが多いです。特にフィーチャモデリングとモック作成とER図作成は。

たぶんそれでいいんです。設計って全体を俯瞰しながら細部を詰めていく必要があるので。

ユースケースモデリング

これはユースケース図で「誰が」「どこで」「何をするか」をまとめ、ユースケース記述でさらに「いつ(フローの順番を明記)」「なぜ(ユーザ行動の動機)」「どうやって(作業の詳細を明記)」することで、このシステムに求められていることは何で、どういう方針を持って設計に当たるか、を自分(ないしチームメンバー)が理解するために作ります。

実際書いてみればわかりますが、結構単調な作業で、前に進んだ感が少なく、面白みには欠けるかも知れません。

ただ、昨今のペルソナを使ったユーザ中心設計はコレを具体的に外さず煮詰めるときに使う手法の一つですし、そもそもサービスが流行るかどうか、極端に言うとサービスの存在意義はココでいいところを押さえられたかどうかによる気がします。

よって、一番時間をかけるべきはここなのかなぁという感じです。既に競合サービスがある場合は特に。

ユースケース図を描くツールとしては、当初Web上に最新状態のドキュメントが置ける点でKodougu がいいかなと思ったんですが、ちょっと完成度の低さが目立った(重なりの順番変更さえできたなかった。や、使い方がわかってないだけかも知れないけど)ので、netbeansのUML作図プラグインで良いかと思っています。どうせコーディングには使うし。あまり良いツールだとは思ってないけど。

ユースケース記述はテキストファイル、または(windowsなら)iEditのようなアウトラインプロセッサでしょうか。Mac用はいいのがないんだよなぁ。テキストでいっかぁ。

フィーチャモデリング

これは聞いたことが無くて、実作業ではやったことも無かったんだけど、要は必要とされる機能を列記し、それをどうやって実装するかをまとめることかな。

Railsの場合はプラグインやGemが豊富なので、うまく使うと一気に効率が上がる。逆に言うと、プラグインをうまく使えるように必要とされる機能側をうまく調整するために必要な図かな。

これを描くのはマインドマップがちょうどいい気がする。オススメはmind42.comかな。

ER図とモック

設計として必要なのはER図だけで良いのかも知れないけど、実際には関係者との摺り合わせ、必要な項目を洗い出すためにモックを作る必要があると思う。

この作業を今まではExcel+生HTML(もしくはパワーポイント)で行ってたんだけど、ExcelでERを描くと修正が入ったときに面倒だし、考えると言うより清書的な意味合いが強くなる気がするし、生HTML描いちゃうとなにげに細かいところまで描かなきゃいけない気がして、モックを作るのに時間がかかる。

で、これをWWW SQL DesignerMockupsに変えてみたら非常に効率が上がったので、以後コレばっかり使ってる。

北から南や西を見て思うこと: Balsamiq Mockupsを使ってみた(ペーパープロトタイピング風モックを作るツール)

Balsamiq Mockups Home | Balsamiq

WWW SQL Designer (ER作成)

ER図の作図ツールは結構種類があって、たとえばDBDesignerとか MySQL Workbenchがありますが、以下の点で気に入って使ってます。

メリット

  • 外部キー(FK)と主キー(PK)が線で結ばれるので、テーブル同士を結ぶような表現方法より、関係が明瞭。特にテーブル内で自己参照するような構造になっている場合や、ARの制約の外(FK側の絡む名がテーブル名_idでは無い場合など)に見やすい。
  • データベースの種類に依存しない(ただしSQLDesigner 1.0系の話ね)
  • sqld4rを使うと、ER→migration→関係付与まで一気に終わる
  • 無料。かつシンプル。
  • 基本Webアプリだからネットワークがないところでは使えないが、ローカルにXAMPのような環境があればどこでも使える。Macならファイル配置するだけで使える。
  • データ形式がXMLなのでsubversionなどでバージョン管理すればdiffで差分が見える。

デメリット

  • テーブル同士の関係が、1:1なのか、1:多なのかが表現できない。まぁ、普通は1:多の方が多いけど。(sqld4rだとコメントを元に判断しようかなと思っている)
  • ERの保存が面倒。特にsubversionなどでバージョン管理したいならWWW SQLDesignerからデータXMLをコピペでエディタに張って、そこからファイルに保存しないとならない。読み出し時は逆の動作が必要なのでもっと面倒。

まぁ、テーブル同士じゃなく、カラム同士が結線されるのが大きいです。

落とし穴

フィーチャモデリングをするには、「Gemやプラグインにはどういう種類があって、どんな時にどれを使うべきで、データベース上にはどういうものを用意しておく必要がある」のようなものをあらかじめ把握しておく必要があるんだけど、これをうまくまとめてあるサイトが皆無。

プラグインならRuby on Rails プラグイン まとめ wiki とか英語アレルギー無ければRuby on Rails Plugins - Agile Web Development あたりは結構いい線いってるんだけど、Gemに関しては全滅。RubyForge自体の検索機能も腐ってる。

Gemに関しては、今まとめサイトを構想中だし、プラグインに関しては上記2つでよく使うモノは押さえてあると思うので、あとはググってみてコツコツやるしかないね。

で、実践

上でちらっと触れたGemの情報を集約するサイト構想ですが、オープンソースにする予定なので、ついでだから上記設計手法でチュートリアル風にまとめてみようかなと思っています。

ちょっと妄想が妄想を呼んで機能が膨れあがりそうなのと、仕事が忙しくなりそうなので、そのうちあがると思って気長に待っててください。

2008年8月22日金曜日

okyuu.comのOpenIDでのログインがSxipperからしづらい件について

OpenIDでの認証にかんして 質問 [okyuu.com] へのコメントとして書いていたら、とても長くなってしまったのでブログのエントリーとしました。(Q&Aにも記事をピックアップできればいいのにね。文面の長さや画像などに制限無いから説明しやすいと思うんだけど)

おいらお灸のIDを取るときにOpenID使ったんだけど、「OpenIDのURLを入力するんじゃなくて、ユーザIDだけ入力させるのはわかりづらい、せめてフォーマットを示せ」って文句言ったら、次の日には直ってたんで、スタッフの対応はすごくいいイメージです。(←ちょっと前まで「http://USER_ID.blogspot.com/」みたいなガイドが無かった)

プログラマ向けのサイトで、こういう姿勢って大事ですよね。

で、OpenIDを使ったスマートなログインの仕方(with Sxipper編)ですが、たぶんこの問題って、お灸だけの話じゃなくて、一般的な問題ですよね。たしかに身元保証(てな程各OpenIDプロバイダがしっかりしてるとも思えないけど)したければ、ホワイトリスト法になるんでしょうし、まだ技術としてこなれてないからパターンが確立してないんでしょうし。

自分もOpenID使おうと思っている一人として、解決策無いかなーと思って、解決案を何個か考えてみました。

最終的には現状のokyuu.comのインターフェイスが云々じゃなくて、自分ならこう実装するという観点でまとめます。

何を問題とするのか

まず、現状の問題点ですが、

・Sxipperでは自動ログインできないにもかかわらず、ログインしない限りリクエスト毎にポップアップが表示されて非常にウザい

の一言に尽きると思います。

これは「もうSxipperが無いと生きていけない」的にSxipperに依存している人にしてみれば、結構致命的な問題です。Sxipperを使ってログインが出来ないだけでなく、もっと悪いことにSxipperが邪魔でしょうがないので。サイトに魅力がないなら、去ってしまうユーザが居るであろうぐらいの深刻さです。

okyuu.com with Sxipper

でも、おそらく、IDを毎回タイプする人にとっては問題ないと思うんです。

だったら、Sxipperに特化した抜け道を造っておけばいいのかなと。

OpenIDの動作原理

あまり詳しくないんだけど、このあたりの実装(OpenID 1.0)になってると勝手に判断。(OpenID2.0も基本は同じなのかな)

あなたのサイトをOpenID対応にしている2行の意味 − @IT

ちょっと直せば済むかもね案

現状OpenIDプロバイダ選択用ドロップダウンを選んだら、モーダルっぽいウインドウ(と表現すべき?)にユーザIDの入力を求められるんだけど、この時もSxipperは反応してくれない。JavaScriptで制御してるっぽいので、HTML的にはformとかが無いからかな?

ここさえクリアできれば、Sxipperユーザはキーをタイプする必要が無くなるんだけど…でも、そもそもOpenIDプロバイダ選択用ドロップダウンを選択するのが面倒だな…(自堕落)

(あと、Sxipper対策をするしないにかかわらず、ユーザ名打ち込んでEnter叩いたらOKボタンが反応して欲しい)

現状をなるべく崩さない案

Sxipperの動作原理を把握してないので、脳内ベースですが、きっと原理的には入力項目(inputとform)のname属性なりid属性をキーに、その内容を記録/再生しているんだと思うので、OpenIDプロバイダをセレクトボックスから選択するのではなく、特定文字列を入力させて選択させるのはどうでしょう?(これだとSxipperでもらくちん)

具体的には「optionタグのvalue値見合いの文字列」を直接入力するためのテキストボックスを用意するとか。

問題は、Sxipperを使ってない人にとっては逆に使いづらくなるので、両立ができない点ですが、

https://okyuu.com/ja/login

のようなログイン専用ページがあるなら、Sxipper用のインターフェイスがあってもいいのかなぁと思う次第です。

現実的な線は、今のOpenIDプロバイダ選択用ドロップダウンと、OpenIDプロバイダ名+ユーザIDを入力させるテキストボックスを併記するような感じかなぁ。これだと非Sxipperユーザでもあまり不便ではないと思います。

そもそも案

OpenIDプロバイダ選択用ドロップダウンを廃して、やっぱりOpenIDのURI全てをを入力してもらい、OpenIDプロバイダにリダイレクトする前に正規表現で検査するなどして、マズければ普通通りエラーを返すってのが、ベーシックなのかなぁという案。

OpenIDプロバイダ名+ユーザIDを入力させるテキストボックスを併記よりは、こちらの方が一般的でシンプルかも。

でも、タイプ量が増えるからSxipper使ってない人には不便になるか。

現状のインターフェイス+OpenIDのURI入力ボックス併記が良い?

それに、検査するためのお灸側のコード変更量も増えるね。

ぐだぐだになってきたのでそろそろまとめる

結論から言うと、自分ならこういうインターフェイスにする。

Skitch.com + Skitch = fast and fun screen capture and image sharing.

どこが良いのかopenid interface

  • テキストボックスを基本にしつつも、OpenIDプロバイダを選択してユーザ名だけ入力するようなインターフェイスも備えているので、ユーザ名だけをタイプしたい人も、ブラウザ任せにしたい人も救われる
  • このサービス、英語メインなんだけど、このOpenIDのログインページだけは日本語表示されている。・・・ってことは、どこかで出しているライブラリを使っている(おいらのスキルでは追えなかった)んじゃないかな?→みんなで使ってみんなではっぴー
  • サーバサイドでは単純にURIを正規表現でバリデートできるので、ホワイトリスト方式で怪しいOpenIDプロバイダを弾ける。(ただし、弾いて意味があるの?とは思う) これは(今URIをバリデートしているならば)、クライアント側のインターフェイスがどうであろうと、サーバサイド側のコードを変更する必要がないことを指す。

okyuuに合わせて考えると

  • 現状でもoptionのvalueの値はバリデートしてるんだろうから、OpenIDのURIを正規表現を使ってホワイトリスト方式ではじくのも、さほど手間にはならないのでは?
  • https://okyuu.com/ja/loginでは、完全に今のドロップダウンを廃して置き換える。
  • トップページは、現状では価格.comIDがデフォルトで、OpenIDを入力するには一度クリックしなければならないため、やはりポップアップがうざく感じるっぽい。(未確認) なので、価格.comIDの下にOpenIDの入力ボックスを表示し、切り替えを廃しては?(これでSxipperがちゃんと動くかは未確認)

のが理想なのかなぁと思った。

ただ、仕組みを理解しないでズカズカ言ってるので、ホントは実現できない理由があるのかも知れませんが、少数派であるFireFox3 with Sxipperのいちユーザ意見として。

で、最終的にOpenIDのログインインターフェイスはどうまとまっていくのか?

とりあえずokyuu.com でこのエントリのタイトルで検索すると、今後どうなったかは追えると思う。

最初に言ったとおり、これはokyuu.comだけの問題じゃなくて、一般的にどういうインターフェイスが都合がよいかという話だから、okyuuスタッフが出した解と、おいらの理想的な形は違うかも知れないけど、このエントリーから派生した議論(もしくはみんな興味なくて完全スルー)とその結末は、一つのバッドノウハウと一つの回答ぐらいの意味はあると思う。

興味ある人は追ってみてください。


2008年8月21日木曜日

be動詞の疑問形を作れなかった男がiKnow!を効率的に学習する方法

何事も効率的に勉強するための方法(学習法)があり、おいらは英語上達完全マップの通りにやってみようと思っています。(Amazonとかブログの評判もいいですし)

ただ、英語上達完全マップの勉強法は、オーソドックスというか、iKnow!とかiPodなどの一般に広まったモノや、自分の興味のある海外ブログ・ニュースなどをうまく使って「楽しみながら生活にとけ込んで勉強する」というスタイルではないため、英語上達完全マップのエッセンスを取り出してうまくそれに乗りながら、アレンジしていく必要があるかなぁと思っています。

ただ、英語に関して相当ダメダメにおいらは、音読パッケージ とか瞬間英作文 ができない(10%ぐらい進んだところでわからなくなる)ので、これができるようになるのでの学習を、「中学英語の参考書」と「iKnow」に絞ることにしました。(英語上達完全マップのケース2.学生時代英語が苦手だった人は、おいらのためのケースですw)

なお、以下で言うiKnow!とはサービス全体を指すiKnow!ではなく、iKnow!・Dictation・BrainSpeedというアプリ中のiKnow!のことです。

DictationとBrainSpeedについては、イマイチ良い学習の流れが掴めてないので、そのうちまとめます。(Dictationは1日1回、BrainSpeedは暇なときに時間つぶしにやると良さそうですが…)

相当ダメダメな人が最初にすべき事

まずは文法の理解です。(きっぱり)

中学英語レベルの文法を参考書を使って押さえます。

まぁ、たとえ一時でも、学校で習って覚えていた瞬間はあるはずで、正直必要性に駆られて覚えようとしている今の状況で参考書を開けば「あ、結構思っていたより楽かも」と思えると思います。また、通常の会話で使われる文法の大半は、この中学英語レベルらしいので、実用性も高そうです。

単語知識やコロケーションはiKnowが教えてくれるけど、文法は教えてくれないし、文法知識がなければiKnowでの学習効果が半減すると思うので、さらっと一通り文法をおさらいしましょう。たぶんiKnowの初期レッスンであれば、中学文法程度で十分です。

iKnowのレッスン進行を把握する

iKnowのレッスンは以下のように進行します。

同じ単語でも、最初に出題されるときは1→2→3→5となり、終盤では3→6となります。

また、間違えると1段階下がって復習するようです。

  1. 初めて学習する単語の説明と例文(単語とその日本語訳、例文x2またはx1、スペルタイピングが1画面表示されるモノ)
  2. 英単語が表示される→日本語訳の5択(正解がないときはその他)→正解すればその英単語を含む英文と和訳が表示される
  3. 英単語が表示される→日本語訳の10択(必ず正解を含む)→正解すればその英単語を含む英文と和訳が表示される
  4. 日本語が表示される→英単語の5択(正解がないときはその他)→正解すればその英単語を含む英文と和訳が表示される
  5. 英文音声と歯抜け例文が表示される→歯抜けをタイピング→正解すればその正しい例文と和訳が表示される
  6. 日本語が表示される→その英単語のタイピング→正解すればその和訳が表示される

まぁ、実際にやってる人なら知ってることだし、だから何?って話なんですが、この進行方法はノウハウに裏打ちされていると思われる(復習タイミングや進行速度が自動調節されるあたり、そう感じられる)のですが、慣れてくると問題を解くことだけに集中してしまい、あまり覚えることに意識を向けなくなるので、レッスンが終わってもすぐ忘れてしまって、あまり学習効果がないように感じられてしまいます。

効率的に学習するポイント

これは次の点に気をつければ回避できそうです。

  • 単語を覚える事と文脈を感じる事に集中する。それ以外に意識を向けない
  • 意識的に連想記憶を使う
  • 音声が再生されたら、そのまま口に出してリピートする
  • 例文が表示されたら、そのまま訳してみる
  • 選択肢が表示される前に、答えをイメージしておく
  • 「1.初めて学習する単語の説明と例文」に時間をかける

どういうことか、もうちょっと突っ込んでみましょう。

単語を覚える事と文脈を感じる事に集中する。それ以外に意識を向けない

大半の動作はキーボードで操作可能。10択の選択時や、問題文を聞いた後などは、いちいちマウスをスライドさせてボタンを押すより、方向キーで選択してEnterキーを叩いた方が早い。問題に集中できる。

意識的に連想記憶を使う

すべての例文に、それを連想させるような画像が付いている。(連想記憶と理解へのヒント、使い分けへのヒント) これは例文の使い方やニュアンスを理解する良いヒントとなる。

音声が再生されたら、そのまま口に出してリピートする

英文音声が流れてきたら、とりあえずリピーティングする。(周りの状況から音に出せないなら頭の中でリピーティングする) リスニングとスピーキング(主に発音)の練習という意味もあるけど、音読パッケージにもあるけど、覚えるための発声というのは連想記憶的にもいいみたい。iKnowの場合、単語が定着するまで何度も再生されるので、何十回と聞いて、発声することになると思う。(それでも音読パッケージより回数は少ないはず)

例文が表示されたら、そのまま訳してみる

「正解すればその英単語を含む英文と和訳が表示される」これ大事。容易に理解できても和訳を見ないようにして英文から和文を考えて、口に出してみる(もしくは頭の中で言う)。

たとえば、音声と例文が同時に表示されたら、リピートしてからすぐに訳してみるなど。

選択肢が表示される前に、答えをイメージしておく

「英単語が表示される」のタイミングでは、「意味がわかりますか?」「○はい」「△多分」「×いいえ」とあるように、ここで単語の意味を考えることを前提としている。「日本語訳の10択(必ず正解を含む)」画面で選択肢を見ながら考えるのではない。選択肢を見る前に、答えを思い描くのは記憶の定着に大きく貢献すると思うので、これは実践した方が良いと思う。(こういう使い方なので、「正解すればその英単語を含む英文と和訳が表示される」の時に最初から和訳が見えているのは邪魔。「初めて学習する単語の説明と例文」の時のように、最初は見えてないけど、ボタンを押せば和訳を見ることが出来るってのがちょうど良い。でもキーボードショートカットは付けて欲しいな>iKnowスタッフ)

知っている単語(すっと答えが出てきた単語)は基本的に答えるのみ。意識的に覚えようとしなくて良い。ただし、最初に出てきたときや間違えたとき、答えに詰まったときは一通りやる。知ってる単語ばかりなら10単語につき2分もかからないと思う。

また、この時さっと答えが出てこないようであれば、自分はその単語をしっかりと覚えられていないと判断できる。(完全に自分のモノになれば、さっと出てくる) この場合は、「その英単語を含む英文と和訳」をもう一度文法的+単語の意味を思い出しながら和訳してみる(正解できた場合)、もしくは「初めて学習する単語の説明と例文」をもう一度和訳してみる(間違えた場合) なので、基本的に時間切れとなることは無いはず。

「1.初めて学習する単語の説明と例文」に時間をかける

「初めて学習する単語の説明と例文」は重要。

まず一つ目のタブで英単語とその和訳が表示されるけど、これを覚えるのはもちろんのこと、今覚えているのは動詞なのか名詞なのかといった品詞もそれとなく覚えるようにしよう。じゃないと、動詞としてのnameと名詞としてのnameをごちゃ混ぜにして覚えてしまって、後で混乱しかねない。(学生時代のおいらがそうだった)

次に例文1タブと例文2タブ。タブを進めるのはTABキーを押すと便利(おいらキーボード操作派)。ここでも音声が流れたらリピートするんだけど、例文を見て単語の意味を思い出して、文法に注意しながら和訳してみる。ここでは新たに出た単語だけじゃなくて、例文に含まれる単語全てについてちゃんと考える。ただし、iKnowの例文は学習を追えた単語だけで構成されているとは限らないので、知らない単語が出てきてもあまり気にしない。ちなみに、タブを開くだけだと、英例文とその音声が再生されるだけで、和訳されたものは表示されないんだけど、タブの上のボタンを押すと和訳も表示される。たぶんこれも「最初は答えを見ないで和訳してみてね」という意味なんだと思う。(この和訳表示にもキーボードショートカットがあれば良いんだけど…)

最後のスペル練習タブは、単語のスペルを覚えるためのタブなんだけど、ブラインドタッチ出来る程度キーボードに慣れてないなら、逆に学習効率は悪いかも知れない。でも、単語を覚えるときに、書くという動作と共に覚えるのも、連想記憶的に良さそう。実際効率も良いみたいなので、タイピングが苦じゃないなら何度かタイプしてみると効率がよいと思う。

このように、「初めて学習する単語の説明と例文」にはじっくり時間をかけるので、新しいコースなどで新しい単語ばかりなら、10単語30分とかかかると思う。逆に、ある程度覚えた単語ばかりなら10単語2分ぐらいかな。

iKnowの場合、問題を間違えなければ、4回連続正解で定着したと見なす(25%up/回)ので、迷ったり自信がない単語は積極的に「1.初めて学習する単語の説明と例文」に戻ってきて覚え直す方がよいのかも。(じゃないと、定着したと見なされて再度出題されなくなる)

iKnowスタッフへ

iKnowはノウハウに裏打ちされた素晴らしいサービスだと思います。

楽しみながら空いた時間で効率的に学習できて、しかも無料。

Ruby on RailsとFlexというけっこう前衛的な技術を使っていて、アジャイル的な開発アプローチを取っていると記事にありましたね。(SoftwareDesignの2008/6号ぐらいでしたっけ?)

素晴らしい点が多いiKnowですが、個人的にはこの記事のような視点で、iKnowが考えるケーススタディ(高望みな人用・ダメダメな人用・旅行用の3パターンぐらい?)を詳細なチュートリアル風にまとめてもらえると、すごく嬉しいです。

こういう学習のノウハウ的なものがあって、このアプリを設計できたんだと思うので、効率的な勉強方法をチュートリアル風にまとめてもらえると嬉しいです。

2008年8月18日月曜日

okyuu.comって実は良いサービスかもしれない

okyuu.comというサービスを最近知ったので、使ったり投稿してみたのですが、これがなかなか良い感じだったのでご紹介。

なにが良いって、周りがみんなプログラマだって事ですよ。

趣旨的には、プログラムを作るに当たって必要なノウハウや、知っておいた方がよいニュースなどを、他の人に読んでもらうことを前提に集約する/集約し合うってサービスなんだけど、ニュースは他でも読めるとして、ノウハウって時系列的なものはあまり関係なく、特定分野にどんだけ深く突っ込めるかが勝負だから、ちゃんとカテゴリが整理されてて、周りがプログラマばっかりってのはかなり大きい。

要は、面白おかしい記事が好きな人や、デザイナ向けの記事、特定企業のマーケティング色が強い記事などがあまり入ってこないので、情報の純度が高い。(逆に言うと、ここだけ見てるとヤバイ)

しかも、今までにこういうサービスは無かった。(少なくともおいら知らない)

タグクラウドを見る限り、googleとrailsマンセーなのも、おいらにピッタリw

技術的におぉと思う点

記事投稿用のブックマークレットが提供されてるんだけど、ブックマークレットをぽんと押すと、(おそらく)その記事を意味解析して、適切と思われるカテゴリを最初から選んでおいてもらえる。って機能が付いてる。

これ、あまり外さないんで、そこそこいい精度持ってると思う。

あと、リンク先の記事のサムネイル取ったり、記事抽出機能が付いてたりかな。

この辺具体的にどうやってるのか、それこそノウハウ記事にしてくれないかなぁ。

でもイマイチな点も

惜しいのは、アクティブユーザやROMユーザと言ったユーザの絶対数が少なくて、せっかくのレーティングがあまり当てにならなかったり、盛り上がりそうな話題なのに突っ込みが少なかったりなど、イマイチ寂しい感じがするところ。

システムの作り方(記事の見せ方)も、投稿数が少ない今の状態に合わせてあるよね。

もうちょっと広告なり、メディアに露出して欲しいなぁ。(せっかく良いサービスなんだし)

改良アイデアなど

あと、ノウハウもある程度溜まってきてるんだろうけど、それをうまく検索する術が今のところ整備されてないようなので、リンク先と合わせた全文検索とか類似検索も含めた、洗い出し機能も充実して欲しいところだなぁ。

あとは、ログインさえしておけば、レーティングに自分の色をつけれるような機能も欲しいかなぁ。

たぶん、現状は投票者数×平均レートでランキングしてるんだろうけど、自分の興味のあるキーワードをMyページ的なところで指定しておけば、それに反応した記事は上位に出てくるようにするとかね。データの持ち方難しい気もするけど、技術者としては燃える題材だなぁ。

あと、カテゴリを降りていって、全部の記事を眺めてみようと思った時って、今のインターフェイスって使いづらいと思う。まぁ、記事のリンクを扱うサイトという性質上、あまり見やすくはならないんだろうけど。

あと、カテゴライズが適切じゃない(まぁ間違っていると言うより、いざ探そうとしたときに自分のイメージと違うカテゴライズがされている。記事そのものに多面性がある)場合があって、このカテゴリってどうよ?と思っても、直すのをためらうことがある。てかカテゴリ修正の機能はあるものの、間違っていると言い切れる場合の方が少ないのでは? だったら、多面性を重視して、複数カテゴリに所属できるようにしてしまってはどうだろう?

例として、検索ワードに「map reduce」と入れたときの記事は、全て違うカテゴリに入っていた。

今後に期待+みんなで盛り上げよう

でもでも、ユーザ数が増えてきて、記事の蓄積+有効なレーティングができてくると、これはプログラマにとってすごく便利なサイトになる気がする。とりあえずちょっと見てみたら?

2008年8月17日日曜日

低コストかつ確実にプログラマっぽくバックアップする方法

はい、釣れましたねw

一言で言えば、失ってはマズイデータ本体と、失ってもかまわないプログラムやアドインなどのリストファイルを圧縮し、Rubyを使ってAmazon S3に転送しておくだけなんですけどね。

ネタ元はコレ。

はじめてのAmazon EC2&S3 ~これからの新サービスの公開の形~:第2回 Amazon S3をバックアップストレージとして使おう|gihyo.jp … 技術評論社

まぁほぼパクリなんだけど、実際に使ってみてわかったのは、思った以上に便利だったって事。

今回は自分のPC(MacOS10.5)を対象にしてるけど、WindowsXPだろうが、Linuxサーバだろうがちゃんと動くし、一番低コストだと思う。

検証1:本当に低コストか?

うん、たぶん圧倒的に低コスト。

普通バックアップ先にはテープとかハードディスクを使うと思うんだけど、 Amazon EC2とS3を使ってみる(その1 費用比較検討編) でも比較しているように、S3のストレージ容量は非常に安い。

実際おいらの利用料は毎月100円以下だよ。(ちょっと計算してみればどのくらいの容量まで100円でバックアップできるかわかるよね)

自分でHDD買ってきてタイムマシーン経由で使うよりずっと安い。現在の空き容量を気にする必要もないし。(まぁ定期的に消した方が安くあがるけど)

サーバのバックアップとして使うなら、それこそトータルコストを100分の1とかに圧縮できるかもね。ハード高いから。

検証2:本当に確実?

んーまー、今のところrubyのスクリプトを起動しないとバックアップしてくれないから、確実かどうかは微妙だなぁ。

cronに登録しても良いけど、その時間にPCを起動しているかわかんないしね。

この点ではタイムマシーンに劣るかも知れない。(タイムマシーンでも無線でHDDを接続してないと忘れそうだけど)

その点、サーバのバックアップだと、負荷さえ気をつければいつでもバックアップできそう。費用ならLVMでスナップショット取ってもいいだろうし。

今のところ重要なファイルはtar.gzに圧縮して、この1ファイルだけ転送してるんだけど、今のところ圧縮失敗とか転送失敗は起きていない。(まぁ、可能性が無いわけではない)

まぁ手動起動してるんだから、プロンプトの結果を確認すればわかるし。

バックアップ先のストレージは天下のAmazonの分散ストレージなんだから、ストレージ上のデータがクラッシュすることは無いだろうし、毎回フルバックアップしてるようなもんだから、リストアも楽。

検証3:本当にセキュア?

うん、たぶんこれは本当。

S3との通信はRSA認証鍵を使ったssh経由(あれ? SSLクライアント認証じゃないよな? ちょと混乱)で行われるから、経路は暗号化されている。

普通のサーバより堅牢(そのへんのレンタルサーバだとssh/telnet/ftp/pop3は平文のパスワード認証でしょ?)だと思うよ。

検証4:使いやすい?

これも問題にならないと思うなぁ。

上記の通り、rubyのスクリプトを起動しなきゃならないのは、面倒といえば面倒だけど、起動スクリプトをアイコン化(Dockに登録するとか)しておけば、ちょっとトイレに立つ時にクリックするだけだし。

おいらのバックアップファイルは圧縮後300MBぐらいなんだけど、10分以内にバックアップは終わっているみたい。

検証5:でもデータ全部をバックアップ取ると何百GBもあるんだけど…

いやいや。それはバックアップ対象をちゃんと分類できていないのが原因だ。

おいらも250GBのHDDがほぼ一杯の状態で使ってるけど、過去のソースや素材絡みとかは変化しないから、DVDなりHDDにバックアップしておけば、S3に取る必要はない。(使ってないHDDぐらいあるでしょ。1年に1回ぐらいしかこんなのバックアップしないんだから)

iTuneの中に入れた音楽とか、エロ関係その他は失っても痛くないだろう。

アプリとかプラグインとかMacPorts(Mac用パッケージシステム。apacheとかmysqlはこれで入れる)については、何を入れていたかだけ覚えておけば、もしもの時に復旧はすぐにできる。(どうせすぐバージョンアップするし)

今回のバックアップスクリプトも、インストール済みアプリのリストとport installedの結果とgem listの結果をテキストファイルとして保存しているよ。

今作業中の案件に関する資料とかソース類が、一番失っちゃマズイもので、毎日変化するモノなので、これを最優先でバックアップすべきだけど、subversionなどでソース管理してるなら必要ないかもね。

…とかとかやってくと、圧縮すべきファイルって相当限られてくると思うんだ。

んで、圧縮しやすいように、1つのディレクトリツリーの下にバックアップ対象をまとめるようにしておく。まぁ、実際にはまとめきれないから、3つぐらいのディレクトリを指定することになるんだろうけど。

検証6:もしかして、プログラマっぽくって、Ruby使うから?

…そうだよ?

でも、カスタマイズも楽だし、結構いいと思う。

よしわかった、で? どうやって使うの?

ソース短いので載せちゃおう。

#!/usr/bin/env ruby
require 'rubygems'
require 'aws/s3'
require 'tempfile'

include AWS::S3
Base.establish_connection!(
    :access_key_id => 'アクセスキーをここに入れる',
    :secret_access_key => 'シークレットアクセスキーをここに入れる'
)
bucket_name = 'バックアップに使うバケット名をここに入れる'

# 再インストールする事で復旧可能だけど、何をインストールしていたか知りたい場合、
# ここにそのテキストを生成するコマンドを書く
list_target_commands = [
  'gem list',
  'port installed',
  'ls -a /Applications/',
]

# 上記コマンドの出力を保存するためのファイルパスを書く
installed_list_file = '/pass/to/your/installed_list_file.txt'

# バックアップ対象ディレクトリ/ファイルを書く
backup_target_directories_and_files = [
  '/Users/maimuzo/Documents',
  '/Users/maimuzo/Sources',
  'installed_list_file'
]

puts "backup started at " + Time.now.strftime("%Y/%m/%d %H:%M:%S")
timestamp = Time.now.strftime("%Y%m%d%H%M%S")
puts "Executing commands..."
File.open(installed_list_file, 'w') do |list_file|
  list_file.puts "This file was made at " + timestamp
  list_target_commands.each do |command|
    puts "$ " + command
    list_file.puts "$ " + command
    list_file.puts `#{command}`
  end
end

tempfile = Tempfile.open(bucket_name)
tempfile.close
tar_command = 'tar cfz ' + tempfile.path + ' ' + backup_target_directories_and_files.join(' ')
puts "Executing tar command..."
puts "$ " + tar_command
system tar_command 

puts "Saving to Amazon S3"
key = '%s.tar.gz' % timestamp
S3Object.store(key, tempfile.open, bucket_name)
puts "Backuped file to #{bucket_name}/#{key}"
puts "backup finished at " + Time.now.strftime("%Y/%m/%d %H:%M:%S")

でこれを起動するだけ。見通し良いからカスタマイズも簡単でしょ?

普通自分のPCなんてマメにバックアップしてる人はいないんだろうけど、これコピペして実行するだけで、かつ100円/月ぐらいで安心が買えるなら安いもんでしょ。バックアップ用市販ソフトとかいらないし。

下手に中途半端なリビジョンが出来ない分、subversionやgitより、自分のPCのバックアップ用としては、こちらの方が適しているかもね。

2008年8月16日土曜日

ぶっちゃけ、AIRってどうよ?

前回の記事からの続き。(あまり続いてないけど)

AIRに関する質問を出来る良い機会(北海道WEBコンFESTA2008)があるので、AIR絡みの思いをまとめてみようと思う。

前提

おいらAIRアプリは作ったことはありません。

Flexアプリなら作ったことはあって、ドキュメントなどもそれなりに読んでいるけど、Flexも完璧って感じじゃなくて、それなりって感じです。

AIRは作ってみたいと思って勉強しようとは思うんだけど、イマイチ使いどころがわからなくて、使ってない感じ。市販の書籍も手に取って見てみたけど、こんなんじゃ金は払えないよ、って感じ。

Adobe - ADOBE AIR コンテスト2008受賞作品 とか見ても、へーすごいねー、こんなことできるんだねー、でもなんでAIR?と思っちゃう。別の技術ベースの方が楽じゃないかい?とか。

たとえば、おいらが一番使っているAIRアプリはMockups なんだけど、これも別にAIRじゃなくてよくね?って思う。

やっぱりAIRじゃなきゃ出来ない優勢エリアってのが少ないんじゃないかなぁ。と思いつつ、もっと突っ込んで優勢エリアを見つけようというほど、勢いがある訳じゃない。そんな感じ。

AIR絡みの突っ込みどころをまとめてみた

まずAIRを使ってみて思うこと

  • 本格的な事や複雑なことには向かない。あくまでHTML+スクリプトの延長というイメージで、Web上で出来たことをクライアントサイドでもできるようにしたようなイメージ。
  • ちょっと本格的なことをやろうとすると、ケアンゴームのようなフレームワークを使いたくなるんだけど、デファクトスタンダードが無いし、小規模と大規模の中間で使うようなフレームワークも無いように思う。(大抵ケアンゴームだとおおげさ過ぎる)
  • メモリ管理甘くない? メモリ大食いだったり、よくCPUパワーをごっそり持って行かれる(まぁAIRアプリ作った人の責任もあるんだろうけど)
  • 勉強しようと思っても、あまり日本語の情報が無いように思える。特にAIR絡みの書籍についてはFlex本をちょっと書き直したって程度で、よさそうな本が無い。(まぁFlexの本もないんだが) 結局、どこを見るのが良い?
  • クライアントOSがWindowsの場合、Windowsネイティブアプリと比べて有利な点はどこ? Webアプリの技術やソースが使えるところだけ?
  • マイクロソフトのアップデート用技術なみに、自動アップデートができるような仕組みは無いのか?(おいらの知識では、Webページまで見に行って、アップデート可能なパッケージを再度ダウンロードして実行しなければならない。これは(手間としては多少楽なものの)OS上のアプリが少なくなってWebアプリが多くなった原因の一つだと思うんだけど、現状のままでは数年前に逆戻りになると思う。これでは本格的なAIRアプリは出てこないんじゃないかな。(過去に何度も突っ込まれてると思うので)良い方法があるのかも知れないけど)
  • まだ日本語処理が甘い感じ。入力ボックスにフォーカスは当たってACSIIは入力できるんだけど、マルチバイト(変換前のカナとか)は表示できず、変換も出来ない。でも、マルチバイト文字をペーストして入力することは出来るなど。(Macだけの問題なのかな? サイト上のFlashでもたまに起きるし)
  • リッチUIと実現できる技術としてみると、1年前ならFlexが圧倒的にリッチだったんだけど、今ならjQueryとかExtJSとかのAjaxライブラリ使っても(多少の差はあれど)おおよそ同程度のシステムが組めるんじゃない? だったらFlashとしての縛り(Flashの埋め込みエリア外基本的に触れないなど)がある分、Ajax極めた方が応用できそうじゃない?(とちょっとだけ思っている) これによりFlexの重要度が相対的に低下し、それにつられてAIRの重要度も(おいらの中では)下がってきた。

大半愚痴だな。

AIRの感想じゃなくて、Flexの感想も混じるけど、おいら的には同じ事かな。

ちょっと古いけど、たしかにこんな感じもする。

AS3/Flex2 を使い始めて約半年 - 8時40分が超えられない - subtech

質問も用意しておこう

  • Flashベースの場合、ちょっと複雑なことをしようとしたら、ブログラマは相当泣けるはず。せっかくAdobe(旧マクロメディア)純正で色々なことが出来るライブラリやサービスが出来てきたのに、プログラミング環境が悪いためプログラマ人口が増えない。だからFlexやそれを進化させたAIRが出てきたんだと思うけど、この予想は正しい?
  • 今のadobeさんの考え方だと、メディアやコンテンツの制御にはFlashを使って、複雑な事をしたいならFlexを使うという棲み分けだと思うけど、この棲み分けはずっと変わらない? どちらかに統一されるということはありえる?
  • Flexベースの場合、クライアント側のMVCがうまく分けれない。MXMLがviewというのは良いんだけど、controllerとmodelはどういう風に表現すべきなのかがいまいち。ツールというレベルではなく、ちゃんとある程度のアプリケーションを作ろうとした時に、特にイベントを自分で管理するのが非常に苦痛。これを回避する手助けをするのはフレームワークの役目だと思うのですが、ケアンゴームは大げさだし他のフレームワークもいまいちっぽい。主流がない。小規模〜大規模まで使えるものが見つからない。たぶんこの状況をAdobeさんは真っ先に感じて、ケアンゴームの開発者を抱き入れたと思うのですが、その後のアクションが続いていないように感じます。Adobeとしては「こういう風に書けば、もしくはこのフレームワークを使えば効率的に書ける」といったような指標はあるんでしょうか?
  • SQLiteなどのクライアントサイドDBへのアクセスは、現在非同期のみサポートしているようですが、これは同期しないと制御が非常に面倒です。たとえば、複数のテーブルに整合性を持ったデータを書き込んで、トランザクションも使いたい場合など。なんとかならないでしょうか?
  • AIRを勉強したい人が読むべきサイトや本は? Adobeさんの公式ドキュメントが一番って話もあるけど、ぶっちゃけ何がオススメ?
  • AIR絡みの今後のリリーススケジュールで、公表してもよいものは?
  • Adobeさんの考える、windowsネイティブアプリと、AIRアプリと、シルバーライトアプリの使い分けは?

AIRで作ると何が嬉しいのか?

てか、やろうと思えばAIR上で3Dグラフィックから音声合成までなんでもできるんだろうけど、技術の方向性として、どういう分野であれば使いやすいか、他の技術との使い分けとしてはどこか? という話なのかな。

自分の気持ちをぶっちゃけると、windows上だけで動けば良くて資源または表現的パフォーマンスが高い物を作りたければvisual studioで作るべきだと思うし、過去にVBなどで作っていた物をWebベースクライアントなどと絡ませるならAIRよりシルバーライトだと思うし、それ以外の分野でやっとどれで作るのがいい?という比較の土俵に上がると思っている。(MacやLinuxはすべてのエンドユーザまでリーチしないので考慮しない。この辺の人は不便なら自分で作るし)

じゃあ、AIR優勢なのはどのエリア?という話になるけど、比較的リッチな資源を持っているLinux上の業務系エリア(タッチパネルモノとか?)か、既にWeb上で動いているブラウザ(Ajax)+サーバサイド+DBの三層構造システムの、ブラウザ層をAIRに置き換えるエリアぐらいしかないんじゃないかなぁ。

AIRを使うときの大前提

Web上のサーバサイドプログラムやサーバサイドストレージをベースとして、そのフロントエンドをAIRにするような使い方じゃなければ、AIRである必要がないと思う。(特にサーバサイドサービスをHUBとしたクライアント同士のデータ同期は、他に競合技術がないぐらい優れていると思う)

たとえば、クライアントサイドで完結(クライアントアプリ同士で完結)するようなシステムの場合、AIRではなくC#.Net(とかそれぞれのOSのネイティブ)で作った方が良いと思う。

AIRを業務系(組み込み系?)で使う

最近の組み込み系はLinuxが増えてきているし、Atomなどの高性能低消費電力CPUも出てきているし、なにより要求が高度化してきているので、限られた用途ではいいんじゃないかと思う。

Linux上の組み込み系を考えると、普通コスト面から資源ミニマム+ストレージレスで組む方が多いと思うんだけど、AIRランタイムが動くようなスペックを持っているLinux系業務用マシンって限られているよね。プログラマがもうちょっと頑張ればもっとCPUとかメモリ押さえれるじゃん(もっと安価なマシンでいいじゃん)みたいな。

でも、今のタイミングならAIRも不可能じゃない。今ならSSD もあるしね。

このエリアでは新機能追加や仕様がコロコロ変わって、頻繁にアップデートが必要なもの(某笑顔動画視聴専用マシンとか?)に適しているかな。

特に表現力が高いから、ヒューマンインターフェイスとしてはいいんじゃないかと思う。

資源管理をもうちょっとまじめにやらないとダメだとは思うけど。

AIRをWebシステムのフロントエンド置き換えとして使う

Web上の既存三層構造のフロントエンドをAIRに置き換えて何が嬉しいか、という話になると思うんだけど、やはりネットワークが無くても動くところだろうね。

HTML+CSS+AjaxベースだけでAIRアプリも作れるけど、これだとネットワークありきになりがちなので、AIR版作って何が嬉しいの?って話になると思う。ブックマークとか、URLをアイコン化して置いておけばいいじゃんみたいな。

その点FlexベースのAIRアプリならFlexの中だけで色々できるので、サーバ側へのリクエストをローカルにキャッシュしておいて、ネットワークに繋がったら一気に送るような使い方ができるから、レジ&会計システムなどクライアント側で動き続けることが何より大事という場合に逝けるかも。SQLite使ってキューを作れば比較的簡単に実装できるし。

予約システムのように、クライアント側予約状況(対面または電話で予約受付)と、サーバ側予約状況(ブラウザなどでの予約受付)に整合性を確保するような用途は向かない(というか、何をしても無理)だと思うけど。

これも、業務用とか、特定サービスの差別化の一環みたいな使い方になるのかなぁ。

AIRをリアルタイムコミニュケーション向けに使う

忘れてたけど、Flashベースであれば、音声や動画絡みのリアルタイム同期アプリも面白いかもね。てか、上で述べた用途より面白そうだし、Flashベースじゃなきゃ(安価に)実現出来ない。わかりやすいのはマシェリとかああいうビデオチャット系かな。

未だ遠隔会議って実用的じゃないけど、実際に今おいらが打ち合わせに困っているように、需要が無くなった訳じゃなくて、使い勝手とコストのバランスが悪いのが原因だと思うので、ちゃんとしたUIを備えたアプリがあって、タッチパネルモノが流行ってきたときには結構使えるんじゃないかなぁと思う。

これは、音声や動画や文字情報(や一部グラフィック)を特定のユーザで共有できる技術ベースが既に(有償・無償含めて)存在するから現実的なんだけど、高機能&大雑把過ぎて、おいらの知る限りでは、ちょっと扱いに癖があるのでノウハウが必要だと思う。細かい制御が出来ないイメージ。

ビデオ会議+チャット+ファイル送信して開いてもらうぐらいならSkypeで十分なので、もっともっとリッチアプリじゃないと相手にされないとも思う。もしくは、ユーザ限定とか課金前提とか、Skypeでは想定してない使い方or細かい制御が必要な場合とか。(まぁ、今までの遠隔会議システムがドコでコケたか考えないうちは作っちゃダメ)

そいえば、FlashからUSB接続のライブカメラなどを使うとき、セキュリティ設定を変更する必要があるんだけど、Webベースではこれが障壁になってあまり使われてない感が強かった。AIRの場合この辺どうなんだろう? 緩くなったのかな?

まとめ

独断と偏見でまとめると

  • クライアント&サーバ型アーキテクチャでは無い場合、他の競合技術もよく検討する。(てかこの場合AIRの優位点は少ない)
  • HTML+AjaxベースでAIRアプリを作ってもあまり嬉しくない。(てか嬉しいエリアが少ない)
  • FlexベースでAIRを作ると、それなりにうれしい事ができる。てか実はAIRは、Flexという技術の適用範囲を広げるために(市場ニーズから生まれたのではなく)技術主導で生まれたモノだと思う。
  • AIRを使って嬉しい適用エリアは、「ブラウザ上で動いていたFlexアプリをネットワークが無くてもある程度使えるようにしたい場合」と、「windowsに対応していない機材上で頻繁にアップデートが必要な場合」と、「リアルタイムコミニュケーション系システム」の3エリアかな。

ってことになった。

北海道WEBコンFESTA2008のワークショップでは、これ以上飛躍したアイデアは出るかな?

2008年8月15日金曜日

北海道WEBコンFESTA2008に参加しようかと

まぁ、おいらWebコンソーシアム飲み会員なので、参加しないと体の調子が悪くなる(?)から参加しなきゃなんないんだけどさ。

さて、北海道WEBコンFESTA2008「夏祭り!アドビ特集」(以下夏祭り)ですが、今回はCSS NiTE協賛ということで、Adobe系のお話がたくさん聞けるようです。

どっちかって言うと、キャラバン組んで全国を回るあたりAdobeのマーケティングの一環なのかなぁと勘ぐっちゃうんですが、正直今まで北海道ではこういう話を聞けなかったので、どっちでもいっかぁって感じです。

内容はこんな感じ

  • 日時:9月6日(土)10:00-16:30 懇親会
  • 参加費:一般・3,000円 学生・2,500円(学生証提示必須)
  • 会場:北海道自治労会館 4Fホール(自由席)
  • 住所:札幌市北区北6条西7丁目
  • 定員:250名
  • 主催:北海道WEBコンソーシアム

adobe_matsuri08.jpg

おいら的見どころ

タイムテーブルを見ると

  • 10:10-10:50 キーノート(adobe的新製品オススメ?)
  • 11:10-11:50 Dreamweaver CS4セッション
  • 12:10-12:50 Fireworksセッション
  • 13:20-14:00 Adobe AIRで作るRIAのご紹介
  • 14:00-14:20 ワークショップ(AIR絡み)
  • 14:40-15:00 Hokkaido Fresh Flash
  • 15:20-16:00 Integratedキャンペーンのしかけ方

ってなってるけど、プログラマ的視点から見ると午前中はあまり興味ないかな。 マーケティング色強そうだし、新製品出たってあんまり…ねぇ。

プログラマ的に気になるのは、AIRのセッションとワークショップで、セッションの内容を理解しつつ、AIRの使いどころってドコだ?的なワークショップをするみたい。

ワークショップは正直20分じゃあ話し合うには時間が足りないんだけど、Flex使いの身としては、聞きたい事をあらかじめ整理していけば結構突っ込めるんじゃないかなと思う。…ので次のエントリでまとめよう。

おいら的隠れ見どころ

さて今回の夏祭り、今までのWebコンと比べると参加料が高いのです。(まぁ、非会員でも3000円なんで安いっちゃあ安いですが)

どこに使っているかというと、おそらく会場費が大半でしょう。

今回はイベントが自治労会館で250名、アフターパーティーは130名(これって貸し切り?)まで入れるそうですが、この規模ってOSC2008の来場者&打ち上げ参加者と同程度ですよね。(たしか。記憶が曖昧ですが…。まぁOSCの場合は主催側とかも頭数に入っているはずですが)

どこかの企業主体のイベントではない場合で、かつ3000円取っちゃう場合でも250名集まるんでしょうか? 企業ユーザがちょっと入ってくるでしょうが、ちょっと心配。(会場にカネかかると、どうしても参加者が集まらないと話にならないわけで・・・)

あと、これはちょっと裏話なんだけど、前回のWebコンセッションで、マイクロソフトさんにシルバーライト2(2を付けないと怒られる)の話をしてもらった時があったんだけど、その時の打ち上げで「9月にAdobeさん絡みのイベントがあるんですけど、ご一緒どうですか?」と打診したら、まぁまぁの感触だった。

ので、今回は表立って書いてはないけど参加してくれる(はず)、Adobeさんとマイクロソフトさんの考え方の違いについて熱いバトルがある(はず)と思って良いと思う。(ホントに出てきたらカッコイイ)

で、イベント詳細&参加登録

北海道WEBコンFESTA2008のサイトが詳しい。CSS NiTEにもちょっと載ってる。

参加登録は北海道WEBコンFESTA2008からだよ。

参加料は当日受付で支払うので、毎回の事ながら受付は混雑が予想される。早めに会場にはいるのが吉。

※これって良くわかんないけど、パーマリンクなのかな? まぁイベント終了までコンテンツがわからなければ目的は果たせるけど。

北海道のFlash系プログラマな方へ

正直、今回のイベントって表面上はプログラマにとっては面白そうではないのですが、AIRについて話せる数少ない機会なので、どうぞ参加ください。

AIRはイマイチ火が付いてる感が少なくて、その分参入しやすい(競合が少ない)と思うので、どこで使えば面白くなるのか一緒に考えてみましょう。(一見プログラマにとっては面白くなさそうなイベントも、アイデア持ち寄りで面白くしましょうよ)

詳しくは次のエントリー参照のこと。

2008年8月7日木曜日

jQueryが普及するとWebデザイナの職域が変わるかもしれない

たぶん今後Webデザイナに求められる事って、総合的な美術的センスと(画像またはFlashで)イラストが描けることだけになるんじゃないかな、と思わせるような勢いで、良い意味でのショックを受けたのでご紹介。

先のエントリーで「プログラマはjQueryを使ってデザインを楽にするべきだ」と言ったけど、ここ数日実際に触ってみて、これを覚えるべきは実はプログラマじゃなくてデザイナかもしれないと思った。この流れが進むと、たぶんヘタレなcoderとしてのWebデザイナは必要なくなっていくんだと思う。

特にシステムメインの案件において、見た目を直す作業ってのは、プログラマの仕事になってくると思う。でも負担はあまり増えないと思う。楽しんで作業する感じかな。

まぁ、絵を見てもらうのが一番だろう。

実際にやってみた

このエントリーのために簡単なサンプルを用意したよ。ソースは同じ内容だけどこれはドリ上で見たもの

jquery_example_before.jpg

で、こちらはそれをブラウザ(FireFox3 on MacOSX 10.5)で見たもの

jquery_example_after.jpg

ドリ上だとCSSでいじれる範囲しか見えないんだけど、ブラウザで見るとjQueryがごにょごにょしてくれるので、キレイになる。細かいところは画像のリンク先を確認してね。

何をしたの?

細かい事はおいといて、いじった内容を列記すると…

  • タイトルにグラデーションを入れた
  • タイトルを角丸にした。アンチエイリアスもかけてある。
  • テキストボックスの中にtitleプロパティを表示するようにした(google mapのテキストボックスの様なアレ)
  • inputやselectタグの見た目を変えた
  • よく見るレーティング用の星を配置した

サンプルなので、あまりいじらずシンプルにしといたよ。

どれくらいの手間がかかるの?

ソースはこんな感じ。JavaScriptやCSSのファイルはjQeury関係のライブラリをダウンロードして、ちょっと調整した程度。ただし、HTML上では複数のライブラリを組み合わせて使っている。

100行ぐらいなんで、全文載せよう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Remix Example</title>

<!-- 定型。フォルダ構成やバージョンに変化がなければ変更する必要はない。または不要なものを行毎に削除 -->
<script type="text/javascript" src="javascripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" src="javascripts/interface.js"></script>
<script type="text/javascript" src="javascripts/jquery.ui.all.js"></script>
<script type="text/javascript" src="javascripts/jglycy-1.0.js"></script>
<script type="text/javascript" src="javascripts/jforms.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/niceforms-default.css" media="screen" />
<script type="text/javascript" src="javascripts/jquery.coolinput.js"></script>
<script type="text/javascript" src="javascripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="javascripts/jquery.gradient.js"></script>
<script type="text/javascript" src="javascripts/ui.stars.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/ui.stars.css">
<script type="text/javascript" src="javascripts/jquery.curvycorners.min.js"></script>
<!-- 定型。フォルダ構成やバージョンに変化がなければ変更する必要はない。または不要なものを行毎に削除 -->

<style>
body
{
margin: 0;
padding: 0;
text-align: center;
background-color:#cccccc;
}
.panel{
background-color:#ffffff;
width:400px;
margin: 20px auto;
padding:10px 10px;
text-align:left;
}
h1{
background-color:#ccccFF;
padding-left: 10px;
}
.coolinput {
color:#333333;
}
input.pre-input{
color:#bbbbbb;
}
</style>
<script type="text/javascript">
$j(document).ready( function()
{
// for form
$j('form.niceforms').jForms({listSize:20, imagePath:'./images/niceforms/default/'});
$j('input.coolinput').coolinput({blurClass: 'pre-input'});
// h1
$j('.corner').corner();
} );
</script>
</head>
<body>
<div class="panel">
<h1 jg="gradient" class="corner" jg:gradient="from:'ccccff', to:'ffffff', direction:'vertical', length:100, position: 'right'">タイトル</h1>
<form class="niceforms">
ID:<input type="text" class="coolinput" title="Input your ID!" /><br />
Password:<input type="text" class="coolinput" title="Input your Password!" /><br />
今の気分: <select> <option value="1">あちょー</option>
<option value="2">でたよ</option>
<option value="3">とんでけ</option>
</select><br />
評価: <span id="stars-cap"></span>
<div id="stars-wrapper" jg="stars" jg:stars="captionEl: $j('#stars-cap')">
<input name="newrate" value="1" title="ダメダメ" type="radio">
<input name="newrate" value="2" title="ちょっとなぁ" type="radio">
<input name="newrate" value="3" title="ふつう" type="radio">
<input name="newrate" value="4" title="いいね" type="radio" checked="checked">
<input name="newrate" value="5" title="サイコー" type="radio">
</div><br />
<input type="submit" value="Go" />
</form>
</div><!-- end of panel -->
</body>
</html>

ちょっと解説

ソース見てもらえばわかるけど、bodyの中は簡潔そのもの。jQeuryのライブラリ群は一度整理してしまえばコピペで使い回しが聞くので全然手間にはならない。CSSだってシンプルでしょ?

変なクラスとかネームスペースを使っていたり、一部JavaScriptの初期化用コードが見えるけど、この辺は各ライブラリのマニュアルを読まなければわからない事。まぁ、定型パターンで使い回せるので、覚える必要もないのかもしれない。

jglycyってライブラリを使うと、JavaScriptを使わなくてもHTMLのタグにパラメータを仕込むだけで、jQueryプラグインの初期化ができてしまうのも便利だよね。(まー、複数に同じ処理をするならコード書いた方が早いけど)

このサンプルは別のプロジェクトから一部抜粋して作ったんだけど、5分もかからず作れたよ。(まぁ、大半コピペで済むからなんだけど)

ね? 簡単でしょう?

ここで使っているものだけでも、オプションを指定すればもっと色々できるし、これだけの手間でこれだけキレイになれば、プログラマが作ったものを、そのまま本番で使ってもいいかぁという気になるよね。おいらが管理者なら、いいからそろままリリースしろと言うもん。

もちろん、画像表示系始め、もっと派手にぐりぐり動く他のjQuery用ライブラリもたくさんある。おいらFlex使いだけど、これならAjaxで作っても良いかなぁと思うくらい。

他にはどんなのがあるの?

たとえばこんな感じ?

現状では、集約サイトがまだ無いので、紹介記事をざーっと見て良さそうなモノのデモを試すような感じで選んでいくことになると思う。

Plugins | jQuery Plugins (本家。現状結局はここで探すことになる)

jQuery 140 Plugins:skuare.net (日本語で読める記事の中では一番詳しいかも)

[JS]jQueryのプラグイン33+1選 -2008年5月 | コリス (重複があるものの、画像+コメント付きなのでイメージがつきやすい)

[JS]jQueryのプラグイン33+1選 -2008年1月 | コリス

[JS]jQueryのプラグイン33+1選 -2007年11月 | コリス

[JS]jQueryのプラグイン33+1選 -2007年9月 | コリス

jQueryサンプル集 - DesignWalker

jQueryすぐに使える役立つプラグイン-javascript - WEBデザイン BLOG

使えそうなjQueryプラグイン - Emotional Web

suz-lab: 使えそうなjQueryプラグイン

Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 : 4GALAXYのメモ

50+ Amazing Jquery Examples- Part1

37 More Shocking jQuery Plugins

The ultimate jQuery Plugin List | Kollermedia.at

日本語の紹介記事はあるけど、配布元はだいたい英語なので、デモの場所とダウンロードリンクを探す程度の英語はできないとだめかも。ライセンスは大体MITとGPLのデュアルライセンスみたい。(なんでデュアルにする必要があるんだろう?)

個人的には、Ruby on RailsでjQueryが使えるjRailsってのが一番使い勝手がよい。(てか、これはjQueryのライブラリというより、Railsのプラグインだな)

本当に大丈夫? 嵌らない?

うん。たぶん嵌るw

たとえば、jQeury同士の互換性とか、バージョン間の互換性とか、prototype.jsなどと混ぜて使ったときの挙動とか。

理論的には良いはずなんだけど、癖の範疇でうまく動いてくれないときもある。(たとえばこのサンプルでpanelに角丸付けると、その中で使っているライブラリの一部機能が動かなくなった)

クライアントサイドで、しかもJavaScriptベースだから、あまり凝りすぎると重くていやんになるだろうし。

あと、悪いことではないんだけど、流行ってるおかげでライブラリがポコポコ出現し、あまり淘汰されないまま増え続けているので、同じような機能のライブラリが複数あったり、数が多すぎて自分が使うモノを選択するのに時間もかかる。

本家以外に集約してランキング付けているサイトなどがないのも原因なんだろうなぁ。

まぁ、ノウハウが蓄積されるのは時間の問題だろうし、一度実践で使ってみれば流れはつかめるので、次回からはかなり楽を出来ると思う。

まとめ

前回のエントリーからの流れで言うと、システムモノのHTMLやCSSなどのデザイン面に関しては、あらかじめ用意しておいたテンプレートを元にちょこちょこいじって、手間をかけずに見た目を大きく変えれる上記ライブラリなどを使えば、ほぼそのままリリースできるレベルのモノに仕上がる気がする。

ただ、導入に関する静的ページやロゴなどの画像はデザイナに作ってもらった方が早いかもしれない。(分業体制での効率を考えればそうなる) ただ、ここにxピクセルのこんな画像が欲しいなーとか、あくまでプログラマ主導で作られていくんじゃないかな。

つか、サンプル見りゃわかるんだけど、JavaScriptなんて書かなくてもかなりの部分を作れる(もしくは1行初期化コード書くだけとか)んだから、もっとデザイナが使いこなすべきだと感じた。

コリスさんの解説エントリーを見ればわかるけど、jQueryの魅力ってぽん付けで動いてキレイにアニメーションしてくれて、対象がプログラマ中心じゃなくデザイナ寄りにあることだと思う。

角丸やグラデーションをJavaScriptを使って描いてくれることで一番楽が出来るのは、実はデザイナでしょ?

使えば便利になるイメージ像や、具体的なコーディング内容、プラグインの探し方も示した。あと使えるようになるかどうかはあなたの努力次第だね。

2008年8月5日火曜日

WebプログラマのためのHTMLデザイン(その2)

前回からの続き。先に前の記事を見ておいた方が理解が早いよ、きっと。

HTMLタグ周辺知識の覚え方

昔はとほほで逝けたんだけど、さすがにちょっと内容が古いようで、最近はTAG<index>さんが人気あるのかなぁ。

他にはHTMLクイックリファレンス さんとかHTMLタグボードさんあたりなのかな?

重要なのは、全タグをさらっと把握することと、ここのように「テキストの意味」に関するタグを集中的に覚えること。

あまり時間をかけなくてもいいと思う。(目標1時間)

headタグとかimgタグといった一般的なタグを理解できているのであれば、HTMLとしての意味付けやグルーピングの仕方なんぞ、CreativeCommonsモノを使う/参考にするか、もっと言えばYahoo!などの大手のサイトのHTMLを参考にすれば、全然問題ない。先にも書いたが、まるパク出来るほどデータ構造が同じケースなんてほとんどあり得ないから、どっちみちそこそこ修正が入る(もしくはそこに意匠権が存在するほどいろんな表現方法があるわけでもない)ので、どんどん参考にすべし。プログラミングもそうだけど、HTMLデザインも他人のコードを読むのが上達の秘訣な気がする。

それより、サーチエンジンがコンテンツの意味を解析する上で、短中期的にはタグによるコンテンツのマークアップから意味を解釈することが多いだろうから、意味づけに用いるタグを把握しておき、積極的に使う事が重要。(ただし、長期的には日本語や英語や中国語といった言語ごとに自然言語解析技術が進歩し、これが浸透することで、対照的にマークアップの意味は薄れていく気がする。まぁ、少なくとも今後5年間はマークアップ優勢だと思う)

SEO周辺知識の覚え方

あ、そうそう。日頃使わないHTMLタグのフォローアップはSEOを絡めた方が学習効果が高いと思う。

まったく知らない人でも、

で十分だと思う。(目標1時間)

まー、本格的にやるならSEO業者に任せたり、Yahoo!ビジネスエクスプレスを通したりと、色々お金がかかるけど、基本部分であるSEOチューニングは、プログラマの方が考え方や将来像を読みやすい(検索エンジンのエンジニアの思考を読み易い)んじゃないかと思う。実際問題、動的コンテンツのSEOチューニングはプログラマじゃないと手を出せないしね。

CSSやデザインの基本概念の覚え方

まー本を買うのが一番詳しいんだろうけど、デザイナ向けの1ページ1項目的なリファレンスって、どーも好きになれない(主観)ので、おいらのおすすめ的にはエンジニアのためのWebデザイン教室になる。色使いなどデザインの基本的な説明もあるしね。

まぁ、ソースまでちゃんと読むと結構時間かかるし、正直どうよって思う記事もあるけど、おおよそは把握できるんじゃないかな。

CSSのリファレンスとしては、上記TAG<index>さん、HTMLクイックリファレンス さん、HTMLタグボードさんあたりで十分なきがする。

あと、重要なのはドリとかAptenaとかで、タグ補完と互換性のチェックができる環境を使うことかな。

連載読んでリファレンスに目を通して環境揃えるまで10時間強ぐらいはかかるかもねぇ。

注目すべきAjaxライブラリ

ぽん付けで、見た目がキレイという意味で、ExtJSjQueryがいいと思う。

ExtJSをちゃんと使うにはライセンス料が必要なので、jQueryの方が注目されていてWeb上に情報も見つかると思う。

ExtJSはフルセットで揃っていて組み合わせテストも大丈夫だけど、jQueryは一つ一つ気に入ったモノを揃えていく感じかな。

興味があるなら、

から辿るのがいいと思う。

「なんとか集」とか「なんとかツール」類のまとめ

まずはこの記事と同じ視点のまとめサイト

これらまとめサイトから、おいらが使えそうと思ったモノ+自分で調べたモノのうち

色を決めるときのアシストツール

各種チートシート類(これで全部足りる)

以下探せばいくらでも出てくる。中には商用利用が可能なモノもあるので、リンク先のリンク先などもチェックしてみては?

てか、gigazineさんかcolissさんで、サイト内検索かけた方が早いかも。

素材検索

HTMLテンプレート集(リンク先は基本英語。ただ方向性の違いからそのまま日本で使うには合わないかもしれない)

CSSサンプル集

アイコン集(基本英語)

挿絵or背景用写真集

開発用ツール(無料で使える系)

常時チェックすべきサイト

その場でググったものが多いので、定番も結構外れている気がする。

「これは入れないと」ってのがあったらフォローお願いします。

クリエイティブコモンズの要点

まー、日頃からオープンソースモノを使ってるプログラマなら、ある程度ライセンスに詳しいと思うんだけど、企業の下で働いている限り、クリエティブコモンズを日頃から使っているってのはごく少数だと思う。

プロプライエタリ分野ではクレジットが重要だからね。

まったく知らなくても、

実務は問題ないんじゃないかな。

あと、プロプライエタリ分野で使いたいときにクレジットが邪魔で、かつライセンサーが1人だけの場合は、外してもいいかどうか直接交渉するという手もあるかも。まぁ、普通対価は要求されるんだろうけども。

デュアルライセンス - Wikipedia モデルだね。説明としてあまり適切ではないけど、Web2.0のビジネスモデル その3「オープンソース」 - GIGAZINE が参考になるかな?

超重要な事

現役デザイナで腕のいい人と友達になろう。

色々面白い話を聞けるし、考え方の参考になったり、モチベーションアップに繋がる。相手もプログラムのことを知りたがってたりね。

友達を作るにはデザイナ向け勉強会とかに参加するのもいいかもね。(あまり面白くないかもしれないけど、刺激にはなると思う) 打ち上げが重要。飲めなくても参加すべし。

CSS Nite公式ブログ とかチェックしてれば、興味のあるイベントもあるんじゃないかな?

2008年8月4日月曜日

WebプログラマのためのHTMLデザイン(その1)

おいら今までの会社ではプログラマとデザイナーに分業して作業していたので、いわゆるシステム絡みのものについては一通り出来るんだけど、デザインに関してはMS Wordに負ける自信があるくらいできない。

まぁ、自慢にもならないし、周りのフリーランサーに聞いても「やっぱデザインが出来ないってのは大きいね」だし、実際今困ってるし(たいした事なくても外注に出すの?とか)、完璧じゃなくてもある程度までは覚えなきゃだめかなぁと思ったので、勉強してみた。

で、考え方とコツさえつかめば、今まで現場でシステムを作ってきたプログラマが、ある程度デザインを出来るようになるのは、あまり大変な事じゃないような気がしてきたので、ここでその成果をまとめてみる。

覚えなければいけない理由

まず、WebプログラマがHTMLデザインを押さえなければいけない理由をまとめます。

  • システム構築に当たりクライアントとよーく話し合って、顧客の要求を一番理解している(どんなものを作ればいいか具体的にイメージできている)のは誰?
  • そして、その要求に対してシステムが支援できる範囲を把握しているのは誰? 
  • そして、それを実際の画面構成として、フォームなどを配置したHTMLベースのモックなどに落とし込む作業を行うのは誰?
  • たとえば、今まではプログラマとデザイナで分業していたけど、デザイナが辞めちゃったとか、自分が独立した場合などに困るのは誰?
  • Ajaxを絡めた動的なレイアウトを、デザイナに丸投げするのは危険。てか、フツー無理。この場合デザインも考えながら作らなきゃいけなくなるのは誰? (デザイナにAjax用ライブラリの詳細まで把握して追っかけとけってのは無理でしょう)
  • せっかくすばらしいシステムを作っても、見た目が悪ければ流行らないという現実。逆もまた然り。
  • Flexにもスタイルシートという概念があって、これもHTMLにおけるソレに近いけど、Ajaxと同じで、こだわるところじゃないなら、プログラマが作った方が早いと思うよ。少なくとも、HTMLより分業はしずらい
  • 動的にコンテンツが変更されるシステムのSEOチューニングって、プログラマしかできないよね
  • デザイナのワークフローを押さえることで、ちょっとしたノウハウ(素材を残しておくとか)や、ちょっとした修正を自分でこなしたり、工数をイメージできるようになることで顧客折衝がうまく進むようになるかもね
  • Webプログラマ自らがデザインの基本部分を作ることで「システムの見た目についての仕上げをデザイナに任せるための下地部分の整備」とできるならば、「おいらプログラマだから見た目部分はデザイナよろしく」って感じで作業するより、全体的な効率が圧倒的に良いよね
  • てか、プログラムを理解してないデザイナに丸投げすると、壊されるよね。(そして壊れてないか総当たり的にテストしたり、再度コードレビューするのってとても苦痛だよね。プログラマじゃないと出来ないし)
  • てか、うちの会社ってどんな場合でも分業できるほど人員居たっけ?
  • 内情・トレンド的にも、そろそろプログラマとデザイナの分業って時代じゃなくなってきてるのかもね
  • てか、CSSみたいなインフラ的技術を理解してないのって、そろそろヤバくない?  危機感抱いてるっしょ?

おー。結構あるじゃん。ヤバイわおいら。

スタートライン(つーか対象読者)

絶対的なモノではないけど、記事の立ち位置として前提条件は以下のような状況を想定しています。

  • Web系プログラマとして、HTMLベースのWebアプリはそこそこ作れる。サーバサイドやクライアントサイドのプログラミングそのものについては、あまり問題意識はない。
  • プログラマとデザイナが分業しているなど、システム構築経験はあるがデザイン部分については経験が足りない。
  • おいらにはデザインは無理と思っている。というか、できるかもしれないけどセンスが無いと思っている。table周りをちょこちょこ修正するならできるけど、全体的なデザインは自信がない。
  • 特にCSS周りはよくわかんなくて怖い
  • inputタグとかimgタグとか、一般的に使っているタグの意味や書き方については困っていないし、書ける。(てか、これできないとプログラミングできないし)

ゴール(is NOT 理想)

これをふまえて、ゴール(= 現実的妥協点)は以下のように設定します。

  • HTMLはコンテンツの意味付け、CSSは装飾と割り切る
  • ただし、W3Cの思惑通りすべてCSSでデザインしようなんて考えない。実際、プログラマ視点で見ると「それtableでいいんじゃないの?作るの楽だし」と思うことや、管理者視点から見ると「そんなところに拘らないで(旧来の方法で)さっさと仕上げてよ。その方がブラウザ間の互換性も高いでしょ?」と思うことは多々ある
  • 画像を新たに起こすのは諦める。Webプログラマが求めるようなレベルのモノは、ちょっと真剣にググるか、画像ジェネレータなどで作って、ちょこっと編集すれば間に合うことが大半だし。(偏見?) てか、あーたそんなセンス無いでしょ?
  • 「完璧じゃなくても、まぁまぁおかしなことをしてないレベル」もしくは「あとで全体的な仕上げをデザイナに行ってもらうための下地として問題ない(手戻りのない)レベル」を目指す
  • CreativeCommonsモノを積極的に利用する。特にエンドユーザの目に触れない管理画面なんて、CreativeCommonsで十分なんじゃないの?(てかエンドユーザ用の画面よりキレイに見えたりね)
  • CSS Hack的なものはどーでもいいし、ブラウザが進化していくことを考えれば、使うべきではない。無駄無駄。

極論的には

  • HTMLの基本レイアウトはあらかじめ用意しておいたテンプレートを用意するか、パクる。よってここにかける時間は極端に短いはず。 (大丈夫、すべてそのまま使えるほどパクれる範囲は多くない。そこに意匠権が存在するほどいろんな表現方法があるわけでもない。見た目は別だし)
  • 色の使い方も、なれればキレイで早いはず(センスがよいかどうかはともかく、理論を知れば外れることも少ないはず)
  • アイコンや背景画像など、汎用パーツ的なモノも、探し方さえまとまっていれば手間ではないはず
  • CSSの当て方(どこでどのプロパティを当てて、どう継承させるかなど)や、ユーザインターフェイスに時間がかかるし、かけるべき
  • てか、あーたプログラマなんだから、(デザインはそこそこに)ちゃんとテストして、セキュリティにも気をつけれよ。(ユーザインターフェイスに時間をかけるのはいいとしても)

ポイント(学習方向性)

ゴールへ最短で向かうための方向付けは以下のように設定します。

  • HTMLタグの意味付け重要。SEOとしても効果が望めるため一気に把握&積極利用すべし (同時にSEO系の知識も仕入れるべし)
  • エンジニアのためのWebデザイン教室を読んでCSSの基本概念を押さえるべし。特に一般的用法とボックス概念と継承概念とセレクタ概念
  • CSSがらみはブラウザの対応度合いの話もあって、ノウハウの宝庫。逆に言うと、作ってみないとわからないことが多い気がする。チュートリアル程度だと壁に当たることも少ないので、ここは実践あるのみ?(ここが難しいと思う原因?)
  • 色に関する基本知識を押さえるべし。暖色寒色程度ではなく、陰影の付け方や色同士のマッチングなども
  • PhotoShopイラレドリなどの使い方は、知らなくてもなんとかなるし、ちゃんと知りたければ本もある。要はあまり重要ではない
  • Ajaxライブラリ(特にExtJSjQueryなど)を使えば、デザインも含めて一気に楽になる可能性がある(ので、これの把握は重要)
  • HTMLテンプレート集、アイコン集、挿絵や背景画像用写真集、色決めに使う各種ツール、FireBugやそれに類する開発ツールなどをまとめておく事は超重要
  • で、こられはCreativeCommonsLicenseを採用していることが多いので、基本理念と使わせてもらい方(変な日本語?)を把握することが重要
  • それよか、レイアウト幅は何ピクセルにするのがトレンドとか、このツールを使うとこんな事ができるとか、こういうサイトではこのブラウザを使っている比率が高いとか、このブラウザではこんな風に解釈されるのでこうした方が良い、的なノウハウが超超重要。これは継続的にそれ系サイトをチェックするか、聞ける人に(聞けるときに)聞くのが良いかも。(フリーになるとここが辛い)

まー、HTMLとCSSの基本的な知識なんて数日あれば、いいとこ把握できるし、応用範囲広いぜー

おいらどっちかっていうとAjaxよりFlex派なんだが、HTML+CSSのようなインフラ的な部分は絶対無視できないし、択一な関係じゃないから、覚えなきゃだぜー

なんとか集とか、なんとかツール類は、おいらがまとめておくからよー

じゃあ、次回の記事でもうちょっと突っ込もうか。

2008年8月3日日曜日

北海道開発オフに参加したい(けどできない)

プログラミングの勉強したいというモチベーションはあるけど実際に手をつけるのを躊躇している人、または作りたいモノはあるけど生活に流されてなかなか着手できない人は、北海道開発オフに参加してみてはいかがでしょうか?

内容は

  • 時間は2008/8/10の10:00-18:00
  • 場所は北海道大学 情報科学研究科棟(札幌)
  • 参加費:無料(メシは自分で用意)
  • 参加資格的なモノはなしで、誰でもうぇるかむ(?)
  • Twitterやってる人はちょっとノリが合うかも
  • 参加したい人はこちらからエントリー

みたい。

開発オフ(または開発集会)って?

一応知らない人のために説明しておくと、開発オフ(一般的には開発集会)ってのは、ある程度の特定分野(今回はWebモノ)について、みんなで集まって、ガンガン書く人はガンガン、ガンガン書いてるのを見たい人は後ろで本でも読みながら周りとおしゃべりしながらーみたいなノリで、みんなでノウハウを共有しながらプログラミングを楽しみましょう的な集まりです。

有名企業とかもやってるようですが、そうしたところは社内新プロジェクトの発掘や社員のスキルアップのために、今回のようにオープンに参加者を募集しているところでは、プライベートプロジェクトやオープンソースのような公共性の高いモノを楽しみながら作ることを目的としているようです。

期間は今回のように数時間から、長いところだと数日泊まり込みでというところもあるようですが、普通は数時間(5・6時間)が多いんでしょうね。ポイントはなるべくこの短期間に形になるモノを作るという点です。そのためには、ある程度の規模のモノを作るにはアイデア出しやいわゆる設計、ベースとなるデザイン(見た目)はある程度用意しておいて、持ち込む必要がありそうです。

まぁ、日頃作りたいと思っていたちょっとしたツールや、過去のプライベートプロジェクトから一部切り出してプラグイン化(までいやかなくても、再利用可能化)するぐらいがボリューム的にちょうどいいのかもしれません。

北海道での開発オフの現状

おいらがこれを知ったきっかけは、OSC2008Hokkaidoの打ち上げで、たまたま隣の人が主催者だったという流れなのですが、元々おいらは開発集会に参加したいと思ってたので、隙あらば参加と思ってました。

おいらの知る限り、北海道でオープンな開発集会を開いているのは、Ruby札幌北海道開発オフ(これ団体名なのかな?)ぐらいなんだけど、Ruby札幌の主要メンバーが北海道開発オフの参加者であることもあってか、北海道開発オフの方が開催回数が多いようです。

両方おいらは参加したことがないのですが、過去の北海道開発オフを見る限りでは、結構プライベートっぽくわいわいやってるみたい。

おいら的には温泉に入りながら色々アイデアを出すことが多いので、近くの健康ランドっぽいところでやりたいなぁとも思ってたんだけど、こんな風にメンバー個人宅でやるって感じでもいいなぁ。(北海道っぽい感じがする)

そしていつもの如く

スケジュール調整不能。や、たぶんそういう星の下に生まれてるんで、いいんですがね。

参加したいイベントの時って、大体先に動かし様のないあまり楽しくないスケジュールが埋まってるんだよね。なので、今回も不参加になりそうです。(といっても、盛り上がってほしいのでブログでも取り上げている訳なのですが)

てか、おいらの家FONだしうち(もしくはうちの周り)で開いてくんねーかなーって感じ。FONに指向性アンテナつけて屋根に吊せば、見通せる範囲であればそこそこ使えると思うんだけどなぁ。(さすがに野外では無理か? 近くに河川敷はあるんだが…)

ちびの世話しないといけないから、プログラミングに参加できる訳じゃないんだけど、そういう雰囲気好きなので。

持ちネタは数個あるので、開発集会毎週でもばっちこいなんだけどなぁ。

ちび連れてちょろっと顔出そうかなぁ。

2008年8月2日土曜日

調子に乗ってbloggerにあとで読むリンクをつけてみました

おいらはITがらみの情報収集にあとで新聞を使ってます。

これはあとで読むというメール配信ブックマークサービス(ブックマークするとその記事のURLと文字情報がメールで届くので、あとで読もうとメモするときに便利。まぁ、おいらタブに溜める派だから使ってないけど)の利用状況を集計して、人気のある記事をその日毎にまとめたものなんだけど、ランクインされる記事の内容から判断するに、「向上思考の強いWeb系プログラマで彼女が居ないorそろそろ倦怠期?的な所帯持ちの25〜35歳ぐらいの男性」がメインターゲット層になっている模様。

まぁ、おいらぴったりじゃんと思うし、時流をあまり外さないのでメインとして読んでるんだが。(複数回るのは疲れるので巡回の基本はコレだけ)

おいらもここにランクインされるようになりたいなぁと思って見てたら、あとで読むボタンなるものができたみたい(や、前からあったんだろうけど)で、こいつをおいらのブログに張っておけば多少は効果あるかなぁと思ったので張ってみた。

以下のタグを表示したい箇所に入れておけば、表示されるよ。

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- 配布されている貼り付けタグここから -->

<a href='http://atode.cc/' onclick='javascript:(function(){var s=document.createElement(&quot;scr&quot;+&quot;ipt&quot;);s.charset=&quot;UTF-8&quot;;s.language=&quot;javascr&quot;+&quot;ipt&quot;;s.type=&quot;text/javascr&quot;+&quot;ipt&quot;;var d=new Date;s.src=&quot;http://atode.cc/bjs.php?d=&quot;+d.getMilliseconds();document.body.appendChild(s)})();return false;'><span class='atode-link'>[あとで読む]</span></a>

<!-- 配布されている貼り付けタグここまで -->

</b:if>

だがしかーし、このあとで読むボタンなるものは、現在のページがパーマリンクであることを前提としているようで、おいらのブログのように、最新何件みたいな表示のとき、記事毎のパーマリンクを渡す手段が用意されていない模様。(なので上のタグもbloggerのb:ifタグを使って一覧表示時にはあとで読むリンクを表示しないようにしてある)

これじゃあ不便だよねと思ったので、JavaScriptのソース読んで、パーマリンクを渡せるように改善点をまとめて開発側にメールで送っておいたので、運が良ければ直してくれるかもしれない。(複雑な話じゃないので直してくれる気がする)