フロントエンド(FE)温泉会を開催しました。

先週の9/7(土)~9/8(日)に、フロントエンドエンジニアの人達に声を掛けて伊東で温泉合宿をしてきました。
場所は、IT合宿でも有名な 山喜旅館さんです。

写真 2013 09 07 16 03 25

静岡から脱藩した人の頭がちょこっとだけ入ってしまいました。STOP THE 脱藩!脱藩は犯罪です!!!
旅館の中に入ると、申し込みフォームで適当に入力した団体名が、こんな感じで具現化されていました。

写真 2013 09 07 16 04 31

部屋からの景色。海がすぐ目の前。ちなみに左下の建物はステーキ・ガストです。

写真 2013 09 08 9 02 48

今回の参加者さんの中に、「海が近いと助かります。釣り的な意味で」というお二人が居て、どうせにわかだろうと思っていたら、ガチ勢の人達でした(;´Д`) どす黒く焼けた腕も撮らせてもらえばよかった。。。

BThbJHKCYAA9XcL

ソーダガツオ!

BThu60bCMAEA0Cs

みんな揃ったところで、真面目に開発合宿をスタート。やはり、マック率が高い。

写真 2013 09 07 23 29 59

ビールを飲みながら、真面目に開発。

1263934 394565287333184 1808582748 o  1

旅館での夕飯。これにご飯(おかわりし放題)と味噌汁がついて6300円なので、超お得です(*´∀`)
同様に朝食も付きますし、わりと近くにスーパーAOKIとローソンもあります。

1235474 397916450331401 1134935553 n

寝間着の意識が高すぎる2人が居たので撮らせてもらいました。寝ても覚めてもWEBの事しか頭に無いぜという露骨なアピール。意識高スギィいぃぃぃ。

写真 2013 09 08 8 39 19

ちなみに旅館の1階には、このようなカフェテラス的なスペースが。

写真 2013 09 07 16 04 43

なんと、宿泊者であれば珈琲がセルフサービスで飲めてしまいます。料金は掛かりません。休憩中に下に降りてきて一服するのに調度良いですね。ただでさえ、研修プランで安いのにこれも凄くありがたい。

写真 2013 09 08 8 26 25

ちなみにお品書きが置いてあって、地魚料理や地酒をここでオーダーできるようです。

写真 2013 09 08 8 26 32

