More Channels
Showcase
Articles on this Page
- 11/29/10--20:11: _サクッと遊べるちょっとクオリティが高い...
- 11/29/10--22:49: _来てるぜ未来！3D系のiPhone／i...
- 02/07/11--09:12: _大量の画像をサクサク処理するためのエン...
- 02/07/11--09:12: _今熱い！無料オーディオ系サービスのUI...
- 02/07/11--09:12: _デザイナーブログ11月の人気記事
- 02/07/11--09:12: _カヤックソーシャルアプリ『ぼくらのワー...
- 02/07/11--09:12: _運気アップのiPhoneアプリ！２つ同...
- 02/07/11--09:12: _HTML5でつまずきやすいasideと...
- 02/07/11--09:12: _今年ありがとうを言いたい「html5の...
- 02/07/11--09:12: _今年ありがとうを言いたい『Google...
- 02/07/11--09:12: _Facebookアプリ「MANGA B...
- 02/07/11--09:12: _ Webクリエイターの公開採用試験を開...
- 02/07/11--09:12: _今年ありがとうを言いたい「イベント3つ...
- 02/07/11--09:12: _W3CのHTML5のロゴを表示しました...
- 02/07/11--09:12: _誰でもできるiPhoneアプリのプロト...
- 02/07/11--09:12: _卒制採用にのっかって「コーディング推薦...
- 02/07/11--09:12: _文字BOOK！日本語オススメ書籍３選
- 02/14/11--18:40: _地獄のミサワがCSS3の勉強に最適と話題に
- 02/22/11--11:11: _面白法人カヤック2012年度新卒採用説...
- 02/24/11--21:50: _iPhoneデザインで役立ったツールまとめ
- デザインを選んだら1クリックであなたのカードを作成します。
- 友達の名刺を勝手に作ることもできます。
- 名刺を生成したらユーザーのアルバムに保存→タグづけ。
- アルバムに保存したことがウォールにポストされます。
- タグがつけられた写真はその人のプロフィールページに掲載されます。
- iPhone上で動く
- フルスクリーン対応（アプリによる）
- ファイルを開くだけなので、メールで送ったり共有も簡単！
- 後からの追加、削除も柔軟に対応可能
- デフォルトのUIを使わない場合のテストに真価を発揮します
- 次に進むためのボタンが分かりづらかった
- 必要なボタン、情報、アラートが示されていない
- 目的を完了するまでに、ものすごい手間が煩雑になっていた
- エラーをしても、アラートが出てこない
- スライドソフトで画面を作成
- PDFで書き出し
- iPhoneに送る
- アプリで開く
- 書き出し設定：スライド
- オプション：全て外す
- 対象は 2011年3月に卒業予定の方
- jsdo.itで「課題」に挑戦していただきます（課題については後ほど説明します）
- 卒制採用のページから、作品のURLを添えてエントリーしてください。希望職種の欄には「意匠部（ME課・コーティング推薦）」とご記入ください
-
集まった作品をME課のみんなで見させていただき、「これは！！」という作品を投稿頂いた方をME課から推薦・面接に進んでいただきます！
※その他詳細は、卒制採用に準じます - 上記の作品をフォーク（改変）して作成してください
- htmlのテキスト情報を適切にマークアップしてください（多少の改変はOKです）
- デザインは自由です。あなたらしく装飾してください。
- javascriptは使用しても使用しなくても構いません
- 自分たちが面白く働ける会社であること
- 他人から「あの会社面白いよね」と言われること
iPhoneってユーティリティ以外にもゲームが充実していますよね
今回は難しい操作はなく、すぐに遊べるゲームを紹介していきます。
個人的な目線でクオリティが高いものをピックアップしていきます。
早速見てみましょう。
Angry Birds
いわゆるパチンコゲーム。鳥をパチンコでぶっぱなして豚をやっつけるというシンプルゲームです。
積まれてる構造物の壊し方を計算したり、特殊能力を持った鳥をつかったりと
シンプルながらに計算を用いる深いゲームになってます。
アプリのダウンロードはこちら！115円
フリー版はこちら！
Pocket God
いわゆるいじりゲー。キモかわいいキャラクターを投げたり
海に落としたり、空に飛ばしたり何でもありなゲームです。
傾きにも対応しておりユーザーの行動でいろんな反応をしてくれます。
いじれるだけでなく、マップによって隠しミニゲームもあったり
楽しさがいっぱい詰まってます。
アプリのダウンロードはこちら！115円
Minigore
いわゆる撃ちゲー 変だけど変にかわいらしい生き物をひたすら撃ちまくります。
ショットガンやボムまたは無敵状態を使いこなしてハイスコアを目指します。
グラフィックのモデリングも独特でかわいらしいゲームになってます。
アプリのダウンロードはこちら！115円
Doodle God
いわゆるパズルゲーム。火や水などいろんなエレメントを組み合わせて新しいエレメントを創造していきます。
ただそれだけですがシンプルながらに中毒性があります。
エレメントが増えていくとドラゴンだったりパソコンなども創造できます。
Flashゲーム版も人気があるようですね
アプリのダウンロードはこちら！115円
Zombigotchi
いわゆる育成ゲーム。褒めたり、いじめたり、するシンプルなゲームですが
その反応での動きが細かいところまで作られていてクオリティが高いです。
こちらはクリエイティブな紹介ムービーが話題になってましたね
アプリのダウンロードはこちら！230円
まとめ
こうやって見ると今回はかわいい感じのモノが多かったですね
シンプルながらにはまってしまうという部分に何かものつくりのヒントをもらえそうです。
皆様もちょっとした待ち時間にいかがでしょうか
どうも、ねじです。
3DテレビやKinect、そして来年はニンテンドー3DSが発売されるなど、盛り上がりを見せる3Dの世界。iPhoneやiPadアプリの3D系はどうなっているのでしょうか。調べてみて気になったトピック４つほどご紹介します。
３D版ちい散歩！『Epic Citadel』
Epic GamesのiOS版「Unreal Engine 3」のデモアプリ。とくにゲーム要素はなく、お城や大聖堂などをプラプラ散歩するだけの、いわば「ちい散歩」アプリですね。しかし３D空間を直感的に歩ける操作感には驚かされます。地井武男さんばりに声を張ってプレイしてみてはいかがでしょう。
「皆さん、最近歩いてますか! 散歩っていいですよ〜! さぁ、散歩に出かけましょう!!」
ダウンロードは下記からどうぞ！無料です！
キャプテンEOの衝撃から20年！『HoloToy』
3Dメガネなしで立体視できるゲーム機ということで、期待の高まるニンテンドーDSですが、それよりも早くiPhoneやiPadで裸眼3Dを実現できると話題になったアプリです。正確には加速度センサやジャイロセンサを巧みに活かして、それっぽく見せているだけなのですが、その精度がけっこう高くて楽しめます。ただの立体視からゲームまで、いろんなサンプルがありますよ。
1987年にディズニーランドの3D立体映画アトラクション『キャプテンEO』（主演：マイケルジャクソン）が登場して、感激しましたが、それから20年の時を経て、時代はここまでやってきました。マイケル…、あなたなら何を思うでしょう。
ダウンロードは下記からどうぞ！230円です！
360°シューティング！『N.O.V.A.』
iPhone 4に限った話ではありますが、１人シューティングゲームの「N.O.V.A.」がiPhone 4のジャイロスコープとRetinaディスプレイに対応されました。これによって、iPhone 4を動かして回りを見渡すことができるようになりました。文章だと分かりにくいので、映像を観てそのすごさをご覧ください！そして、どなたかゴルゴ１３バージョンも是非つくってください！
ダウンロードは下記からどうぞ！未来はお高め、800円です！
こういう手もあるのね！『i3DG』
アプリではないのですが、今年のアルスエレクトロニカで入選をした、iPhoneをつかった新しい3D映像装置です。鏡を使って２Dの画像を重ね、３D映像として展開します。そのため特別な装置はいらず、このフォーマットに合わせてコンテンツを作れば、簡単に３D映像が作れます。３Dの見え方としてもきれいだし、このフォーマットでゲームやったら全然違う体験になりそうです。実用的ではないのかもしれませんが、こういうアイデアはいいですね！！山田君、座布団１枚持ってきて〜。
詳細は公式ページからどうぞ！
i3DG
まとめ
調べていくと、3D系もけっこうありました。しかし、まだまだ目立つものは技術的にすごいとか新しいってものが多く、新しいものを作る余地はありそうです。これからも、この分野は見逃せないですね！
大量の画像を書き出す場面に遭遇して( ꒪⌓꒪)ってなるのはWEB屋の宿命のようなものですが
そんな書き出しを一瞬でもはやくやっつけたい。
むしろやりたくない。なにもかも機械に任せたい。
機械がやってくれてる間にはとサブレ食いながら優雅にFaceBookをたしなみたい。
そんなめんどくさ効率を追求するために調べたまとめです。
なにかお役に立つものがみつかればうれしいです。
書き出しをとにかく速くしたい
スライスチップ作成パレット
スライスがFireworksみたいになるエクステンション。ほんとうに助かってます。
ワンクリックでスライスができるのでガイドつくってちまちまやるより数倍速いです。
Flash Helper Scripts
Flash Helper Scripts：JavaScriptで「Flash＋Photoshop」連携をパワーアップ！ | デベロッパーセンター
フラッシュデベロッパー向けのスクリプト集ですがデザイナーでもとても助かります
初期からはいっているスクリプトではカバーできない場合につかいます
詳しい説明もしていただいてるのでぜひぜひ！
同じ処理を繰り返したい
ドロップレット
リサイズはドロップレットにぶっこむ
似た画像を大量に作りたい
【Fireworks】グラフィックウィザードで大量の画像を自動で作る | バシャログ。
Fireworksで作るとても丁寧でわかりやすいエントリーです。
Photoshopで変数を使って見出し画像リソースを管理する | A Day in the Life
同じような事がPhotoshopでもできます
PSD内のテキストだけ抜き出したい
PSDの中に入っているテキスト部分を自動でエクスポートしてくれるスクリプト
テキストがFixしていた場合コーディングが楽になります。
インストールはリンク先の作ってくれた方々に感謝しつつ各自の責任でお願いします
追加したエクステンションやプラグインはsugarsyncやdropboxに入れて一括管理すると
他のマシンで必要になったときすぐ取り出せて便利です。
配布元が消えてしまうのもよくあるので気に入ったプラグインは保存しておくと安心です。
プラグインフォルダそのものを同期するのは自動追加される訳ではないのでメリットが少ない上にソフトの立ち上がりが不安定になるのでいまいちでした
増えつづけるブラシの管理に便利なソフト
http://www.brushpilotapp.com/
なにかお役に立つものが見つかればうれしいです。
じゃ また〜
昨日、2010年12月1日、ついに
IPサイマルラジオ「radiko」がついに本格サービススタート！
ワッショイワッショーイ！
てなこともあり、無料音声配信コンテンツが今最高にアツイ！と信じて疑わないgunjiです。
映像系サービスが大人気の今、なぜあえて音声だけがイイのか？
それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが
ひとつは、コンテンツを配信する方・視聴する方 両方にとってハードルが低く、
別のことをしながら利用出来るということが挙げられると思います。
まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど
作業用BGMなら仕事の効率がアップすることもありますしね。
移動中も眠りながらも聞いていられますしね。
というわけで今回は国内外の、特にプレイヤー部分のUIが面白い
無料オーディオ系サービスをご紹介したいと思います。
「ながら利用」を加速させるプレイリストなどの機能にも注目です。
radiko
冒頭でもご紹介した日本のIPサイマルラジオ、つまり
インターネット上で地上波ラジオの放送が聞けちゃうという夢のようなサービスです。
テスト運用時は関東で聞けるのは首都圏だけでしたが昨日から北関東でも聞けるようになりました。
今後エリアが拡大していって、どこでもネット越しにラジオを楽しめる時代が来ると
思うとwktkが止まりません！
メインのページには番組表や特集のビジュアルがあって、再生開始すると
細長いプレイヤーウィンドウが立ち上がります。
今放送中の局のロゴと番組の情報が上3分の1に収められています。
iphoneアプリもこのプレイヤーウィンドウとほぼ同じUIになっていますが
スマートフォンのインターフェースが先にあって、PCのプレイヤーもそれに
あわせたのではないかという気がします。
Yahoo!ミュージック
つづいて国内のメジャー？どころとして、
Yahoo!が運営するオンラインジュークボックスを。
国内最大級のユーザ数を誇るだけあって、レビューや評価、ランキングなどが
目立つようなレイアウトになっています。
曲によってはプレイヤーの中で歌詞がすぐ参照できるのが嬉しいですね。
※プレイヤーはInternetExplolerでしか開けません。
※プレミアムでないユーザはいくつかの無料番組のみ再生できます。
blip.fm
音楽版twitter！
音楽をつぶやくことをBlip、つぶやく人をDJ、他の人の投稿にFav（イイネ！）することを
Propすると言います。シャレオツ！！！もちろんほかのDJをフォローすることも可能。
自分と音楽の趣味が近い人をフォローしていくといつの間にか、だら聞きに最適な
ミュージックタイムラインができているという寸法。
UIもtwitterライクでシンプル。
プレイヤーは画面下に固定。場所を取らないように最低限の情報しか入ってません。
海外のオーディオサービスは特に下固定のプレイヤーが多いような気がします。
出典はメインカラム、映像がある場合は右上に出ます。
ちなみに昔は自分で好きなMP3をアップすることもできましたが、今はできません。
Youtubeなどネット上にアップされた音楽を検索してBlipします。
APIを公開してるので、いろんな環境でおしゃれなクライアントが出たりしたら
楽しいのになーと思います。
AudioBOO
音声版twitter。Blip.fmがDJとして音楽をつぶやくためのサービスである一方
こちらはPC／iPhoneアプリからその場で5分以内の音声を録音し、投稿することで
本当に自分の声で「つぶやく」ことが可能です。twitterやFacebookに同時投稿もできて
投稿したタイムラインがそのままPodcastにもなります。
音声リストのユーザーアイコンにオンマウスするとそこがローディング→プレイボタンになって
いることが分かります。音声作品というよりは、あくまでユーザーのつぶやきの一種として
音声を扱っているからこのような見せ方になっているのでしょう。
GrooveShark
フルFlashで超リッチ！ローカルアプリ並の高機能なサービスだけにUIも
iTunesなどに似ていてネット上の音楽をローカルにある音楽データと同じ
感覚で扱えます。脅威のサクサク感です。
最初に開いたとき画面の中央にでっかい検索窓がどーんと置いてあって
アーティスト名などを入力すると一気に曲のリストが出てくるという導入の仕方も
スムーズで引き込まれるものがあります。
画面の一番下にサムネイルが並ぶプレイリスト（キュー）は今年Youtubeも採用していましたが
このサイトではかなり速い時期から取り入れていた記憶があります。
登録しなくてもプレイリストを作ったりして遊べるので、ぜひ一度試してみていただきたいです。
SoundCloud
ミュージシャンが楽曲データを公開したり、共有してコラボのためにやりとりする
ためにつくられたサービスだそうです。著名なアーティストはパッと見いなそうですが、
てきとうに検索しているだけで思いがけずカッコイイ曲に出会えたりして楽しいです。
音量が見えるのでひと目で音声データだと分かるプレイヤーユニットが並んでいるのがとても
特徴的ですね。そして、曲のある時点にコメントすることができて、再生していると
タイムラインに沿ったコメントがポコポコふきだしで出てくるのも面白い！
作品に対する反応の盛り上がりっぷりをうまく視覚化している珍しい例です。
PIAPRO
ここは音声専門ではなく、ほかにイラスト、テキスト、3Dモデルを投稿して共有できるCGMで
初音ミクで有名なクリプトン社が運営しています。ミクや他の自社ボカロとインターネット社のボカロ達に
関わる創作を二次創作もふくめ自由に行うことができる、オリジナルのライセンス体系を持った
サービスです。ニコニコのPのみなさんのデータ置き場としても活用されています。
音声の詳細ページは、動画っぽいでっかいサムネイルをクリックするとブログパーツが
ポップアップで出てくるという少し分かりづらい作りなのですが、トップページの注目の作品がユニーク。
作品名と投稿者名だけが並ぶリストの右側に縦長のバルーンで作品の詳細情報が出て
その一番下に大きめのプレイヤーが固定で置いてあります。このエリアだけ独立したアプリチックですね。
こえ部
そして手前味噌ですが弊社運営の国内最大級・音声専門コミュニティ「こえ部」です。
こえをリクエストしたいお題職人、喋ったり歌ったりしたいコミッター、イイ声に出会いたいリスナー
という３つの属性のユーザーがいる都合、音声データひとつに対して付加情報がとても多いため
このようなブログパーツはともかく、サイト内のプレイヤーは、
リストがその場でパカっと開いてプレイヤーと詳細情報、コメントという盛り沢山な付加情報が出てくる
というかなりチャレンジングなUIになってします。
正直直感的に分かりづらいな～という意見も多く、今いろんなサイトを参考にしたり
ユーザーにアンケートをとったりしながら、革新的で分かりやすい音声プレイヤーの形を
全力模索中です。
来年にはリニューアル予定ですのでお楽しみに！
よろしくお願い師走！！！！！！！！
師走が来ました！
冬晴れの空を見上げて、今年を振り返りつつ、来年も元気で行こう！と思うbarimiです！
さて、11月の人気記事をまとめました！
11月の人気の記事TOP10
いま読むべき、クリエイティブWEBマガジン10選
いろいろなWebマガジンのなかでも、特に注目のクリエイティブ系のものがまとめられています。
Facebookファンページ、デザインのまとめ！
Facebookのファンページのデザインギャラリーや、変わった見せ方をしているファンページをまとめています。
ログイン画面の離脱率を下げる！ECサイト各社の工夫
ECサイトのログイン画面が、まとめて見れます。サイト制作時に役立つ記事です！
永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）
キャリアごとのモバイルサイト制作について分かりやすく解説。テンプレートおまけも要DL！
購買意欲を刺激する！印象的なHTMLメルマガ10選
ECサイトのメルマガを構成を見ながら解説。各社の工夫が垣間見れます。
WEBデザイナー向け☆iPhoneアプリのUIデザイン
iPhoneアプリを作るデザイナーのためのまとめ。
HTML5で出来たこのサイトがbいいね！
HTML5でできたキャンペーンサイトやサービスなどを紹介しています。
iOS4.2のSafariから追加された加速度センサーでシェイクジェスチャを作る
iOS4.2のsafariに搭載された、加速度センサーを使ったデモを紹介。ソースも公開しています。
PCサイトの常識が通用しない！携帯サイトでクリックしてもらえるボタンの作り方
携帯サイトでのボタンの見せ方についてまとめています。キャリアごとの違いも解説！
【新人Webデザイナー向け】Webドリル vol.3： 背景なのに、目立ち過ぎ！
新人のデザイナーさん向けの、よくある制作での出来事を解決する方法をまとめています。
11月まとめ
今月は、Webマガジン、Facebook、ECサイト、HTML5など、まとめ記事が人気でした！
やっぱり年末に向けて仕事も忙しくなりがち、サクっと短時間で見れる記事がいいのかもしれないですね！
12月で締切り！いっそげ～！
面白法人カヤックでは、モバイル、スマートフォン、HTML5・CSS3に注目しているデザイナー、マークアップエンジニアを大募集中！
年内中に採用が決定すると、鎌倉移住支援として、敷金礼金全額負担しますよー！
カヤックに入社すると敷金・礼金 全額負担！ 鎌倉移住キャンペーン12月まで！
Webデザイナー・マークアップエンジニアも応募可能！
こんにちは！
携帯中毒のゆりっぺです✿
早速ですが、カヤックでつくったソーシャルアプリ、
『ぼくらのワールドリーグ』が、マッシュアップアワードで賞をいただきました！！！！！
パチパチパチ(拍手)！！！！！！
こちらが先ほど行われた授賞式の様子です！
ディレクターは、今年入社したばかりの新入社員！北川君(左)です！
賞品はなんと、webマネーのモバコイン5万円分！(笑)
『ぼくらのワールドリーグ』のここが面白い！！！をざっくりご紹介
こちらのＱＲコードからアクセスできます↑↑↑
『ぼくらのワールドリーグ』は、サッカーで世界一のクラブチームを目指すモバゲーのソーシャルゲームです！
世界中のクラブチームから所属チームを選択し、仲間と切磋琢磨し合いながら、試合に出場し、勝ち抜いていきます。
地域予選を勝ち抜くと、世界の強豪が集うワールドリーグに出場することができます。
遊んで楽しいミニゲーム
心地よいフラッシュゲームでついついやってしまいます。
ドキドキの試合結果
数秒のフラッシュで試合結果を見ることができます。自分がチームでどれくらい活躍したかもわかってしまうので、緊張しますね！！！
みんなで仲良く作戦会議
チームのメンバーはここで会議をします。勝ちたい試合で負けてしまった時などは、ぶつかり合うこともあるのですが、結果的にはﾓﾊﾞ友になるなど、仲良くなってしまう人もいるとか...
サイト内でイベントやってます
『公開練習イベント』
2010年12月7日(水)13:00まで。
来週からクリスマスイベントも開催予定。
キャンペーンもやってます
アプリＳＴＹＬＥの読者限定でレアアイテムをプレゼント！！
2010年2月9日(水)19:00まで。
なんと『英雄になりたい』も受賞！！！
同時にカヤックのソーシャルゲーム英雄になりたいも受賞しております！
おまけ！
「ぼくらのワールドリーグ」の姉妹サイト「ぼくらの甲子園」もあります。
野球好きの方には特にオススメめです！！是非是非やってみてください！！
また、カヤックには、他にも素敵なアプリが多数あります。
こちらにまとまったページがありますので、良かったら遊んでみて下さいませ↓↓↓↓↓↓↓
こんにちは、カヤックのラボチームBMKids（ブッコミキッズ）のねじです。
先日マッシュアップアワードで優秀賞をいただいた「安心レーダー」に続いて、新作iPhoneアプリを２本同時リリースしました。「つまらない話でも爆笑してくれるアプリ『笑い袋』」と「持ってるだけで運気アップ間違いなしの縁起が良いアプリ『縁起物』」です。
笑う門には福来る！爆笑アプリ『笑い袋』！！
笑い声が響き渡る幸せな空間は素敵ですね。昔から笑う門には福来るとはよく言ったものです！この優れものアプリは、画面をタップしたり、揺らしたり、周囲 の音や声に反応して笑ってくれるのです。子供の楽しい遊び相手に、合コンの盛り上げ役 に、 寂しい一人暮らしに、会議やブレストのお供に。是非、笑いで世界をハッピーワールドにしましょう！
ちなみに、僕が個人的に気に入っている「外部の音に反応して笑ってくれる機能」。これによって、僕のつまらないギャグにも笑ってくれるし、みんなの iPhoneやiPadに入れて同時にアプリを立ち上げると、iPhone同士の笑い声に反応してまた別のiPhoneが笑ったり、混沌の世界になるので す。
爆笑するiPhoneくん、iPadくん
また、ランダムでいろんな笑い顔が登場しますので、そちらも合わせてお楽しみください。
※あまり連続でタップしすぎると、怒りだすことがあります。それでも無視してタップし続けると、大変なことになる可能性がありますので、ご注意ください！！！
さらにさらに、現在こえ部でユーザーの皆様からたくさんの笑い声を募集しており、アップデート版にはそれらの大量の笑い声が増える予定です！！！忘年会、年末年始を笑って過ごすために、おひとついかがでしょうか。
ダウンロードは下記からどうぞ！
※ただいま発売記念セールにつき、12月16日まで通常115円のところ無料でダウンロードが可能です！
縁起の良い物だけを集めた究極のラッキーアプリ『縁起物』！！
これは世界の縁起物、ラッキーアイテムと呼ばれる物がギュっと詰まったiPhoneアプリです。持っているだけで心強く、運気がアップしたような気分にな れる最強の人生後押しアイテムです！アプリ内にはだるまや大吉など、分かりやすい縁起物から、恋人の眉毛３本のような変わったものまで、いろいろ入ってい ます！（恋人の眉毛３本を肌身離さずもっていると、恋人と別れないという言い伝えがヨーロッパにはあるそうです！！）
主な機能
１：画面をタッチすると縁起物の説明が表示されます
２：打ち出の小槌を振るようにiPhoneを振ると、ランダムに縁起物が切り替わります。
３：画面を横にフリックすると前後の縁起物が表示されます。
ある世界の地方では魔除けだったり、ある地域ではありがたいお守りだったり。私たちの身の回りにも知らないだけで、沢山の縁起物が埋まっています。縁起の 良い画像だけでなく、縁起物のエピソードも書いているので、豆知識が増やせます。縁起の良い物を見て運気をあげて、楽しいハッピーライフを送りましょう！
ダウンロードは下記からどうぞ！
※ただいま発売記念セールにつき、12月16日まで通常115円のところ無料でダウンロードが可能です！
HTML5分かりにくいですよね。
初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！
自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。
さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。
そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。
まずその前に
本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。
文字コードの指定はmeta要素のcharset属性で
今までは以下のようにmeta要素の中に長々と属性を指定していたと思います。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
しかし、HTML5ではこう書きます。
<meta charset="UTF-8">
「え？これだけ？」と思った人もいると思いますが、これだけです。簡単ですね。
IEの8以下の為にhtml5.jsを読み込ませる
IE9ではHTML5をサポートするようですが、現時点で多く使われているIE6～8はHTML5に対応していません。 header要素やfooter要素にCSSで装飾してもそれが全く反映されないのです……
しかし、html5.jsというJavaScriptを読み込ませる事により、IE6～8でもCSSを反映させる事が出来ます。
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
では、本題に入りたいと思います！
asideの使い方
asideを見直す(http://www.html5.jp/html5doctor/aside-revisited.html)によると、
メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切。
と書かれています。つまりasideはサイドバーをコーディングする時に使用してもいいという事になります。 例としては下のようになります。
<article> <h1>記事タイトル</h1> <p>本文本文本文本文本文</p> </article> <aside> <section> <h2>最新記事一覧</h2> <ul> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> </ul> </section> </aside>
しかし、ページや記事と関係ない物をサイドバーに置く事も考えられます(特に広告など)。 ページや記事と関係ない物を置く場合は、サイドバーをdivで囲ってコーディングしたほうが良いと思います。
<article> <h1>記事タイトル</h1> <p>本文本文本文本文本文</p> </article> <div id="sidebar"> <section> <h2>最新記事一覧</h2> <ul> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> </ul> </section> <div class="ad"> <p>広告</p> </div> </div>
またasideは、サイドバーだけに使用されるのではなく、article内などでも使う事が出来ます。
使う場面としては、例えば百式(http://www.100shiki.com/)の記事の下にある管理人の独り言のような所や、記事の中に専門用語を書いた時の解説の役割を果たす用語集などがあると思います！
articleとsectionの違い
<article>と<section>は似た物同士に見えて、実は！全く違う物です。
まず<article>は、ブログの記事や記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップする時に使います。 そして<section>は、文章の構成を示す物となります。
例えば、『永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）』という記事を例にあげると、
<section> <h1>携帯コーディングの基本</h1> <section> <h2>基礎の基礎</h2> <p>内容～</p> </section> <section> <h2>docomoでCSSを使う</h2> <p>内容～</p> </section> </section> <section> <h1>携帯コーディング独自テクニック</h1> <section> <h2>共通項目</h2> <h3>DTD、xml宣言</h3> <p>内容～</p> </section> </section>
という風にコーディングされます。
<section>のコーディングのコツとしては、本の目次を作る感覚でコーディングすれば上手くいくと思います！
連載企画「今年ありがとうを言いたい○○」
2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。
デザイナーズブログでは今年を振り返って、
それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。
第一弾は「今年ありがとうと言いたい『html5の本』」です。
それでは続きからどうぞ！
徹底解説HTML5マークアップガイドブック
タグが一つ一つ解説されています。
html5を勉強するならまず最初に読んでおくべき。
常に手元に置いておきたい1冊です。
HTML5&API入門
html5で何ができるようになったのかが広くまとめられています。
Google API Expertが解説するHTML5ガイドブック
HTML5のAPIについての詳細な解説。
応用的な使い方も。
2冊目、3冊目に読んでおきたい本です。
HTML5＋CSS3で作る 魅せるiPhoneサイト
最近発売された本で品薄ですが、iPhoneサイトについてとてもよくまとまっています。
PCサイトをiPhoneに最適化するためのノウハウなど、デザイナーさんにもオススメしたい一冊です。
スマートフォンのためのHTML5アプリケーション開発ガイド
スマートフォン用のウェブアプリの勉強を始めるなら読んでおきたい一冊。
iPhoneだけでなくAndroidにも対応しています。
iPhoneアプリケーション開発ガイド ―HTML+CSS+JavaScript による開発手法
iPhone用のウェブアプリを実際に作ってみたくなったらこの本。
jQTouchなどのライブラリを使って、それっぽいウェブアプリがつくれます。
年末年始にちょっと新しいことを勉強しようかな、と思っているなら！
おまけ。「ありがとうボタン」
誰でも設置できるありがとうボタンができました！このブログにも設置してみたのでぜひぜひ押してみてくださいね！
連載企画「今年ありがとうを言いたい○○」
前回書いた記事が予想外の評判で驚いています。
読んでいただいた方ありがとうございます！
さて、自分がありがとうを言いたい物ですが、Google Chromeのエクステンションに対して「ありがとう！」と言いたいです。
という訳で、感謝の気持ちを込めて、自分が使っているGoogle Chromeのエクステンション10個を紹介していきたいと思います。
Awesome Screenshot
これは仕事でというよりも、自分が運営している4sqWalkerというブログで記事を書く時に役立っています。
選択範囲や1ページ全体をスクリーンショットとして保存出来るだけでなく、注目してほしい所には丸で囲ったり文字を入れたりする事が出来るのが便利です。
これを入れてからPhotoshopを立ち上げる回数が減りました。
AutoPagerize
検索結果などで、次ページを自動的に読み込んでくれるエクステンション。
基本次ページへのリンクをクリックするのが面倒くさい自分としてはありがたいエクステンションです。
Better Gmail
アドセンスを非表示に出来たり、チャットを非表示に出来たり、マウスカーソルが乗っている所をハイライトしてくれたりと、Gmailを便利にしてくれる様々な物が入っています。
Create Link
今見ているサイトのリンクタグを事前に設定しておいた方法でマークアップして、それをクリップボードにコピーするエクステンションです。他のサイトにリンクを貼りたい時などは、これを使えば2回のクリックだけでHTMLでマークアップされたリンクが出力されるので労力がかなり減ります。
Evernoteにクリップする
"すべてを記憶する"ノートEvernoteのエクステンションです。調べ物をして良い情報が見つかってブクマしても、サイトが閉鎖してしまっては元も子もないですよね。
なので最近はどうしても残しておきたい事については、コピペしてこのエクステンションをクリックしてEvernoteに記憶しています。
忘れてしまっても検索すれば出てくる体験をしてしまったら、もうEvernoteが手放せなくなります！
Google Translate
知りたい情報が英語しかないという時に使っているエクステンション。機械翻訳なので翻訳は不自然ですが、雰囲気はだいたい分かるようになるので重宝しています。
Smooth Scroll
Google Chromeはスクロールしようとすると「ガタガタッ」という感じにスクロールするのですが、このエクステンションを入れる事により、まるで氷の上を滑っているかのごとくスムーズにスクロールしてくれます。
Reader Plus
Googleリーダーを見やすくするエクステンションです。オプションが英語でなおかつ設定項目がたくさんある為、サイトごとに色分けやマウスカーソルが乗っている所をハイライトするくらいしか使っていませんが、それだけでも便利です。
Postponer Manager
あとで読む系のサービス『Read It Lator』のエクステンション。例えばじっくりと読みたい物などはRead It Latorに入れておいて、時間がある時などに読む事にしています。
はてなブックマーク
ご存知の方も多いと思われるソーシャルブックマークサービスはてなブックマークのエクステンション。これが無かったらブラウザーのブックマーク欄が大変な事になってしまいます。
また、検索結果にもはてブされている数が出てくるようになるのですが、それも地味に便利です。
Facebookのプロフィール画像を使ってオリジナルのマンガ名刺を作れるアプリを作成しました！
何ができるの？
バズを起こすためのポイント！
SPEC - Flash and HTML5 -とは
ブラウザ上でFlashを作成できる「wonderfl」と、JavaScript、HTML、CSSを実行できる「jsdo.it」が
提供する公開型リクルーティングイベントです。
企業出題するテーマに対して、ユーザーが得意なプログラム言語で回答するものです。
気になるユーザーの方には、運営事務局を通してスカウトされる場合があります。
審査形式
審査員：株式会社サイバーエージェント
Flash部門、JavaScript,HTML5,CSS部門それぞれから優秀作品を3作品発表。
該当者なしの可能性もあり
作品投稿者の中から、気になる作品投稿者へ、スカウト実施。
Vol1 テーマ
モンスターを捕まえて、育て、戦わせるゲーム『GYAOS!（ギャオス）』のバトルシーンの演出方法を追求してください。
バトル画面のユーザーインターフェース作成、バトルシーンのエフェクト付けなど、
投稿している素材を自由につかっていただき、Webデザイナー、マークアップエンジニア、
Flashクリエイターとそれぞれの見地から、オリジナリティあふれる作品を投稿してください！
優秀作品者には、いま話題の Kinect for Xbox360 を贈呈させていただきます！
スケジュール
募集期間： 2010年12月21日（火）〜2011年1月31日（月）
審査期間： 2011年2月1日（火）〜2011年2月7日（月）
結果発表： 2011年2月8日（火）
賞品
入賞された方には、豪華な賞品もご用意しております！
1位 Kinect + Xbox360
2位 Amebaぬいぐるみ
3位 Amebaキーホルダー
今後もクリエイティブな企業が続々登場します！
お楽しみに！
2010年もあと僅か！
みなさま、こんにちは。
残り数十分で年越しとなりました！あっという間の1年でしたねー。
今回はありがとうを言いたい○○シリーズということで
2010年で刺激を受けたイベント3つを振り返ってみます。
3位 広島国際アニメーションフェスティバル
2年に一度開催される、世界各国から集まった、
手描きやCG、クレイ・人形・切り絵など様々な技法で制作されたアニメーションが上映される映画祭。
細部までつくり込まれた、各国のアニメーションは見応えたっぷりです。
目玉のコンペティションの他に、持ち込み作品のプレゼン、
アニメーションスタジオや作家のセミナーも開催されていました。
2位 瀬戸内国際芸術祭
瀬戸内の7つの島で開催された、芸術祭。
お盆の直島はディズニーランドなみの混み具合だったようで、、、大盛況！
島のあちこちに設置された作品を巡って鑑賞するのは、
街なかで観るのとはまた違う体験ですね。
瀬戸内の自然も堪能できる島時間でした。
1位 SCHOOL OF DESIGN 2
|
スクール・オブ・グラフィックデザイン—デザインと仕事、108のコツ。 |
古平正義氏・平林奈緒美氏・水野学氏・山田英二氏による
書籍『スクール オブ デザイン』の続編、
『スクール オブ グラフィックデザイン』の制作現場を公開授業！
ということで「どんな本にするか？」というところから
撮影、印刷まで毎回気づきの多いお話を間近で聞くことができました。
詳しくは本を読んでみて下さい。
はい。
あんまりwebっぽくないものばかりでしたが、
2011年もおもしろイベントにどんどんいってみようと思います！
おまけ：2010年で印象に残った映像作品
今年一番自分の中でヒットしたCM。
UKでの3DTVのプロモーションの一環として行われたもので
3Dテレビを組み合わせて様々な光景を見せてくれています。
実現できそうな近未来感がワクワクしますね。
それでは、みなさま良いお年を〜
HTML5使ってます！をロゴで表示しよう！
W3Cは、このロゴは「HTML5、CSS、SVG、WOFFといったオープンWeb技術群を表す汎用ロゴマーク」だとしている。Webサイトに表示したり、Tシャツなどのグッズに利用することができる。既にMicrosoftのInternet Explorer 9 Test Driveサイトなどがこのロゴを表示している。ロゴはクリエイティブ・コモンズライセンスの下で提供されている。
デザイナーズブログもhtml5なので、フッターにこのロゴを表示しました！
1分でわかる設置方法
公式サイトはこちら。
ロゴには二種類あります。
用いている技術をアイコンにして表示するパターンと、静的な画像を
アイコンを選ぶパターン
縦横タイプはアイコンを選べます。設置するサイトで用いている技術をアイコンにして表示することができるみたいです。
設置サイトで用いているhtml5の技術を選択するとアイコンが切り替わります。
コードをコピーしてサイトに貼りつけるだけ！簡単ですね。
静的な画像を設置するパターン
ロゴだけのパターンや個別のアイコンなどの素材も公開されています。
これらの画像を設置してもよいでしょう。
PNGだけじゃなく、SVGファイルもあるだなんて！
おまけ
弊社ではhtml5を使っている自社サービスもあります。こちらにもロゴを設置させていただきました！
突然ですが、ペーパープロトタイプって知ってますか？
実演ムービー
今まで気がつかなかった問題に気づけたりと、かなり強力な武器になります！
これをiPhoneの画面で気軽にできないかなー、お客さんに触ってもらったりできないかなーと思ってました。
ピンと来るやつが無かったので、作っちゃいました！
やり方は超簡単なので、今すぐに試すことができますよ！
簡単なサンプルファイルも最後についてます！
それでは「続き」からどうぞー！
ペーパープロトタイプとは
新しい製品、サービスを開発するとき、スケッチを紙芝居の様に動かしながら、テストユーザーに触ってもらうことで使い易さや機能要求などを開発初期段階で調べる手法の一つです
こんな感じに、デザインや実装始めてから気づいたら「やばい」ってなりそうな、構造的な問題を一回洗い出すことができます。
詳しい話が知りたい人は下記のリンクなどを見てください！
ペーパープロトタイプ - Webデザイン図工の時間
今回の手法ですが、簡単に説明しますと
と４ステップで完了します。
ネタバラしすると
スライドソフトのハイパーリンク機能を使って、PDFのページをめくってる
ってだけなので、細かく説明する必要も無かったりするのですが、
僕のやり方を紹介します！
１ スライドソフトで画面を作成
MacのKeynoteにて作成します
(PowerPointは現在、確認中です)
画面サイズをiPhoneに合わせます
僕はiPhone3GSなので、画面サイズを320px x 480pxに指定しました。
これで土台が出来上がりました。
次にリンクの仕組みです
ページ内にボタンにしたい要素を置いて、
ハイパーリンクタブから、リンクの設定をします
はい、これだけでやることは終わりました。
あとは自分の画面に必要なページをつくればOKです。
凝りすぎると表面的なデザインに目が行ってしまうので、ラフな感じでいきましょう！
ちなみに、ハイパーリンクでスライド番号を直接指定していると、
スライドが追加されて番号が変わっても自動的に変更してくれます。
プロトタイプはアップデートを何度も繰り返すので、地味に便利です！
２ PDFで書き出し
「ファイル」の「書き出す...」を選びます
PDFのタブを選んで
でOKです。
3 iPhoneに送る
ここでは僕はふだん愛用しているDropboxを使用しています
もちろん、メールに添付する等、とりあえずiPhoneでPDFが開ければ何でもOKです
Dropboxは、つねに最新バージョンを複数人で共有できるから使用しています。
4 アプリで開く
実はPDFが読める全てのアプリがハイパーリンク機能に対応している訳ではないのです。
もう一つ、常に画面にメニューバーなどが出ていないものを選びます。
僕のおすすめは、Goodreaderです。
上記の機能はもちろんクリアしてますし、DropBoxから直接ファイルを送れるのも便利です
いかがでしたでしょうか？
これなら普段作っているワイヤーのパーツにリンクを貼るぐらいな感覚で、
すぐにプロトタイプがiPhoneで確認できちゃいますよ！
僕のつくったサンプルファイルもこちらへ置いておきます。
モックアップのKeynoteデータはコチラ
モックアップを書き出したPDFはこちら
これを使って、アプリをさらに良いものにしていただければ嬉しいです！
弊社では「卒制採用」を始めました。
面白法人カヤックは、卒業制作をがんばったあなたを積極採用いたします。卒業制作に打ち込みすぎて就職活動が終わってた！そんな方も大歓迎です。私たちの経営理念は「つくる人を増やす。」つくることに打ち込んで、力のこもった作品を生み出したあなたと、一緒に働きたいと思っています。
卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています！
とはいえ、、、
ME志望の学生さんの中には
「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・！
ぜひとも、そういう学生さんにもエントリーしてほしい・・・！
ということで、担当にかけあってきました！
「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います！
就活よりコーディングを頑張ったあなたを推薦します！「コーディング推薦」！
課題について
以下の原稿を「あなたらしく」マークアップ・装飾してください。
ME課 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS
ポイント！
あなたらしい、学生生活の集大成のような作品をお待ちしております！
日本語って面白いんです。
漢字とカタカナとひらがな。さらにはAlphabetまでごちゃ混ぜにして使ってしまう。
そんな不思議な日本語について、もっと知りたい！
というデザイナーにオススメ書籍のご紹介です。
その１.日本語の歴史
まずは歴史から。
これを読めば、
なぜ日本語には漢字とカタカナとひらがながあるのか、
話し言葉と書き言葉はなぜ違う？
などなど、これ一冊でヤマトコトバから現代日本語までその変遷を追いながら
大きな流れがつかめる、
まさに日本語入門書！
ちなみに僕が日本語に興味を持ったきっかけは、こんなおはなしを聞いてからでした。
日本語には、３つの表現方法があります。
例えば、うんこということば。
うんこと言いたい時に現代日本語では、３つの言い方があります。
それは、
「うんこ」
「糞」
「シット」
ひとつひとつの言葉を説明すると、
「うんこ」は古来から日本にあるヤマトコトバ（たぶん）
「糞」は、漢字で表現できるように中国の方から伝わってきた言葉。
そして、「シット」は文明開化で日本にやってきた洋語。
みなさんはこの中でどの言葉がすきですか？
ぼくは「うんこ」です。
「うんこ」ということばの響きを聞いておわかりいただけるように、
ヤマトコトバには不思議な魔力がありますね。
うんこ・・・・うんこ・・・うんこ。
うんこはうんこです。
漢語ではないので、漢字はありません。
糞（フン）は、分（フン）かもしれないし、粉（フン）かもしれない。
シットは、嫉妬かもしれないし、シットがうんこのことだって知らない人もいる。
こんな感じで、文字を持たないヤマトコトバは
聞いてすぐに理解できる言葉が多いのです。
おしゃべりがスムーズにできるように、発音の同じ言葉が少なくなるようチューニングされているのでしょうか。
ちなみに、おしゃべりは、「話す」「トーク」などとも言い換えられます。たぶんヤマトコトバでしょう。
「はなす」とだけ話されたら、放すなのか、話すなのかややこしいですねぇ～。
だからコピーライターの人は、CMやキャッチコピーなどでは、
なるべく一発で意味の通りやすいヤマトコトバを使うようにしているそうです。
あとは、書くという言葉と隠すという言葉が同じ語源で、それはつまり書くことによって本質が隠れてしまうからであって、武術の奥義は得てして口伝でしか伝えられなかったりなどなど。
原初の言葉だけあって万物の根源の本質的な表現が隠されていますね。
わたくし、ヤマトコトバへの興味がつきません。
もっとヤマトコトバについて学びたいのですが、
あまり書籍がなくてまだまだわからないことだらけです。
教えて偉い人！
と、最初の本紹介から長くなりすぎました！（汗
では次に行きましょう。
日本語のデザイン
美術出版社
売り上げランキング: 216458
さきほどは、包括的な日本語の「言葉」の歴史について書かれた新書でしたが、
こちらの本は、視覚分野からのアプローチで日本語の「文字」の歴史に迫った本。
小学校に入ったとき、なんの疑問もなく四角いマス目の中に文字を書く練習をしていましたが、
なぜ、四角の中に収めなくちゃいけないのか。その謎がわかります。
筆書き・活版・写植・ドットで表現されたデジタルフォントと進化してきて、次はどんな文字が出てくるか！
わかっちゃいます。
文字をもたないヤマトコトバがあって、漢字がやってきて、女手と呼ばれるひらがなができて、
カタカナ、そしてアルファベットがやってくる。
そんな文字の変遷をほぼ全ページ図版入りで紹介していくという、
ヨダレ必至の内容になっております。
日本語ってきれいだなぁ～。とデジタル時代のぼくもうっとり。
扉にある、
「獲加多支鹵大王」の文字で有名な４７１年に制作された、金錯銘鉄剣から
現代のドットで表現されたデジタルフォントまで、その流れを図版でずらーっと並べた資料は
まさに圧巻！
ここだけでもぜひ見ていただきたいです！！！
文字はデバイスと共に進化してきたのですね。
それぞれの時代に、それぞれのデバイスに合わせて、
偉大な先人たちが、洗練させてきた日本語の文字表現。
あぁ、日本語ってきれいだなぁ～。
そんなことに想いを巡らせることができること間違いなしでございます。
デジタル時代のワタクシもデジタルデバイスのベストプラクティスとして、
歴史に残るような作品を残したい！と身が引き締まる次第であります。
というところでお次の本です。
その３.レタリングデザイン
あぁ、美しい文字がつくりたい。
そんなあなたにオススメなのがこの書籍。
本のとびらに、 ＜ようやくにして生まれたタイポグラフィの書＞ という
田中一光さんから推薦の言葉がのっている名著です。
いざ、文字つくろう！と思っていろいろな書籍を買ってみたのですが、
いまいちどうやっていいのかわからない。
そんな時に出会ったのがこの本。
漢字
カタカナ
ひらがな
アルファベットと数字まで（！）
それぞれ明朝体とゴシック体で、 一文字一文字、全体のニュアンスと
それぞれのエレメントがどうあるべきか、 詳細に書かれた、入門に最適な本です。
一番実践的な内容でした！
文字作りたいんだけど、何したらいいの？
という方はまずはこちらを読んでみてはいかがでしょうか。
1969年に書かれた本ですが、今も色褪せない名著です。
ちなみにこの本絶版ですが、中古が1円からという
なぜか激安本。
お買い得！
ということで、3冊紹介させていただきました！
ここまで紹介してきて気づいたのですが、日本語おすすめ本は全部表紙が赤！
赤い日本語本は、いい本ということでしょうか。
それはさておき、まだまだ紹介したい本があるのですが、今日はここまで。
レタリングデザインの序文に書いてある、原弘さんのお言葉でしめたいと思います。
「何はともあれ、すぐれた美しい文字をもつことは、民族の大きな財産といわなければならない。」
うーん、あっぱれ！
CSS3に興味はあるけど、きっかけが無いなあと思っている方へ
こんにちわ、jsdo.it担当のふちがみです。
最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。
「それ2年ぐらい前に見たわー」という方も続きからどうぞ！
一瞬でわかるまとめ
canvasで描かれたミサワ
canvasってどこ情報ー？どこ情報よー？
CSS3だけで描かれたミサワ
CSS3でだけでできてるってバレたら心配されちゃってまずいなあ～
植毛されました
っけね～、クリックしたらむぎゅってなっちゃうよね。っけね～
植毛済み forked from: CSS3のミサワ - jsdo.it - share JavaScript, HTML5 and CSS
そして、いろいろあって、こうなりました
全部紹介できないくらい、ミサワコードが投稿されてます。
誰かのコードにちょっと手を加えて楽しみながら学ぶ。それが「フォーク」です。
jsdo.itには「フォーク」という仕組みがあって、誰かのコードをベースにして別の作品を作ることができるんです。
良くできたコードを読むのが上達への近道だったりするんですよ。ぜひぜひ挑戦してみてください！
jsdo.itのtwitterあります
ファンページもあります
っけね～！お知らせがあるんだった！
ちなみに現在カヤックでは5ヶ国語同時生中継で新卒説明会を開催します。
ミサワを5ヶ国語で話させることが出来る人のエントリーをお待ちしております！
『面白法人カヤックは、いったいどこが面白いのか？』6名の社員が語ります。
「面白法人」には、二つの意味があります。
もちろん、人それぞれ価値観は違うので、「面白さ」の判断もさまざまです。
ただ、「面白さ」をつきつめると、『他にはない』『唯一であるもの』という要素が含まれるのではないか？
そう私たちは考えています。
「面白いとは、ユニークであること。」
今回の説明会では、代表、エンジニア、企画、デザイナー、広報など、さまざまな職種の社員が『面白法人カヤックの面白さ』を語ります。
そして今年は、5カ国語対応のオンライン会社説明会！
昨年は代々木体育館を貸し切り、学生1000人を招いて会社説明会を開催しました。
なんと今年は、世界5カ国語生中継と銘打ち、日・英・中・韓・ウズベク語に対応したオンライン会社説明会を行います！
多くの方が利用する英語・中国語、そして代表の本が出版予定の韓国語に加えて、ウズベキスタンのウズベク語を選んだのは、もちろん理由があります。
ウズベキスタン出身のカヤック社員がいるんです！
開催場所は、広さ無制限のサイバースペース。入場制限はありません。
現在のところ、録画放送の予定はありません。
一度限りの生放送です。ぜひ当日ご覧ください。
http://www.kayac.com/recruit/2012online/
-------------------------------------------------------------------------
■2012年度新卒採用オンライン説明会■
-------------------------------------------------------------------------
実施日時：2011年2月25日 20時から21時30分
実施URL：後日、申し込みをされた方に個別にお知らせいたします
参加条件：原則として2012年3月大学・大学院・専門学校の卒業見込みの方
定員：なし
申込み方法：以下のURLからお申し込みください。
http://www.kayac.com/recruit/2012online/
なお、申込みをした方のみ、説明会当日は視聴することができます。
未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。
今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。
それでは早速見てみましょう
マインドマップで遷移図を整理
iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。
マインドマップで整理してみると上記画像のように分かりやすくなりました。
ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。
矢印や階層表示など自動で計算して整列してくれるので
イラストレーターで作るより楽に図形を制作できます。
画像はMindNodeというMacのソフトを使用していますが
XmindというソフトならWindowsにも対応しています。
MindNodeダウンロードはこちら
http://mindnode.com/jp/
Xmindダウンロードはこちら
http://www.xmind.net/
PhoneViewでキャプチャ画像をPCに取り込み
参考でiPhoneアプリを色々キャプチャするのですが
PCに送るためにメールに添付したり同期するのは面倒ですよね
このソフトを使えば同期なしでPCに画像を取り込むことができます。
ダウンロードはこちら
http://www.ecamm.com/mac/phoneview/
ただ、このソフトの欠点はPC上のものを直接iPhoneのライブラリに送れないこと
(ディスクモードとしてデータをiPhoneに入れとくということはできますが・・・)
そこで利用するのが次のツールです。
iPhone寸法図でPC上に原寸サイズを再現
Appleのdeveloperページに行くと原寸大のiPhone寸法図がダウンロードできます。
主にケースの設計用に使用するものですがPC画面上で原寸の大きさを再現するのに使用しています。
デザインの横に原寸サイズを置いておくと何となく感覚がつかめます。
ダウンロードはこちら
http://developer.apple.com/jp/programs/mfi/cases.html
Good reader か Dropbox で実機確認
Good Reader を使用すればPC上の画像を直接iPhoneに送ることができます。
これを利用して実機でデザインを確認しています。
ただこちらもiTunesを立ち上げてぶち込むので
そちらの手間を省きたい方はDropboxをお勧めします。
PC上の共有フォルダに画像を入れておけばiPhoneアプリのDropbox上でも同期がとれて便利です。
(環境によって同期するのに時間がかかる場合があります。)
GoodReader ダウンロードはこちら
http://itunes.apple.com/jp/app/goodreader-for-iphone/id306277111?mt=8
Dropboxはこちら
http://www.dropbox.com/
いやーアプリの開発は大変ですね
皆様はどのようにデザインをしているのでしょうか
もっと様々な方法を模索していこうと思います。
