Web界隈でにわかに盛り上がりを見せている「PWA」。いったい何者なのか？Webの技術でどこまでできるのか？本当にネイティブアプリの代替になり得るなのか？ 実際にアプリを開発してみることで、そのプロセスを通じて現状や可能性を探ってみます。第1回目は導入編。 PWAとは何なのか？さいきんよく耳にするようになった「PWA」。Progressive Web Appの略称です。 旧来のWebページ・アプリは、表示に必要な情報をネットワークの向こう側から都度取得していました。山奥や地下、フライト中など、オフライン環境下では利用できないのが当たり前。 オフライン環境での利用や、ユーザーへの効果的なアプローチ手段であるプッシュ通知などの機能は、いままでネイティブアプリが独占してきた強みでした。それらをWebアプリでも使えるようにしてしまおう！という技術要素の総称がPWAです。 なぜいま注目されているのか

前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ

LT（ライトニングトーク）ではありますが、久しぶりに発表してきました。「ひとりのエンジニアがフォント沼にハマるまで」というお題です。 Collabo Tips（コラボチップス）Collabo Tips（コラボチップス）は、デザイナーとエンジニアの垣根を取り払いたい！と思う人たちの集うイベント。 今回は恐れ多くもデザイナーという立場から、エンジニアさんがデザインに興味を持ってもらえるような内容を目指して作ってみました。 テーマは「フォント」LTなので、使える時間は限られています。数あるテーマの中から今回は「フォント」にフォーカス、純粋なエンジニアだった自分がどのようにフォント沼（＝際限ないフォント購入への道）にハマったのかをお話しました。 短い時間でも何か情報を持ち帰ってほしいと思い、自分がお世話になった書籍の紹介を中心に構成しました。フォントっておもしろそうかも…なんて感じてもらえれば何よ

iOSエンジニアの皆さん、ゴリゴリSwift書いていますか？サクサク書ける反面、コンパイルにやたら時間がかかってストレスフルですよね。今回は、激遅だったコンパイル時間が「ちょい遅」くらいまで改善したお話です。 あらすじ「ナウでヤングなiOSエンジニアはやっぱSwiftだよね！」ということで、半ば強引にSwiftを採用して直近のプロジェクトを進めていました。 補完機能が頻繁に落ちたり、ブレークポイントの位置がおかしかったり、変数の中身が見られなかったり、謎のエラーでビルドできなかったり、…などなど、まだまだバグはてんこ盛りですが、それらを見なかったことにできる程度にはいい感じです。型推論はそこそこ賢いし、何より簡潔に記述できます。ただの可変長配列のために、もうNSMutableArrayなんて長々と書かなくてもええんやで。 プロジェクトが進むにつれて見えてくる問題プロジェクトが進んでソースコ

先週から、職場であるTHE GUILDのオフィスでインタラクティブコーディングの勉強会をやることになったので、その記録。こぢんまりと、ピザでも食べながら、とはいいつつも真面目に。 第1回目のテーマは「ランダム」第1回目のテーマは「ランダム」。深津さんから乱数についての簡単な説明があり、実際の例をみんなで見たあとは、ほぼ自由。Processingでもくもく組んでいく。 勉強会がはじまる前に腕だめし「ランダム」というテーマは当日の早い段階でわかっていたので、勉強会がはじまる前に、そのキーワードだけで適当なブツを組んででみた。 ばねに繋がったボールを円状に配置して、ランダムな力で順に弾いていくもの。外側に向かう速度を赤色に着色してみた。 ランダム感の恩恵があまり見られず、課題としてはうまくなかった。 ランダムウォーク深津さんが例として用意していたのは、「ランダムウォーク」と呼ばれるもの。 ランダ

