書き置き。

ほぼ勉強の記録みたいなもんです。

太鼓アプリを作った

絶対に挫折しない iPhoneアプリ開発「超」入門【iOS7対応】増補改訂版

絶対に挫折しない iPhoneアプリ開発「超」入門【iOS7対応】増補改訂版

この本でObjective-ciPhoneアプリ開発を勉強してる。 なんでSwiftじゃないのかって? まさかWWDCで新言語が出てくるとは思わなかったから。

今日は太鼓アプリを作った。(Capter 10)★★★☆☆

  • .wavファイルの読み込みとAVFoundation で再生
  • AudioToolboxを使って音と同時にバイブレーションを鳴らす

の2つ。

ゆーすけべーさんのPodcast「だんごゆっけの平和な話」#000-001 を聞いた

Podcast「だんごゆっけの平和な話」を始めました #dandyfm

先日HOKKAIDOアイディアソン&ハッカソンのセミナーで講演していただいたゆーすけべーさんがPodcastを初めたと聞いて、聞いてみた。

北海道の話

0回目の最初のほうで、北海道に行ってきたという話から、北海道の居酒屋はクヲリティ―が高いという話をされていた。

北海道の居酒屋はデフォルトでクオリティーが高い

大漁舟盛り居酒屋 大海物語 in すすきの という店の話で、お通しがそれなりのお値段するんだけど、お通しと飲み放題だけで十分満足してしまうのがこのお店。

系列店でruby方面の方々が愛用している某店は船底まで刺し身(等)がびっしりで後半はつらくなってくるという噂だけど、こちらのお店は適度にツマが入っていたりして、普通にお腹が空いていれば食べきれる良心的な舟盛り、だった。 生まれてからずっと札幌育ちだけど、お通しに剥いていない毛ガニが出てくる店は初めてかも知れない。1卓(4人)に半分ずつかと思いきや、1人で半分ずつなのね。

大漁舟盛り居酒屋 大海物語 in すすきの

札幌は東京よりのマド環境が揃っている

え?そうなんですか・・・・?

すすきの周辺で2件のドトールを利用したら、電源完備で1人ひとりのエリアが仕切られていて快適だった、という話。

どこのドトールだろう?すすきのから近い順だと、ここかなぁ

  • 札幌南1条店
  • 札幌大通西3丁目店

Day One

Day One は Markdown 形式でかけるエディタで、DropboxiCloud経由で共有が可能なMaciOSアプリ。2年前くらいに買ったんだけどしばらく使ってなくて、13時(ランチ)の時報代わりになっていたくらい。

Podcastの中で言われていたように、どこかのブログ記事にリンクを貼ろうとコピペすると、Evernoteだからスタイルも元サイトのものを引きずってしまって、わざわざ該当箇所を選択してスタイル解除 という非常に二度手間なことをやっている。

ここで Day One を使うと、元はテキストエディタだから余計なスタイルは無視してくれるし、Markdown 脳内変換をする必要もない。command + E または Command + Enter のショートカットでモードを切り替えできるので、ちょっとずつ確認しながらの作業も苦にならない。

しばらくブログエディタがわりにつかってみようかなぁ。

Podcastの話に戻ると、ただのテキストエディタだと思っていたら、位置情報を要求してきて各記事に位置情報をつけたり、iOSアプリ版をモーションセンサーが搭載されている新しめのiPhoneで使うと、そのアプリを使っている人が立っているのかということまでわかってしまうらしい。

テキストエディタにそこまで求めるか?というと微妙に思うところはあるけど、そういう情報が取れるデバイスが一般人にも徐々に広まっていくということを考えると、この先面白い使い方ができるのかもしれないと思った。

HOKKAIDO アイディアソン&ハッカソン 2014 #hokkathon

チーム

参加申し込み時にグループ単位で申し込みをすることになっていた。前回2人ともプログラマでデザイナー欲しいと常々話していたところから、今回こそデザイナー方面でだれか、、、と思って声をかけたのが @6raoka さん。ハッカソン1日目が参加できないからとチューターとして申し込んでいた @irasally さんに2日目(の数日前)から参加してもらって、最終的に3人チームでの参加。

プロダクト

ラーメン好きの @6raoka さんが、ラーメンを食べた日は手帳に◯らのマークを書いている というエピソードから、それをアプリ化してみた。プロダクト名は「カレンらー」。

ラーメンはラーメン屋でしか食べない、との想定で、 Foursquareでラーメン屋のカテゴリに登録されている店でチェックインしたデータを、カレンダーにマッピングする。

余談だが、このプロダクトに辿り着く過程で、Foursquareのチェックインデータを Google Calendarにマッピングする方法、というのを教えてもらった。
頻繁にチェックインしている人なら、Google Calendar が予定を入れるだけでなくライフログの一つとしても使えるようだ。