そして2日目は研修室を借りて、各自それぞれ取り組む事をホワイトボードに記述して、開発スタート。
フロントエンドっぽい単語がずらっと並んで嬉しい限り(*´∀`)
ちなみにお一人だけ2日目からの参加だったんですが、1,000円払えばOKとのことで、ここで合流しました。

写真 2013 09 08 14 53 04

研修室はこのような感じ。ホワイトボードも4面の壁に常備されています。

BTmd9TrCIAA9d27

旅館から徒歩3分程の場所に魚楽亭で2日目の昼食。これは日替わりのカンパチ!凄くジューシー。

写真 2013 09 08 13 09 34

こちらは金目鯛!どちらも新鮮でめっちゃ美味しかったです。この後戻って3時まで続けて終了しました。

1174805 397916423664737 731999072 n

噂通りの素晴らしい宿でした。従業員の方の対応も親切で、清掃や手入れが隅々まで行き渡っているようで、建物は古いのに清潔感が感じられる宿でした。(ちょっと千と千尋っぽいかも)
参加者の皆さんにも満足していただけたようで、次回は1日目にもっと早くきて(チェックインも有料で早くすることが可能)、2日目は観光したいとか言うてる人が居ました。ちなみにこの写真の右奥は、干物屋さんなのでお土産に最適。

写真 2013 09 08 12 11 13

参加者の皆さん、お疲れ様でした!次回も集まってフロントエンド開発しましょう。ありがとうございました!

フォトグラファーが教える素材撮影時に気をつけておくべき8つのポイント

前回に引き続き、先週の3/16(土)に地元静岡で行われたWEB系の勉強会、Talknote Vol.7の3つ目のセッションの記事になります。2つ目のセッション飛ばしてしまって心苦しいのですが、狭間さんにFireworksの特徴の説明とそれを使ったアイコン作成講座をしていただきました。それを説明するには、頂いた資料を貼りまくらないと伝わらないので…申し訳ないのですが割愛させていただきました。

このセッションの岡田さんと2つ目のセッションの狭間さんは、神戸のWEB制作会社株式会社ふわっとの方で、また狭間さんは今月「よくわかるFireworksの教科書」を共著で出されています。また、岡田さんは「デジクリ:おかだの光学部トーク」という活動もされているそうです。

では、3つ目のセッションの内容の紹介へ。

写真素材

サイトで使用する写真素材について、こういった素材を収集する場合、以下の様なケースが考えられる。

  • クライアントから支給される
  • ストックフォト・素材集
  • カメラマンさんに依頼
  • クライアントの担当者さんが撮影
  • 自分で撮影

自分はカメラマンでは無い、無いけどこの業界だと自分が撮影を担当しなければいけない、というケースがあるかもしれない。そんな時のために気をつけておくべきポイントを教えていただきました。

1~8のポイントにまとめて、順に説明していただきました。

1).余計なものをどけておく

  • 真面目に働く社員の写真 → 背景の中央にティッシュ箱が…
  • 子供のモデル → 背景のマットがめくれている
  • クリニックの外観 → 院長「駐車場案内の看板要らない」
失敗写真の修正に時間を使わない!
最後の例であれば、様々なケースを想定して最初から「看板が有り」「看板無し」の両方のバージョンを撮っておく。

2).同じ位置からでも、沢山写真を撮っておく

そうすることで後で楽が出来る!?
例えばPhotoshopの機能を使えば、同じ位置から撮影撮影した何枚もの写真から、移動物を手間を掛けずに綺麗に消すことが出来る。
ただし、Photoshop Elementsなどにはこの機能は入っていないとのこと 。

取材で外観を撮影する時に重宝する!人の行き来が多い場所で、車や人が居なくなるのを待つ必要が無い!
この機能を説明した動画がYoutubeに上がってないかなーと思って探してみたら、まさかの岡田さんご本人がアップした動画が!
Photoshop使い必見のテクニックではないでしょうか。

続きを読む

Talknote Vol.7「2013年、これからのWeb戦略」

遅くなりましたが、先週の3/16(土)に地元静岡で行われたWEB系の勉強会、Talknote Vol.7に参加したのでその内容についての記事です。

1つ目はコトトイ・ファクトリー藤田 拓さんの「2013年、これからのWeb戦略」です。Webプロデューサー、ディレクター的な話かと思いきや、WEBの歴史+未来のまるで大学の面白い講義のような内容で非常に楽しめました。また、自分が個人的に見聞きしてメモしたものを思い出しながら、頂いた資料を参考に噛み砕いたりアレンジしている部分があります。そのため、藤田さんの内容と違う部分があるかもしれないので、その点はご了承ください。

これからのWeb戦略

愚者は経験に学び、賢者は歴史に学ぶ (オットー・フォン・ビスマルク)

WEB以前

Rosetta Stone (ロゼッタ・ストーン – Wikipedia)

ロゼッタ・ストーン、パピルス、ラスコーの洞窟画など、太古の時代から情報の共有をしたいという欲求は存在していた。また、15世紀の発明である活版印刷は、情報の共有という意味で非常に大きな役割を世界にもたらした。

  • コピーしやすいものはミーム(遺伝子)に好かれる
  • 情報は、コピーされやすく、長く保存出来るものほど強い。
  • イミダス、現代用語はWikipediaや類似のWEBサービスに駆逐され、少し前にCDをMP3が打ち負かしたと思ったら、今はMP3よりiTnues(もしくは他のクラウドサービスやストレージ)という状態になっている。

続きを読む

MacOSX、nvm環境下でのNode.jsとGruntのアップデート

乗り遅れた感がありますが、Gruntを4.0にすべくアップデート 作業を行いました。
まずは、Node.jsが古いのでそちらを最新版に上げる必要がありました。

現状の確認

$ node --version
v0.6.5

nvm install latestだと上手くいかず…何故だろう。

仕方ないので、公式サイトで調べた最新の安定バージョンを指定したら上手く行きました。

$ nvm install v0.8.20

インストール開始

######################################################################## 100.0%
{ 'target_defaults': { 'cflags': [],
'default_configuration': 'Release',
'defines': [],
'include_dirs': [],
'libraries': []},

…

installing /Users/tomof/.nvm/v0.8.20/lib/node_modules/npm/scripts/release.sh
installing /Users/tomof/.nvm/v0.8.20/lib/node_modules/npm/scripts/relocate.sh
symlinking ../lib/node_modules/npm/bin/npm-cli.js -> /Users/tomof/.nvm/v0.8.20/bin/npm
updating shebang of /Users/tomof/.nvm/v0.8.20/bin/npm to /Users/tomof/.nvm/v0.8.20/bin/node
Now using node v0.8.20
/Users/tomof/.nvm/v0.8.20/bin/npm

完了。

早速、Node.jsのバージョンを確認

$ node --version
v0.8.20

今インストールしたバージョンにuseを変更するところまでやってくれたようです。
.baschrcにnvm useでNode.jsのバージョン指定するように書いていたので、そちらも変更しました。

#nvm use v0.6.5
nvm use v0.8.20

次にNode.jsのv0.8.20環境下で、公式サイトを参考にGruntをインストール。
公式サイトでは、最新版を入れる前に古いgruntがあればアンインストールするように書かれてます。
今回はnvmで新しく最新のNode.js環境を作成したので不要でした。

$ npm install -g grunt-cli

これもバージョンの確認をしてみる。

$ grunt --version
grunt-cli v0.1.6

v0.4.xと出るかと思ったら、このように表示されました。
まぁ、インストールしたものが”grunt”ではなく、”grunt-cli”なので当たり前といえば当たり前?
この”grunt”と”grunt-cli”については Takazudoさんの記事が非常に参考になります。

Takazudolog – Grunt v0.4.0 での変更点 (「Grunt本体はグローバルにインストールされなくなった件」を参照)

次回からは新しくなったGruntで色々試してみようと思います。

 

WEBフロントエンドエンジニア向け勉強会 – Frontrend vol.4に参加してきました

サイバーエージェントさんが主催するフロントエンド向けの勉強会「Frontrend vol.4」に参加してきました。

前回のvol.3に引き続きの参加で、今回のテーマは「javaScript」でした。
この記事では個人的にピックアップしたい内容だけを紹介しています。全体を通した内容は下記リンク先が非常に参考になります。

「JavaScript Development Tools – JavaScript開発の効率アップ」

登壇者:Layzieさん

Crhrome Developer Tools

まずはChromeのデベロッパーツールですが、同じくサイバーエージェントの吉川さんが既に発表(下記スライド)されていたので、それをふまえつつ、おさらい+追加情報的な感じ。

 

おさらいの中での個人的なメモ

  • Command + O : js / cssファイル検索
  • Command + Shift + O : 関数選択
  • Command + L : 行指定
  • Command + Option + F : js全体の検索
ChromeのProfileは下記の画像のように関数のボトルネックなんかを調べることが出来る。Profileは全然使ってなかったのでこの情報は大変ありがたかったです。自分のローカル開発のスクリーンショットを撮ってみました。
Chrome profile
Chromeの隠し機能一覧URLの紹介。隠しURLがあることは知ってましたが隠し機能一覧を表示するURLがあるとは知りませんでした。

Charles

http://www.charlesproxy.com/

Charles

デバッグ用Proxyで有償$50(試用期間30日)
多機能で全部紹介しきれないので、厳選して2つの機能だけ紹介してくれました。

  •  MapLocal
    • リモートのWebサイトのファイルの一部(CSSファイル等)をローカルのファイルを差し替えることが出来る。
    • デモではCharlesのサイトのCSSをローカルのファイルと差し替えて編集し、背景を赤くするといった事をされていました。
  • Throttle
    • 3G回線などのモバイル環境などの速度を簡単にエミュレート出来る機能。

個人的に調べてみたら、Charlesを紹介している記事を見つけました。

フロントエンドの開発効率が3倍に…!?デバッギングプロキシCharlesの使い方 :: 5509

続きを読む

Backbone.jsのMVCについて

この記事は、Backbone.js Advent Calendar 2012の4日目の担当です。
静岡のjavaScrpt勉強会で発表し、その時にご指摘頂いたことを良い機会なので記事にすることにしました。
ちなみにBackbone.jsは興味本位で多少調べて入門として発表した程度で、業務での実績は皆無です。その点は予めご了承ください。

まず、Backbone.jsを勉強していて、MVCパターンについて酷い誤解をしていることがありました。
WEB系のプログラムの仕事をしていてMVCパターンと聞いて、真っ先に浮かぶことは Ruby on RailsやCakePHPなどの割りと人気のあるサーバーサイド言語のWEBアプリケーション・フレームワークだと思いますが、これを基準としてBackbone.jsのMVCを比較してしまいました。

下記は自分が勉強会の資料で発表したものです。

Backbone.jsのAPIグループを確認

 

Backbone.jsとの比較での勘違い

 

これを発表した際に、@ishisakaさんに間違いをご指摘いただきました。
まず自分は、MVCパターンはStruts辺りのWEBアプリケーション・フレームワークが元祖だと勝手に思い込んでいたのですが、Wikipediaを見ると下記のように紹介されています。

元来Smalltalkにおけるウィンドウプログラム開発のための設計指針として生まれたものであるが、特に構造が複雑となりがちなグラフィカルユーザインターフェース (GUI) をもつソフトウェアにおける有用性から他方面へ広がった。

Model View Controller – Wikipedia

このSmalltalkについて詳しく知らないので何とも言えないのですが、ウインドウプログラム開発、GUIと書いてあることからデスクトップ・アプリケーションか、それに近いものと推察され、こちらがMVCパターンの元祖のようです。
また、Wikipediaのページに下記のような図でMVCの関係図が説明されています。

WikiPediaのMVC図

 

この図がMVCパターンを正しく理解するために重要で、直線と破線について次のように説明されています。

直線は直接的なAssociationを表し、破線は (例えば)Observer パターンを経た間接的なAssociationを表す。

ここでポイントになるのが下記2点だと思います。

  • ViewからModelに対して、直線が繋がれていること。
  • ModelからViewに、ViewからControllerに破線が繋がれていること。

破線の流れをイベント処理と捉えると、確かにBackbone.jsの入門サンプルであるTODOはそのような動きをしていたかと思います。また、Viewからイベントを介して直接Modelを編集する動きに違和感を感じて、Veiwに含まれているEventこそがControllerではないかと誤った思い込みをしてしまいましたが、本来のMVCパターンにおいては全く問題は無く、むしろBackbone.jsのMVCの方がより本来のMVCに忠実ではないかと思ってしまうほどです。というか、そもそもGUIのために生み出されたパターンなので、フロントエンドのBackbone.jsの方が性質がGUIに近く、当たり前とも言えますね…。

かと言って、StrutsやRails、CakePHPなどのWEBアプリケーション・フレームワークのMVCがおかしいのかというと、そういう話でもなく、「サーバサイド言語でMVC構築しようと思ったら、ああなってしまうよね。」といった話を勉強会終了後に地元のエンジニアさん達と話をしたりしました。

これからBackbone.jsを勉強しようとしている方にも、Samlltalkは知らないけど、RailsやCakePHPのようなフレームワークの経験はあるといった方が少なくないと思いますので、予め知っておくとより勉強がスムーズになるのでは無いかと思います。


Amazon Web Services勉強会 at 静岡

第1回 JAWS-UG静岡 勉強会に参加してきましたので、内容についての簡単なまとめです。
Toggeterでのまとめはこちら

Amazon EC2のアカウント作成からWordpressインストールまで

  • 実際に触りながら、Wordpressのインストールまで行いました。
  • EC2上の動作は非常に軽快で、Apache,PHPのインストールの速さに驚きました。
  • ハンズオン重要!次回、勉強会を自分で開催する際には取り入れてみたい。

AWSを業務で使うために上司を説得する方法

  • 上司が説得出来なかったら切腹!どうしてもAWSを使わせてくれないなら、静岡を脱藩なう!
  • サーバーワークスさんは、AWSいじりしたいエンジニアを新卒も含め、スタッフを絶賛募集中だそうです。

科学カイロ

ZIPPO(ジッポー) ハンディウォーマー フリース付 繰り返し使える化学カイロ
ZIPPO(ジッポー) (2008-09-24)
売り上げランキング: 706
  • 55jさんが持っていた物に、懇談会で自分が個人的に食いついたアイテム。
  • 実物はとってもオシャレです。詳細はこちら
  • 寒いサーバルームで作業するエンジニアさんや冬登山する人にオススメ。

懇談会にて伺った興味深いお話

  • クラウドエンジニアはバイク好きが多い?
  • 横の繋がりが結構あって、Amazonさんと他国産サーバ屋さんで集まってお互いの製品、サービスを罵り合ったりしてるとかしてないとか。
  • 地方だとクラウドする程の案件が無いと言われるかもしれないが、過去10年を振り返ればコストの問題でボツになった企画があるはず。実際にそうして堀起こしてクラウドによって実現したサービスがある。

講師の皆様、参加者の皆様、支部長の#A様及びスタッフの皆様本当にお疲れ様でした。次回もよろしくお願い致します。

SenchaTouch入門

CSS NITE IN SHIZUOKAでLTしたSenchaTouchについてなんですが、LTに用いたソースが0.9.3用だったのですが、現在の0.9.5のバージョンでは動かない事が判明 orz。なので、補足として0.9.5用にブログに残しておくことにしました。

Photo 9月 28, 0 08 49

Sencha Touch とは

  • iPhone、アンドロイド向けサイトを作成するためのjavaScriptライブラリ
  • javaScriptの値を調整するようにプログラムを組むだけで、iPhoneアプリで見かけるようなエレガントで一貫したデザインのUIが簡単に作成可能。

まぁ、百聞は一見にしかず。下のデモページをスマートフォン、PCの場合はChromeSafariでご確認ください。

SenchaTouchのデモページ

かちびと.netさんも紹介されています。

iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた – かちびと.net

続きを読む

netstat–nr の意味

$netstat –nr
Kernel IP routing table

Destination    Gateway          Genmask         Flags    MSS   Window  irtt   Iface
192.168.1.0    0.0.0.0          255.255.255.0   U        0     0       0      eth0
127.0.0.0      0.0.0.0          255.0.0.0       U        0     0       0      lo
0.0.0.0        192.168.1.254    0.0.0.0         UG       0     0       0      eth0

どうしてもnetstat -nrの意味(読み方)が分からず、その筋の人にしつこく聞いてやっと理解できたのでメモ。

1行目

IPアドレス192.168.1.0~255のネットワーク空間(Destination 192.168.1.0、Genmask 255.255.255.0)に到達したい場合は、ゲートウェイに行かんでいいから直接(Gateway 0.0.0.0)行ってください。インターフェース(LANの出口)はeth0ね。という意味。

2行目

IPアドレス127.0.0.0に行きたい場合は、同じく直接行ってくださいという意味。ただし、インターフェースはloを指定。これはループバックという、物理的には存在しない論理的なインターフェース。127.0.0.0は実質、自機を表しているので。

3行目

それ以外のネットワーク空間(Destination 0.0.0.0、Genmask 0.0.0.0)に行きたい場合は、ゲートウェイ192.168.1.254に行って(Gateway 192.168.1.254)くださいという意味。インターフェース(LANの出口)はeth0ね。という意味。

0.0.0.0 が表すもの

各項目の0.0.0.0が何を表しているのか知っておくことが重要だと思いました。
Getewayでの0.0.0.0はゲートウェイを介さず直接、行き先へ向かってくださいという意味。
Destinationでの0.0.0.0はネットワーク空間を明示的に指定されていない、その他については、という意味。
この例はCentOSだけど、OpenSolarisでは0.0.0.0はDefaultだったりします。