時間を計るために、必要な要素は何だろう。 計りはじめを伝えるもの。 経過時間を伝えるもの。 計ることを止めるもの。 実は、ボタンなんかいらなかったりする。 余計なものを一切除いて、ただシンプルに、計ることに特化した「BigStopWatch」。 自分は、このアプリが大好きだ。 標準アプリにあるような、「開始」ボタンはどこにもない。 どこを触ってもスタートする。 勉強会で発表するとき。 料理の出来上がりを待つとき。 時間を計るときには、いつもこのアプリがそばにいる。 クールなUIを引き立てる「Trebuchet MS」 デザインのよさを一層引き立てるのは、黒い背景にふわっと浮かんだ、どこか親しみのある数字。 iPhoneに標準で入っているこのフォントの名前は、Trebuchet MS。 「Trebuchet」は「投石機」という意味。 フォントの名前なのに、なぜ投石機なんだろう？ その答えは、

Xcodeにプラグインを追加しようとすると、これまでは「目的のプラグインをダウンロードして、ビルドして、~/Library/Application Support/Developer/Shared/…に入れて、…」なんてやっていました。が、Alcatrazはそんな面倒な作業をすべてやってくれます。 インストール方法はとても簡単。公式サイトの言うとおり、ターミナルに1行コピペして実行するだけです。 $ curl -fsSL https://raw.github.com/supermarin/Alcatraz/master/Scripts/install.sh | sh ビールの絵文字がお茶目ね。 これがAlcatrazだ！Xcodeを再起動すると、メニューに「Window > Package Manager」が追加されています。 選択してAlcatrazを開きます。 Xcodeをカッコよく仕

よいものをつくるためには、よい道具が必要ですよね。よいアプリをつくるためには、よいMacが必要です。そうです、ぼくは遂に憧れのスーパーマシンを購入してしまいました。この感動を現地からお伝えします。 外箱意外と小さいです。この中にどれほどのパワーが秘められているのだろうか。 いよいよ開封それでは、開封していきます。ﾄﾞｷﾄﾞｷ…。 頭が見えましたよ。 これが全容だ！ｼﾞｬｰﾝ！これが本体だ！WWDCのショーケースの向こうで輝いていたボディが、いまここに。 うっは、めっちゃ軽いですよこれ！！！何も入っていないかのよう。名前に「Air」って付けてもよかったのでは。いや、林檎さんなら次のモデルでもっと軽くしてくれるんでしょう。プリーズワンモワシング。 置いてみた十分小さいので机上に置いてもよいのですが、今回は机の下に置くことにします。 うーん、それにしてもよいデザインだ。 Intel入ってるとは誰

こんばんは、cocoponです。 しばらく間を空けてしまいましたが、第14回横浜iPhone勉強会を開催して、今年も無事にyidevの1年を締めることができました。 第14回のまとめここ数回は主催者が自分でまとめるという寂しい状況だったのですが、今回は「ブログを書くまでが勉強会です(ｷﾘｯ)」と宣言したこともあり、たいへん多くの方がまとめてくれました。 「ブログを書くまでが勉強会です」by cocopon #yidev — Tomohiko Okita (@tmokita) December 21, 2013

こんばんは、cocoponです。 今回は、「読みやすい、頭に入りやすい記事を目指して、自分がどのように文章を組み立てているのか」についてまとめてみます。 — この記事は、ブログがテーマのAdvent Calendar「Blog Advent Calendar 2013」の12日目の記事です。昨日の記事は、conchikuwaさんの「たまにはブログへの愛でも語ってみるか。。。」。 まずは、思いついたことをすべて書く記事を書くと決めたら、まずは思いついたことをすべて列挙します。 はじめは順番も表現も気にしません。思いつくままに、箇条書きでもよいのでガンガン書き出します。 それなりの分量になってきたら、似たもの同士をまとめて分類していきます。 特に伝えたいことを考えて、書く事柄を絞る「伝えたい！」という思いが強いと、ついたくさん書きたくなってしまいます。でも、あれもこれもと詰め込んでしまうのは、

cocopon（ココポン）は日本で活動する開発者・デザイナー。シンプルで美しく、触れて楽しいものを作り続けたい。

