HOKYPOKY.BLOG

COLORS

http://natarieinthedream.com/colors/

Music : NATARIE IN THE DREAM
Illustration : Kura
Art Direction : SHINN
Technical Direction : nijitaro

少し前になってしまいますが、ナタPことNATARIE IN THE DREAMのニューアルバム「COLORS」のサイトを製作させていただきました。

イラストはKuraさん、デザインは同居人のSHINNで、ボクがオーサリングでした。
Kuraさんのイラストはとても鮮やかで魅力的です。
オーサリングでは、JPPScrollbarfrocessingRelativeLayoutにはほんとお世話になりました。多謝です。

サイトとは関係ないですが、ボーカロイドのCDのサイトということで売り子?みたいなお手伝いをしに夏コミにも行ってきました。会場はとても広いのにスペースはすごく狭い。しかし、ボーカロイドって流行ってるよね的なある種眺めていたところに少しでも参加出来てよかったです。CDばんばん売れていくのよ。ナタPかっこいい。

肝心のCDですが、「とらのあな」に通販ありますのでぜひ聞いてみてください。

Railsで初めてアプリケーションを作ってみた。

社内プロジェクトですが、サーバーサイドの知識ほとんどないボクがRuby on Railsを使ってWEBアプリケーションを構築してみた。

内容として一日の行動記録。要は日報アプリケーション。
一日のタスクとそれに費やした時間を記録。
さらに個々のdeliciousアカウントをAPIを使って読み取り、共有したいブックマークを会社のdeliciousにRepostすることができるブックマーク共有機能。
一日の感想コメントと、メッセージチェーン機能(一つ前に日報を書いた人の言葉がみれる。次の日報を送る人に一言コメントが送れる)があり、
それらを送信すると社内の日報としてメールが送信され、アーカイブを閲覧、ダウンロードできるといったものだ。

Ruby on Railsを選んだ理由

ボクは今までHTML, CSS, JavaScriptを中心にやってきたんだけど、これらはどうにも限界があった。
つまりボクの考えるWEBというものとは実は無縁の技術だったのだ。それはFlashも同じ。

端的にボクの見ているWEBにサーバーサイドがないとどれだけつまらないものになるかということだ。
mixiやYouTube、Twitter、はてな、このブログもそう。Google検索ももちろんサーバーサイドが提供してくれた。

そこでサーバーサイドをやろうと思う訳だが、JavaScriptしかプログラムのわからないボクにとってPHPはとても壁が高かった。
それこそちょこっとした1アクションくらいならPHPでなんとかする事はできるけどアプリケーションを構築するとなると、ホントお手上げ状態。

そこでフレームワークという言葉に出会う。そしてそれがRuby On Railsだったというわけ。

Ruby on Railsの壁

まずRuby on Railsの壁としてRubyという言語がある。
ドキュメントが少ない。さらに動くサーバーがない。
Rubyが動けばいいかというとそういうわけではなく、このフレームワークは敷居が高い。

ドキュメントに関しては、まずはてブのrailsタグを購読することにしたのと、本を数冊購入した。

中でも最初のRails of Ruby on Railsは良書だった。とにかくRailsに触れる・作るということに徹底していて、よくわからないけどRailsすごい!って気分にしてくれる。
ごちゃごちゃした説明はほとんど省いていて、写真や図をふんだんに使いとにかく楽しい。
初めてのフレームワークということもあり、それらの概要を感覚的につかむのにはとても良かった。それこそ一日でそのままソースを書いていけばブログができてしまった。
Rails体験ツアーって感じです。

次は「たのしい Ruby」「Rubyレシピブック」「Railsレシピブック」シリーズ。ボクのRails三原色。
楽しいRubyはRubyの文法などを知る事ができた。要はオブジェクト指向のドットシンタックスだということでJavaScriptできると似ている部分も多くためになった。
さらにRailsレシピブックはぼろぼろになるまで読んだ。ドッグイヤーしまくり。

サーバーは最終的にPassengerを使う事にした。理由は簡単だからだ。
mod_railsと言われるだけあって、PassengerをサーバーにインストールするだけでRailsの環境を構築できる。
本格的に構築するとなるとlighttpdを使った方がいいみたいですね。でもここに時間をかけるのだけは避けたかった。