今回使った技術的なトピック

  • 基本 HTML5+Javascript で作成し
  • Monaca でスマートフォンアプリ化
    • PhoneGap をWebサービス
  • YUIでカレンダー&アイコン表示
  • Foursquare の API (OAuth2.0)

去年に引き続きHTMLベースや位置情報系のAPI、スマートフォン向けのプロダクトというところは共通しているが、新たな試みとしてサーバーサイドを無くしてスマートフォンアプリにプログラム部分を詰め込むようにした。開発言語は PHP+JavaScript からJavaScript ひとつに絞られた。

前回もPhoneGapの存在は知っていたけど、当時はまだ Backbone に興味を持ってちょっと触り始めた程度だったので、サーバーサイドにPHPを入れて、逃げ道を作っていたように思う。それからすると、認証処理含めすべてJavaScript でやろうと決断できたあたり、ちょっとは成長できたのかな。

4回のデモ

一般的なハッカソンだと、どんなプロダクトを作りますっていう中間発表があるくらいで、あとはひたすら開発に勤しみ、最後に成果発表 というプログラムが多いと思う。
今回は、1日目に2回、2日目にも2回の計4回ものプレゼンタイムが用意されていた。

11時集合で1回目のデモが14:30に迫っている。
そこにランチタイムも含んでいることを考えると、さっさと作るものを決めて開発にとりかからなければならない。

毎度デモの最後にしまださんが言ってた「次のデモでお会いしましょう」という言葉が印象的だった。

1回目のデモ

大前提として、「1クリック(1タップ)以内でユーザに価値を届けられるもの」とテーマが決まっていた。

わりとすんなりプロダクトの方針は決定できた。 最初は Foursquareでチェクインするところを1タップとして考えていたけど、どうせなら写真も付けてチェックインしたい、など欲張ってしまって1タップでは収まらない。
「もう1タップさせて・・・」、と言いながら近くのラーメン屋でランチタイム。
チェックインするところは Foursquareアプリや Instagram 等各自の好きなアプリにお任せ、作るのはチェックインされたデータをAPIで取得してカレンダー表示をするところだけに絞った。

顧客の "iPhone で使えるアプリ” という要求仕様に対し、表示はHTMLで十分作れそう、HTMLで作って最後に PhoneGap もしくは Monaca でアプリ化すればいいだろう、という技術的な方針も自分の中では固まっていた。

1回目のデモではHTMLでプロトタイプを作った。
JavaScript でカレンダーを出し、各日付のマスの中にアイコンを付けられそうなものを探した。
平行して「◯ラ」のアイコンを作ってもらって、カレンダーのマス中に表示させるところまでできた。

2回目のデモ

FoursquareのAPIを睨みつつ、PhoneGap をインストールして、1回目のデモでできたカレンダーをiOS(iPhone)アプリの形にした。シミュレータで iPhone の枠に入ったのを見ると雰囲気が出てやる気も出てきた。

ここで1日目のアイディアソン&ハッカソンは終了。

合間の2週間

PhoneGap vs Monaca

OAuth2.0認証、PHPでは(Foursquareも含め)いくつかやったことがあって、それほど難しくないのはわかっていたけど、JavaScriptでやるのは初めてだったので、認証してアクセストークンをとるところまでを家でやっておいた。デバッグ方法の試行錯誤をしながらだったので余計に時間がかかってしまったけれど、終わってしまえばドキュメントに書いてあるとおりにURLとパラメータを準備して、InAppBrowserを使うのと、 jQuery で $.getJSON(); くらいの事だった。

PhoneGap単体で作る場合、jsファイルにconsole.log() を仕込むとそこで止まってしまうようで、プリントでバッグならぬアラートデバッグで頑張っていたのが、プロトタイプ段階では良かったけどそれ以上は限界だった。iPhoneの解像度が上がってフルHDサイズのモニタでも縦サイズがはみ出してしまうのも辛かった。家のiMac 27インチや、フルHDでも縦置きできるモニタがあればいいけど、MBAひとつで開発するのはちょっとつらい。(ノマドアプリ制作者はどうやってるんだろうな?シミュレータ使わない?)
その点、Monaca を使うと console.log() のログはデバッグアプリでも、MonacaのIDE内でも見る事ができる。配列やObjectを渡すと展開できないんだけど、ログが出るだけまだマシ。

2日目のハッカソン前日の夜、日が変わる頃、MBAで PhoneGap が他の環境と違って期待通りに動かないのは OSが最新じゃないからじゃないだろうか?というところに行き着いた。会社も家もiMacは10.9にしたけど、MBAだけ10.8のまま使っていた。(もしかしてXcode のバージョンアップだけでもよかったのかな?)
OSバージョンアップするにしても、もし明日マシンが使い物にならなくなってしまったら?という恐怖から、 ハッカソンでは PhoneGap 単体で開発するのは諦めて、Monaca を使うことにした。

