福野泰介の一日一創 - create every day

5分でできるオリジナル鯖江PM2.5濃度表示iPhoneアプリ / Swift2入門

2015/11/17
#KidsIT #opendata #swift 

福大のキャリア教育の講義で紹介したステキな格言「犬も歩けば棒に当たる
何かおもしろいものを創ったら、もしくは、何か行き詰まったら、知らない世界へでかけてみましょう。
犬さえ当たる棒、人ならもっとすごいものに当たるはず!


学生からの質問、スマホアプリの上達のコツ、回答はただ一つ「たくさんつくること」

オープンデータに関心持ってくれてうれしかったので、鯖江市PM2.5濃度の勝手オープンデータを使ったアプリのつくり方を紹介します。 Macさえあれば、Xcodeのインストールを除けば、つくる作業は5分もかかりません。


1. Xcode, File, New, Project
2. iOS, Applictaion, Single View Application
3. Project Name "SabaePM25"
4. Main.storyboard, 右下の部品いろいろから Label を設置

左上の再生ボタンを押すと実行され、ラベル付きのシミュレーター上でアプリが動きます。


5. 右上アシスタントエディターに切り替え
6. Labelを右クリック、New Referecing Outlet の右側をViewController.swift内へドラグアンドドロップし、pm25と名付ける
7. viewDidLoad() 内、super.viewDidLoad() 後に pm25.text = "-umg/m3" と追加

ラベルをプログラムで書き換えられるようになりました。

8. 更に下記を続ける