タイトルから「稼げる」系の雰囲気を感じて少し警戒してしまいましたが、まったく違いました。ゴメンナサイ。 趣味でiOSアプリ開発をしている視点から、この本を読んでみました。 アプリを「育てる」とはこの本のはじめに、こんな問いがあります。 「あなたは何を持ってヒットと捉えますか？」 たくさんの人に喜んでもらえること？ たくさんお金を手に入れること？ 目的こそ様々ですが、共通しているのは「何らかの対価がほしい」ということです。 「たくさんの人に喜んでもらえる」 = 利用者のハッピー、「たくさんお金を手に入れる」 = 売り上げ、といった具合です。 アプリをつくるには、自分のリソース(時間)を消費します。 その結果、対価が得られればモチベーションが向上し、次のバージョンに注力できます。 しかし、充分な対価が得られなければ…そのうち投げ出してしまうでしょう。 アプリを長く継続させていくこと、つまり「育

前回は、履歴表示のUIがジッパーになるまでをお話しました。 今回は、アプリのアイコンが完成するまでのお話です。 アプリのアイコンがなかなか決まらないアプリのアイコンは、アプリの実装を進めながら、少しずつ作っていました。 しかし、なかなかよいデザインになりません。 今回盛り込みたかった要素は、こんな感じ。 アプリの外観とマッチすること (黒基調、フラット、光)電卓と一目でわかること標準アプリのアイコンに調和することそれで、はじめのアイコンはというと…。 うーん。光ってる感がない。 それと、2色が混じって光るってことも伝えたいなぁ。 2色で光る要素を盛り込んでみる迷走は続きます。 2色で光る感じを出してみました。 微妙です。ビミョー。 完全に詰まりました。 いけてない原因もわからず、このアイコンの状態がしばらく続きました。

前回は、特徴的なカラーピッカーができる過程をお話しました。 今回は、もうひとつの特徴的なUI、「履歴表示のジッパー」ができるまでをお話します。 動画では、00:32あたりから出てきます。 この履歴ジッパー、いちばん賛否が分かれている要素です。 海外のある方からは、 「履歴表示とジッパーは、意味的になんの関係もない。そんなものは廃止すべきである」 なんて感想をいただいたりもしました。 でも、そんなことは百も承知です。 今回の記事では、このあたりの気持ちが伝わればいいなぁと思います。 はじめはジッパーなんてなかったこれが、初期の履歴UIです。 あの特徴的なジッパーはありません。 お気に入り、履歴、設定と、ディスプレイ右下にボタンが3つ並んでいます。 はじめは、お気に入りと履歴を統合するつもりはありませんでした。 ネタ帳にも「一緒にする意味はあまりない」なんて書いてあります。 でもこれ、実際に触

前回は、アプリ名をどうやってつけたか、についてお話しました。 今回は、光の色を変える「カラーピッカー」のUIデザインについて。 プロモ動画では、00:46あたりから出てきます。 1色だけではなんだか寂しいプロトタイプでは青1色でしたが、そのうち好きな色が選べるような機能をつける予定でした。 けれども、好きな1色を選ぶだけでは、なんだか寂しい。 2色にしてみたらどうだろう？ おぉ、思っていたよりステキに光るうう！ 味気なかった世界が、一気に広がります。 こうして、2色方式を採用することになりました。 次は、ユーザーにどうやってこの２色を選んでもらうか？を考えます。 膨らむ夢と機能、使いやすさのトレードオフ色は、ユーザが個性を表現する要素。 多くの選択肢の中から、自分にぴったりなものを選んでほしい。 はじめはそう思っていました。 当時のネタ帳を振り返ると、できるだけ自由度を高くしようと試行錯誤