3回目のデモ

プロダクトの概要説明と、Monaca の紹介をちょっとして、最後にはここに他の2人が作ってくれてるカレンダーのデザインがガッチャンコする予定です、という話をした。

最終デモ

早めに開発は切り上げて、アプリの形にしてパートナーに持って帰ってもらえるように、アイコンやスプラッシュ画像を登録したり、iOS Developer Program に登録したりお金払ったり、してた。

Androidのほうは仮証明書でStoreに載せられない版だけど、ちゃんとAndroid端末にインストールして動いていた。

iOS はお金払った後、アプリのビルドに必要な証明書や諸々のファイルを作れるようになるのに時間がかかってしまってタイムアップ。
最終デモはデバッガーで行うことにした。

デモの5分位前までちゃんとデータが表示されていたのに、1ヶ月に2回分しかラーメンを食べていない自分のデータじゃ面白くない、、とか頑張って作った認証部分もデモした方がいいんじゃないか、って余計な欲が出てきてしまったのがダメだった。どこでどうおかしくしてしまったのか、一度ログアウトしてアカウント切り替えをしようとしたら、その後一切動かなくなったところで、デモの順番がまわってきてしまった。

見せられるものがないのでなんともキレの悪いデモで終了してしまったのが本当に残念でならない。

まとめ

使いたい人もいる、使って貰えそうな人もいる、さらにガワ替え制作の要望ももらっているので、ここまできたら本当にちゃんと使えるアプリにするところまで、頑張ろうと思う。

ハッカソンスタイルの勉強会の「北海道開発オフ」を初めてから、早5・6年(?)
ここまできてようやく、時間内でモノを完成させる力が少しだけついてきたような気がする。 初めは欲張らずに小さく作り始める。 ここまでくるのに長かったな・・・・。

合わせて読みたい

@irasally さんのブログ
HOKKAIDOアイデアソン&ハッカソン2014-Day2に参加しました » 寺子屋未満

家のiTunesに同期されているiPhone/iPadに会社のMacからアプリを入れる簡単な方法

iOSのアプリがAppStoreに掲載手続きをしてからユーザーが検索して見つけられるようになるまで、データの伝搬に数時間かかるようで、昨日もこれで引っかかってしまった。

公式サイトからiTunesを開くとアプリが見つかったのでMacでダウンロード。 iTunesで同期しようと思ったら、インストールしたいiPadは自宅のiMaciTunesと同期されているのだった。 今手元にあるアプリを1つインストールしたいだけなのに、同期設定は変えたくない。

それ、できるよ! Macならね!

普段、スマートフォンアプリの開発に携わっているので頻繁にお世話になっているXcodeのOrganizer。 いつもは自分らで作ったアプリをインストールするのにしか使っていなかった。

f:id:makies:20140128100100p:plain

iPhone/iPadMacに繋いで Xcode.app を起動したら [Window]-[Organizer] を開く。

[ホーム]-[ミュージック]-[iTunes]-[iTunes Media]-[Mobile Applicaitons]
ここに アプリ名.ipa といったファイルがある。

Organizerの左側に繋いだ端末のリストが現れるので、端末名のあたりに、アプリのファイルをよっこらせっ、とドラッグ&ドロップしてやるだけ。

簡単ね☆

【追記】

その後 Twitter 経由で教えていただいた情報によると、Organizer 経由でアプリをインストール出来ない場合もあり、その方の場合は、iPhone 構成ユーティリティからインストールすることができたそうだ。

旧ブログのお引っ越し

我が家にあるもう7年モノのサーバー、最近しょっちゅうストライキを起こしてネットワーク管理者に再起動してもらわなければならない状況になっていた。

昔はこのサーバーで開発もしていたし、ちょっと使ってみたいアプリを入れてみたりするにも全て公開してるサーバーに直接インストールしちゃっていたのでだいぶゴミも溜まっている。 (最近だと開発中のものはすべて VirtualBoxVagrantVM を立てて開発しているので、そういうことはしなくなったな。)

MySQLが5.1系を使い続けていてそろそろバージョンアップ等の対応をしないといけないと思っていた。

というもろもろの事情があり、ようやく重い腰を上げて今もなお必要なサイトの引っ越しを始めた。

引越し先は1年位前に作ってもらったUbuntuサーバー。一度OSは上げたはずだけど、それでも13.04だったので13.10に上げた。

ssh越しに作業してて警告が出るも、ネットワーク管理者はスポーツジムに行ってしまって不在。先に移動したサイトはHTMLのみの静的コンテンツしかなかったから最悪ダメに成ってもダメージは少ないということで、OSアップグレード決行。