社内プロジェクトなのでMac G4にPassengerを入れて運用することにした。
また、このHOKYPOKY.は海外のDreamHostを借りた。
国内でサービスとして運用したい場合はラピッドサイトのVPSなどを借りるのが良さそうだった。

SQLite

Railsとは少し話がそれてしまうんだけれども、SQLiteというデータベースにも惚れた。
それこそ大規模になってきたらいろんな知識が必要になってくるとは思うのだけれど、SQLiteの手軽さといったらない。
DBを作成しなくていいとか、ファイルをコピーすればそのままデータもコピーされるとかほんとにすばらしい。
とにかくポータブルであることと、DBがどうなっているかみるのに凄く役にたった。
そしてFirefoxのアドオン、SQLite Managerにはお世話になりました。

流行

流行というものの力にもお世話になった。要はRuby on Railsはホットなのだ。
ブックマークされているサイトたちのみんなのテンションやモチベーションが高く、新しい事への挑戦、困難な事への共有、またニュースにも話題が多いのでとにかく飽きない。
まだ正式リリースはされていないが、Rails3.0のMerbとの統合についてなどは近年のフレームワークにおいてとても興味深いニュースとなって、フレームワークを取り巻く環境全てがホットだった。

感謝

HTMLコーダーである自分がWEBアプリケーションを構築することができたのには、もちろん自分の中で興味があり挑戦していくこともあったのだが、一番は様々な人のおかげ。
特にプロジェクトとして認めてくれたマネージャーには感謝です。
また、Feedに登場してきた全てのRails関係者の皆さんにも多大な感謝。

まだまだこれから覚えていかないと行けない事も多いし、これからは自分がそういった歯車の一部になっていけるよう精進したいと思いました。

こまかい話

は、これから続きとして書けたらいいなと思います。

雑誌のような段組みができる jQuery plugin「MULTICOL.」