前回は、モチベーションの谷から脱出して、Lluminoの開発を再開するまでの話。 今回は、とても大事な「アプリの命名」に関するお話です。 いつ名前をつける？今でしy 自分の場合、モチベーションの谷を越えて「いける」と思った段階で命名することがほとんどです。 ところで、Objective-Cでは、クラス名に接頭辞をつけるのが一般的です。 電卓画面のViewControllerで接頭辞が「ABC」なら、「ABCCalculatorViewController」。 第1回で書いたとおり、Lluminoはコードネーム「Heartbeat」で開発していたので、すべてのクラス名の先頭に「HBT(Heartbeatの略)」を付加しています。 名前を変えるということは、つまり、数百あるクラス名もすべて変えるということ。 どんどこクラスが増えていく前に、できるだけ早く終わらせておきたい作業です。 どんな名前

前回は、ふわっと広がるエフェクトができるところまでお話しました。 まだ電卓にすらなっていないLlumino。 今回は、目的とコンセプトを決めて、電卓になるまでのお話です。 触り心地はよい。それで？触り心地のよいボタンはできた。 できたけれども、これをどう活かせばいいんだろう？ ボタンが並んでいる。 等間隔に並んでいる。 どこかで見たことあるような…。 こ、これだ！ Calqumの心臓「CalqumCore」を組み込むCalqumの計算エンジンは、「CalqumCore」として本体とは独立させています。 きちんと分離しておいてよかった。 これを組み込めば、電卓のできあがりや…！ 目的は「計算をする」に決まりました。 さぁ、次はコンセプトを決めよう。 コンセプトを決めるさて、どんな電卓に仕上げよう。 改めて、現在のプロトタイプを見直してみます。 あくまでエフェクトの検証用なので、影や模様などの

どのようにLluminoが生まれ、何を考え、世に送り出されたのか。 ほとぼりが冷めたあたりで、ちゃんと書き残しておきたいと思っていました。 「プロダクトで語るのがデザイナーというものだ！」と考える人もいます。 でも、自身の振り返りになるし、見てくれる誰かに変化が起こせるかもしれない。 …と信じて、チカラかネタが尽きるまで続きます。 第1回目は、Lluminoが生まれるまでのお話。 すべてのはじまりは「触り心地のよいボタン」あるとき、ふと湧いてきた疑問。 「触り心地のよいボタンってなんだろう？」 「触り心地」といっても、触覚のないタッチパネルは、視覚と聴覚でフィードバックするしかない。 ボタンの色を派手に変えてみる？ これは、想像の範囲内。 じゃあ、この色の変化が、ボタンの外側まで広がったら…？ フィードバックを外側へさぁ、ボタンのフィードバックを外側に広げてみます。 どうやって？ とりあえ

今回は感謝を込めて、Lluminoを支えてくれたものたちを紹介したいと思います。 アプリ制作に携わる人の参考になればうれしいです。 10年後でも(たぶん)通じる最強のエディタ – Vim言わずと知れた、流行に左右されない最強のテキストエディタ。 Macなら、さかもとさんが公開してくれているmacvim-kaoriyaがオススメ。 hjklカーソル移動の壁を越えると、脳がキーボードと直結します。 プラグインを入れれば、補完もできます。静的解析もできます。 それでもない機能は、自分でVim script書いてつくりましょう。 UIデザインは、イラレがなくても戦える – InkscapeInkscapeは、オープンソースのベクター系のお絵描きソフト。 アイコンも、UIデザインも、Webページも。 Lluminoのデザインに使っているのは、ほぼこれだけです。 一番お世話になっているであろうこのソフ

2013年も無事、横浜iPhone勉強会(yidev)をスタートすることができました。 conferenceWithDevelopersという巨大なイベントと競合したにも関わらず、多くの方が足を運んでくださり、とてもうれしく思います。 みんなのまとめ@nun_さん: もりだくさんっ！yidev第13回勉強会にいってきました #yidev@EasyStyleGKさん: iPhone 5 の Wi-Fi 不具合について yidev で発表しました@koogawaさん: 2013/2/23 #yidev yidev第十三回勉強会発表@murapongさん: CocosBuilderについて@sumyappさん: App Storeでの収益化@yaso_sanさん: アプリサウンドを作ってみよう@EasyStyleGKさん: iPhone 5 の Wi-Fi ちゃんと動いてますか？@cqa0230