Ubuntu

# lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 13.10
Release:        13.10
Codename:       saucy

PHP

before

$ php -v
PHP 5.3.3-7+squeeze8 with Suhosin-Patch (cli) (built: Feb 10 2012 14:12:26)
Copyright (c) 1997-2009 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2010 Zend Technologies
    with the ionCube PHP Loader v4.0.9, Copyright (c) 2002-2011, by ionCube Ltd.
    with Suhosin v0.9.32.1, Copyright (c) 2007-2010, by SektionEins GmbH

after

$ php -v
PHP 5.5.3-1ubuntu2.1 (cli) (built: Dec 12 2013 04:24:35)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2013 Zend Technologies
  with Zend OPcache v7.0.3-dev, Copyright (c) 1999-2013, by Zend Technologies
  with Xdebug v2.2.3, Copyright (c) 2002-2013, by Derick Rethans  

Database

before

$ mysql -V
mysql  Ver 14.14 Distrib 5.1.61, for debian-linux-gnu (i486) using readline 6.1

after

$ mysql --version
mysql  Ver 15.1 Distrib 10.0.7-MariaDB, for debian-linux-gnu (x86_64) using readline 5.1

MySQLだけど、MariaDBにしてみた。

Installing MariaDB .deb Files

Apache

Apacheも2.4にバージョンアップ

Apache.conf の vhost を include するところの記述が変わっていて、 .conf の拡張子になっていないと読み込まない、というところでハマった。

IncludeOptional sites-enabled/*.conf

さらに2.4から追加された設定の、 Require all denied の設定が効いていてサイトにアクセスすると403になったのもハマった。
ネットワーク管理者に対応してもらった)

<Directory />
        Options FollowSymLinks
        AllowOverride None
       Require all denied
</Directory>

WordPress

WordPress本体のバージョンを最新に更新。 プラグインも更新があるものは全部更新。

特に問題なさそう。

DNS変更

先に家庭内用の設定だけ変更してブログの動作確認した。

久しぶりの更新、ついでだからもうサイトを消してしまったサブドメインをお掃除しておいた。

リバースプロキシ

ここは自分には手がでないところなので、
ネットワーク管理者に設定変更依頼。

Spika-Server がMySQL対応したので動かしてみた

昼に書いた記事に追記しようと思ったら、長くなりすぎたので別記事にした。

developブランチ

MySQL対応版はdevelopブランチで行われているそうなので、developブランチを checkout してくる。

$ git checkout -b develop origin/develop

vm再構築

vmは使い回しでも良かったんだけど、残したいデータもないので一旦破棄して作りなおした。

$ vagrant destroy
$ vagrant up
$ vagrant provision

いきなりのエラー

Class 'Doctrine\DBAL\Configuration' not found

いきなりこのエラーで動かない。

$ cd /vagrant_data
$ php composer.phar install

もちろん実行した。

composer.jsonでは Doctrine/dbal の記述があるものの、vendorディレクトリを開いてみてもDoctrineのディレクトリが見当たらない。もしやと思って composer update をしてみると、無事インストールされてインストーラー画面にアクセスすることができた。
おそらく、 composer.lock ファイルのコミット漏れではないかと思う。

$ cd /vagrant_data
$ php composer.phar update

インストーラー起動

DB設定を入力する画面

  • ホスト名
  • データベース名
  • ユーザ名
  • パスワード

よくあるDBの接続設定入力欄だ。 事前に vmsshしてMySQLにはデータベースを作成しておいた。

同梱されているVagrantfileを使って作ったVMを使うと、MySQLのrootパスワードが設定されていない。そのままパスワードなしでsubmitすると入力チェックで弾かれてしまって進めなかった。

mysql> SET PASSWORD FOR root@localhost=PASSWORD('パスワード');

※rootユーザーを使うべきではないとは思いつつも、動作確認用のvmなのでそこは目をつぶることにした。

インストーラーが最後まで行かない

左サイドに表示された Installation Steps

  • Input information to connect database.
  • Create database schema.
  • Create initial data.
  • Finish.

3つ目の「Create initial data.」で 【Create Initial Data】ボタンを押しても、特にエラーが出るわけでもなく同じページに戻ってきてしまって、Finishに辿りつけなかった。ソースコードを要確認。

アプリからアクセス

iOS版の最新をpullしてきた。
前回の設定が残っているので サーバー側URLの設定等は省略。

iOSシミュレータのアプリ内からユーザを新規登録、そのユーザーでログインするところまでできた。

まだ一般ユーザーが1人(自分自身)しかいないので、フレンドになったり、メッセージのやりとりするところまではできていない。
次回はそのあたりを動かしてみたい。