if let url = NSURL(string: "http://sabae.club/pm25/1/fukui/sabae.txt") { let session = NSURLSession.sharedSession() let task = session.dataTaskWithURL(url, completionHandler: { (data, response, error) in if let ns = NSString(data: data!, encoding: NSUTF8StringEncoding) { var s = String(ns) s = s.stringByTrimmingCharactersInSet(NSCharacterSet.whitespaceAndNewlineCharacterSet()) // trim dispatch_async(dispatch_get_main_queue()) { self.pm25.text = s + "μg/m3"; } } }) task.resume() }

警告機用につくった簡易WebAPIで鯖江のPM2.5の値を取得して、ラベルpm25に設定しています。

9. HTTP通信できるように設定する
iOS9よりHTTPSではない通信は遮断されてしまいます。回避するために下記のように設定します。
左のプロジェクト、Supporting Files > info.plist
App Transport Security Settings (Dictionary) を追加、
その子要素に、Exception Domains (Dictionary) を追加、
さらにその子要素に、ドメイン名 sabae.club (Dictionary) を追加、
ドメインの子要素として、NSExceptionAllowsInsecureHTTPLoads (Boolean) を追加し、YES に設定

10. できあがり!後は好きな様に飾り付けましょう!

今回参考にしたのは、PCN大阪のメンバー森巧尚さんによるSwift本です。
Amazon.co.jp: Swiftではじめる iPhoneアプリ開発の教科書 【Swift 2&Xcode 7対応】【特典PDF付き】 (教科書シリーズ): 森 巧尚: 本

今回のポイントは、completionHandlerが通信が終了しだい実行されることと、dispatch_asyncを使って通信スレッドからラベルを操作できるメインスレッドに処理を渡しているところです。 きちんと理解するには、コンピューターのハードウェアやOSなどがどう作られているかの知識が必要です。

ひとまずありのままに受け入れ、推測でどんどん進めるか、シンプルな環境IchigoJamで基礎からやるか、どちらが良いかは本人次第、一概にどれが良いとは言えません。 大事なのは、続けられること。宝くじの当選確率は、買う枚数と比例します。

楽しく続けられるコトがあれば、チャンスをつかむ確率は大幅にアップします。
プログラミングは、パソコンさえあれば無限にトライできる最高の環境、活用しましょう!

Swift2入門
- 5分でできるオリジナル鯖江PM2.5濃度表示iPhoneアプリ
- 5分でできるオリジナル鯖江論手川排水機場水位表示iPhoneアプリ

学び方を学べ!IchigoからApple、Xcode Playgroundのススメ

2015/07/13
#IchigoJam #swift #KidsIT 

鯖江で好評開催中のIchigoJamプログラミングスクール。 いつの間にかMacを手に入れるこどもが続出。日本は全国的にこどものパソコン利用時間が減ってる今、鯖江の子、チャンス!


(日曜開催した特別回、IchigoJam BASIC入門、小さい子はレゴテクニックシリーズ、卒業生はSwiftやロボット電子工作)


思いついたものをサクサクつくるためと、俺パソコンできるかもという優越感が手軽に味わえる、キーボードのブラインドタッチ。 プログラミングの入門にもおすすめなタイピングゲームを打ち込み、挑戦中。いろいろ改造して遊んでくれてました。(5歳からのブラインドタッチ、タイピングゲームLV1


プログラミングへの情熱が親に伝わり、晴れてMacを買ってもらったこどもにおすすめ、Xcode Playground。
Xcode は、無料のiPhone/iPad/Macの開発ツール。起動後でてくるPlaygroundを使うと、IchigoJam BASICや、progrunのように プログラムを書いたその瞬間から実行して結果を出してくれます。

IchigoJam では、扱えない大きな数、小数、数学関数、文字列が扱えますよ!('\'の入力は、option+¥)
PRINT は、swiftでも print(またはprintln)。まずは、下記入門サイトや本など見ながらいろいろ遊んでみましょう!
第1回 Swiftを学ぶための情報源とPlayground:Swift移行時に引っかかりそうなことを解決する!|gihyo.jp … 技術評論社
Swift | Swift言語を学ぶ
Swiftで書いてみよう!
・・・その後は、Swift入門その1へ(Swiftバージョン違いで動かない?)

学び方を学べたら卒業のIchigoJamプログラミングスクール、毎週火曜日開催中!
こどもも大人も大歓迎!

sabota、iBeaconを使った新しい図書館センサー稼働開始!

2015/04/27
#iBeacon #sabae #sabota #swift 

JK課メンバーの不満から生まれた、図書館空席チェックアプリ、sabotaもしJKが「インパクトマッピング」を読んだら)。センサー故障も、利用者からの要望多いらしく、改修リニューアルとなりました。

コスト重視で赤外線を使ったセンサーIchigoJamを使ったシステムでスタートするも、センサー破損と不調をくりかえし、磁気センサーを経て、iBeaconバージョンをテスト。しばらくすると落ちてしまうことと省電力化の課題を残していました。

MyBeaconを使った半量産対応と、取り付け方法の課題を解決したと鯖江市役所の方から連絡あって、本日設置となりました!


新sabotaシステム!iBeaconが使うBluetooth4.0の電波が届きやすい場所に移設。


鯖江市役所開発の100均で3つで100円のタッパー&ネジ止めシステム!
数ヶ月、うまくいけば1年毎の電池交換もラクラク!


いくつかのステップを通じてオープンデータにする旧sabotaの流れ


iBeaconと無線LANを使ってぐっとシンプルになりました


旧システム、回収してまた別のシステムへの素材とします


新システム、1つ1,000円のAplix MyBeacon Fun MB005 Ac に、光センサーを加えたもの

多量の線材を回収して、ひとまず撤収。現在稼働しているセンサーは両端と中心の3箇所のみ、残りの設置を行って、sabotaバージョン2の本稼働となります!

iPadで動かしているアプリは、Swiftでつくっています。GClueさん公開のiBeaconのサンプルをベースに、Swiftの現バージョンで動くように更新したソースコードがこちら(ViewController.swift)。図書館センサーで使っているUUIDに変更しているので、図書館で試してみるとおもしろいです。

info.plist の Information Property List に NSLocationAlwaysUsageDescription という Key に Type=String で、位置情報利用許可メッセージを加えるのを忘れずに!(詳しくは、同GClueさん公開のiBeaconのサンプル

SPARQLを便利に使うクラスをつくる / ゲームづくりから始めるSwift入門 その3

2015/02/04
#swift #opendata #SPARQL 

SPARQLを使った簡単なゲームをつくった前回。今回はいろいろなオープンデータを取り出してプログラム内で活用できるように、便利なクラスというものを作ってみましょう。


(今回つくる、SPARQLでオープンデータを取ってきて、一覧表示するプログラム)

クラス(class)とは、データやデータに関連するプログラムに、名前を付けてまとめたものです。ある程度まとまったプログラムをIchigoJam BASICでいうGOSUB/RETURNを使ったサブルーチンや、Swiftでいうfuncを使った関数でまとめると便利なように、クラスは関係するデータやプログラムをまとめておけます。つくったクラスは、他のプログラムをつくるときに流用できて便利です。これをオブジェクト指向プログラミングといいます。

UITableView という、一覧や表形式で表示するのが便利なクラスを使って、実験してみます。
1. Xcode、メニュー、File、New、Project、iOS Application、Single View Application、Next
2. Product Name に POIview、Language を Swift、Devices を Universal にして、Next、保存するフォルダを選択してCreate
3. 左のファイル一覧から「ViewController.swift」を選択し、全部消して、下記を入力(バックスラッシュ"\" = option+¥)


(参考「逆引きSwift(iOS編)」)

4. メニュー、File、New、File、iOS Source、Swift File、Next
5. POIview/POIView フォルダを選択し、Save As に SPARQL と書き、Create
6. 下記、SPARQLとSwiftのプログラムを橋渡しするクラスを打ち込む


7. ▶ボタンまたはcommand+Rで実行すると、どこかの場所名がずらっと並んだら成功です!
8. SPARQLのquery(問い合わせ文)を書き換えたり、表示方法を変えたりしてみましょう
9. SPARQL.swiftを、前回つくったゲームに活用してみましょう

SPARQL.swift には、このようにXMLというコンピューター言語で返ってくるSPARQLからの返答文をプログラムに渡す機能がプログラミングされています。println を使って、その動きを確認してみるのもオススメです。


説明書がA4一枚で収まるIchigoJam BASICと違い、iOS向けSwiftの説明書(言語リファレンスiOSドキュメント)はとても膨大で、ひとつひとつ読んでいくのは大変です。なので、つくりたいものを決め、それに使えそうなものを調べて、何を使うかの目星を付け、いろいろと試しながらつくっていくことをオススメします。悩む経験を積めば積むほど速く楽しくつくることができるようになりますよ!

SPARQLで画像オープンデータを使う / ゲームづくりから始めるSwift入門 その2

2015/02/03
#swift #opendata #pcn #SPARQL 


前回のレンダゲームを改造して、画像オープンデータを使った16連射ゲームにします。


case 2 内の、let action の行と次の行をこれに書き換えると、拡大縮小を繰り返すアニメーションに変わります。いろいろ数値を変えて遊んでみましょう。

次に、飛行機の画像の代わりに自由に使える画像オープンデータを、SPARQL(スパークル)という言語を使って、Webから取得してみます。


関数 override func didMoveToView(view: SKView) 内の touched(nil) の上にこのプログラムを打ち込みます。query に、SPARQLのクエリー(問い合わせ)を入れています。odp のURLを足して、Webから取得した data を、parse(パース=字句解析)して画像のURLを取り出します。println を使うと、Xcode上にテスト用の文字が出力されるので便利です。


実際の取り出しプログラムはこちら、プログラムの先頭に加えてください。NSXMLParserDelegate が、上で付け加えたの parser.delegate に対応していて、関数 parser が自動的に呼び出されます。elementName が uri の時、画像をWebから取得し、ゲームで使いやすいサイズにクロップ(cropImage)して、配列に追加します。


こちらが画像を拡大縮小して、ほしい大きさで取り出す関数です。がんばって打ち込みましょう。
(Thanks : iOS - [Swift] 画像のサムネイル生成(縮小&切り抜き) - Qiita


最後に case 2 の部分をこのように書き換えます。表示するたびにランダムに1つ画像を選んで、4x4の16コ並べるレンダゲームとなりました。タイム1秒切れれば、伝説の高橋名人級!

SPARQLについて、こちらもどうぞ!
- ハンズオン、SPARQLでつくるオープンデータ都市一覧アプリ
- SPARQLで探すトイレ / オープンデータプラットフォームアプリまとめ

次のステップ「SPARQLを便利に使うクラスをつくる

レンダゲームをつくる / ゲームづくりから始めるSwift入門 その1

2015/02/02
#swift #IchigoJam #kamacon #pcn 

ホビーパソコンIchigoJamをマスターした人のステップアップ候補のひとつ、iPhone、iPad向けのアプリをつくるためのプログラミング言語、Swift。MacBookAirなどがあればすぐに始められます。

1. XcodeをMac App Storeからダウンロード(無料です)
2. Xcodeを立ち上げ、メニュー、File、New、Project、iOS Application、Game を選びNext
3. Product Name に Renda、Language を Swift、Game Technology を SpriteKit、Devices を Universal にして、Next、保存するフォルダを選択してCreate
4. 左上の「▶」マークを押すと、タップすると飛行機が回るアプリが動きます
5. 左のファイル一覧から「GameScene.swift」を選択
6. 右側に表示された、プログラムを全部消して、下記を手入力(バックスラッシュ"\"は、option押しながら¥で入力)

7. もういちど「▶」マークで、レンダゲームが動きます(動かなかったら、よく見比べましょう)

8. レッツ、改造!回転を速くしたり、飛行機を大きくしたり、数を増やしたりしてみましょう!
※ iPhone/iPadで動かすには、年間11,800円のiOS Developer Programへの加入が必要です。
→ 不要になりました(ただし、AppStoreで配布する際には、加入が必要です)
[Xcode][iOS] 有料ライセンスなしでの実機インストール 全工程解説! | Developers.IO

IchigoJam BASICSwift
IF A=1 THEN B=1if a == 1 {
    b = 1
}
GOSUB 100

100 〜〜:RETURN
sub()
〜〜
func sub {
    〜〜
}

IchigoJam BASICとSwiftの対応表をちょっとだけ。似てますね!
括弧「{〜}」を使って、条件が一致したときのプログラムを囲めて便利です。
また、if { 〜 } else { 〜 } というように一致しなかった時のプログラムも書けます。
これを、構造化プログラミングといいます。

次のステップ「SPARQLで画像オープンデータを使う


鎌倉駅から徒歩でいけるファブラボ鎌倉、2階で出会った小学6年生もSwiftでプログラミングしてました。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像