CDATA[HTML上で段組みを実現するjQuery Plugin、[MULTICOL. を公開しました。

去年くらいに作ったんだけど、jQueryのプラグイン化と安定性 / 速度を少し改良してGPLライセンスで公開します。

  • 商用OK
  • 再配布OK
  • 表記はすること
  • ソースは公開すること
  • といったオープンソースのライセンスらしいです。

    これを使えば、HTMLではできなかった雑誌のような美しい段組みが実現できるようになります。
    設置方法もなるべく簡単にしました。

    こういうのを公開するのは始めてなんだけど、できることなら広まってほしいなぁ。
    そんで使ってもらったり、改良されてもっと凄いものにしてほしい。

    ホントは広めるのも作った人の責任なんだけど、ちょっと認知度がないんでどうにかならんものかな。

    サンプル・詳細・ダウンロードはこちらから:MULTICOL.

    HOKYPOKY. (ver.2008-Winter) Snowflake

    Snowflake

    えーっと、いろいろあってとりあえずリニューアルしました。

    とはいえ、時間が足りなくてとりあえず中途半端ですが、見れる形にはなったと思います。
    ちなみにIE6使ってる人は見れません。そろそろみんなIE7使おうよ。
    まだまだ納得いかないし、微妙に変則的だからどうなん!?って感じもあるけどそういうことができるのも個人サイトかな。

    今回のテーマはSnowflakeという名前にしました。
    こういうレイアウトってボクがWEB始めたころによく見たような気がする。
    それとはちょっと違った雰囲気にはしたつもりだけど。

    そろそろ冬ですね。ってかもう冬ですね。
    夜は特に冬のにおいがします。

    冬のテンションすきなんだよなー。

    深夜2時くらいに外でると最高なんだよなー。

    楽しみだー。

    でも寒いのは嫌いだ。

    プチリニューアル。

    いやさー。
    黒いサイトってカッコイイとおもうんだけど、やっぱりずるいと思うんだよね。
    個人的には。

    というのも黒と白じゃ黒の方がカッコイイからね。

    白いサイトがいいなーなんて思ってて、会社の喫煙所でタバコ吸ってたら、最近の100円ライターってライトが付いてたりするもんだから壁にあててたのね。

    そしたら「これや!」ってなってちょこっと10分でプチリニューアルしてみた。

    ただ、出来上がったものをみてコーネリアスそのもの。
    もういい。きっともとに戻すでしょう。とりあえずこれでやってみる。

    ClearTypeSWF

    ClearTypeSWF

    このサイトのロゴの効果はClearTypeフォントよりヒントを得て作成しました。

    よくみるとRGBのチャンネルが左右に少しぶれてます。

    で、とにかくこの効果が好きなのでAS3の勉強がてら画像読み込みで自動的にぶれるサンプル作ってみた。
    ソースもダウンロードできるようにした。

    ClearTypeSWF

    かなりAS初心者なソースなんで誰か指摘してくれたら嬉しいです。
    ちなみに、これをムービーなんかにも適用したらかなりかっこいい効果になると思ってるのはボクだけでしょうか?
    あと、クリックしたらリンクとか、マウスオーバーしたらぶれ始めるとかそういったアクションもつけたげたいね。

    色々やりたいのと、色々やってるのでは雲泥の差だなと最近すごく思います。
    なのでしょぼくてもこうやって公開していけたらなと思いました。

    [みんなの力をわけてください!] grafti.jp

    お願いがあります!!!以下のサイト

    Yahoo Japan Internet Creative Aword
    これの右列2行目!

    Yahoo! Japan Internet Creative Awordという賞の最終選考に残ってます!
    よくわかってなくてもいい、とりあえず応募してあげてください。
    「選択する」にチェックいれて下のボタンから「選択した作品に応募する」です。

    このサイトはこのサイトのブックマークを登録して、いろんなサイトでこれにアクセスすると落書きができます。また、みんなが書いた落書きを見る事ができます。
    詳しくはAboutページで!

    普段みえない秘密のペンと眼鏡。

    あれこれ落書きしちゃおーぜー!というなんともやんちゃなプロジェクトです。

    grafti

    Worksにいれたのは、ここのHTMLのコーディングをお手伝いさせてもらったんで一応w
    ほとんどボクは何もしてないに等しいですね。
    これに向けて眠れない日々を過ごした西垣さん、おつかれさまです。

    HOKYPOKY. (ver.2008-Autumn)

    ブログを秋なんでちょっと夜長バージョンにしてみた。

    もちょっとキレイにするつもりっていうかがらっと変えるつもり。
    ってか動画のとことか色々変えたいとこはあんねんけどな。

    そこは、Papervision3Dを触るってことで。

    それと、会社のみんなでガレバン部つくった。
    Mac付属のGarageBandを使ってDTMしよーぜーというなんともノリノリな部活。

    全然だけどとりあえずポスト。
    ほんとさっくりとしたものしかできてないけどまーおっけーっしょ!
    iTunesのビジュアライザだけど動画もつくった(上で再生されてるやつね)んで許してちょ。

    HOKYPOKY. autumn

    那須をもっと楽しむタウン情報サイト|Nasunavi

    会社の同期、Yくんこと渡辺祐樹くんが独立して立ち上げた会社Re:designのお仕事を手伝わせていただきました。
    Yくんはおとなしそうな風貌からは想像できないほどアクティブです。
    たとえばこの上で流れてる動画。このベースがYくんです。バンドやってCDだしてます。
    そういう姿にかなりインスパイアされてきた自分ですがこうやって一緒に物をつくれたことが嬉しいです。

    那須をもっと楽しむタウン情報サイト|Nasunavi

    Link : http://www.nasunavi.info/

    Nasunavi

    ボクがやったのはサイトの肝となる地図のところ。
    あとはブログから地図を投稿できるようにMovableTypeを拡張しました。
    その他技術的なところのサポートは結構できたんじゃないかな。綺麗なサイトになってよかった。

    Credit:
    Planning / Design / HTML Coding / Movabletype : Yuki Watanabe (Re:design)
    Director : Isamu Masuko (Re:design)
    GoogleMap&Movabletype Development : Kotaro Imai (HOKYPOKY.)
    HTML Coding : Daisuke Iso (Re:design)

    このサイトは那須のポータルなんだけど、Yくんがいろいろ営業回ってる姿を想像すると涙で画面が滲みます。結構な数取ってきてることにびっくり。
    みなさんも今年は那須にいってみよう!Nasunaviをみて面白そうな旅行計画たてよう!

    Nasunaviをよろしくお願いします。