2014/12/24

AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成

Firebaseとは

いわゆるモバイルBassでWebアプリケーション、モバイル・アプリケーションの開発者向けにリアルタイムにスケーラブルなバックエンドサービスを提供しています。
つい最近（今年10月）、Googleに買収されています。
一定の転送量、接続数、容量は無料で、クレジットなしで使用できます。
Baasとして有名なParseは、Facebookに買収されていますし、
FirebaseもGoogleがつい先日買収と、もはやBaasの2大巨塔ですね、この２つは。

AngularFire

そして、AngularJsからFirebaseを利用できる、
AngularFireというAPIも公開されていますので、
バックエンドのコードを書く必要も、サーバも必要なく、
必要な作業に集中できます。
AngularFireのAPIを利用することで、
Angularjsのモデルが自動的に同期され、Firebase上でリアルタイムにデータバインディングされます。
これでhtml側でのview, Angularjsでのmodel, firebaseでストアされたjsonのデータの3wayデータバインディングが可能となります。

サンプル:チャットアプリ

File: index.html ------------------------- AngularFire Sample {{message.from}}: {{message.content}}

100行以内で簡単チャットアプリが作成できます。

var ref = new Firebase("https://<your-firebase>.firebaseio.com/");

上記の箇所をfirebaseにサインアップして、URLを書き換えてください。

Firebaseにストアされたデータにindexをはる方法

設定で、json形式でkey,rulesの中に.indexOnを記述するだけ
詳細はこちら
https://www.firebase.com/docs/security/guide/indexing-data.html

Firebaseにストアされたデータのセキュリティに関して

jsonでのセキュリティルールの設定が可能。
認証されたユーザがどのようにデータを変更できるかを決める。
データの転送はSSL経由。
さらなる詳細はこちら
https://www.firebase.com/docs/security/

AngularFireの使用アプリ

好きなアーティストの音楽をランキング順の聴くことができるサービスです。
Recentの箇所をfirebaseでストアしています。
Lamusica
http://manchan.github.io/lamusica/
githubはこちら
https://github.com/manchan/lamusica

AngularFireのドキュメントはこちら

https://www.firebase.com/docs/web/libraries/angular/index.html

2014/12/22

iOS 8 todays widgetの作成

iOS 8 今日のウィジェットの作成

今回はiPhoneで今日のウィジェットを表示させるアプリのサンプルを作ります。

iOS8 からの新機能、 Today ウィジェット、通知センターの左側に表示されます。

はじめにウィジェットの概念について。

既存のアプリに付属する拡張のようなものです。

ウィジェット単体では申請できません。既存のアプリに追加する形となります。

既存のアプリにエクステンションを追加するイメージ

あくまで、アプリに内包されて配布するものです。

以下、簡素化したステップ

1. 新規アプリ開発、Single View Applicationで言語はObjective-cを選択。

2. File > New > Target にて Application ExtensionにてToday Extensionを選択

3. Product NameをWidgetと入力、finishを選択したあと、Scheme追加ダイアログが出て、activateを選択。

4. TargetのWidgetを確認すると、Link Binary With LibrariesにNotificationCenter.frameworkが入っていることを確認。

5. デフォルトでビルド実行すると、ノティフィケーションセンター左の今日のウィジェットを確認すると、アプリ名の中に"Hello World”を確認。

6. ウィジェットで表示されるアプリ名の変更はinfo.plistのBundle display nameを変更

7. MainInterface.storyboardにて、label, progress viewを追加

8. Constraintsを追加。それぞれの制約を設定、詳細は以下github。

9. ビルドして実行、確認。※ビルドターゲットはエクステンションの方を選択

10. リアルなデータを結びつける。

11. labelとprogress viewをアウトレット接続する,propertyの追加

12. システムサイズとフリー、ユーズドのサイズを測定するメソッドを定義

13. それらをnsuserdefaultでキャッシュする。

14. そしてそれらをUIに表示、更新する

15. 値に更新があった場合のメソッドを定義ビルド実行で確認。値の再計算メソッド。

16. もっと情報を表示させる。まずUIの変更、それぞれの高さを設定。

17. 詳細ラベルの更新。

18. タッチの検出と値の更新。

19. アニメーションの追加。

20. ビルド実行で確認

ソースはこちら

https://github.com/manchan/iOS8-todays-widget-sample

参考: iOS 8: Creating a Today Widget

http://code.tutsplus.com/tutorials/ios-8-creating-a-today-widget--cms-22379

2014/11/25

AppleWatch Tutorial

AppleWatch
https://www.apple.com/jp/watch/features/

ついに最近、デベロッパー向けにwatchkitが発表されました。
AppleWatchアプリのチュートリアルで、
今回は絵文字を拡大表示させるサンプルをやります。

以下、簡素化した20のステップ。
ソースはこちらです。
https://gist.github.com/manchan/1e9cfae322f87583a2f7

新規プロジェクトのシングルページアプリケーションで作成。言語はswift
プロジェクトパネル、General > Targets > Add Targetにより、iOS > Apple Watch > Watch Appを選択
Watchkit extensionとWatch appが追加される
watchのデフォルトの画面をシミュレーターで確認する際は、「~Watch App」にターゲットを変更。デバイスはなんでもよい。
ビルド実行でシミュレータが立ち上がるが、無視。
シミュレータメニューのHardware > External Displays > Apple Watch - 38mm またはApple Watch - 42mmを選択し、再度ビルド実行、watch画面が立ち上がり確認可能。
はじめにInterface.storyboardのInterface Controller Sceneにて, tableを追加、table内にlabelを追加
tableをInterfaceController.swiftにnameをtableとしてoutlet接続
新規ファイルを追加より、EmojiRow.swiftを追加
Interface.storyboard, Interface Controller SceneにてtableのクラスをEmojiRowに設定
table内のlabelをEmojiRow.swiftにemojiRowLabelとしてoutlet接続
ここまででtableのラベルの内容を定義してforループを回せば同じ内容が表示される。
詳細はInterfaceController.swiftを確認
tableの要素をひとつ押した際に、詳細の画面に遷移させたいので、
新規ファイル,ZoomEmojiController.swiftを追加する。
Storyboardにて、新規画面の追加をする、右サイドパネルよりInterface Controllerを追加する
ClassをZoomEmojiControllerとし、ModuleはEmojiWatch_WatchKit_Extensionとする
IdentifierをZoomEmojiControllerとする, これによりtableのひとつの要素を押した際に遷移するcontrollerの識別が可能となる。
labelをふたつ追加し、それぞれ、zoomEmojiLabel、definitionLabelをZoomEmojiController.swiftにoutlet接続する
tableの一要素押下の処理をdidSelectRowAtIndexより指定、
詳細はInterfaceController.swiftを確認
ZoomEmojiController.swiftのコンストラクターメソッド内にて、
contextを受け取り、fontサイズなどを指定後、それぞれのlabelに代入する。
ビルドして実行、シミュレーターにて、配列に定義した絵文字が拡大表示、テキストが表示されていればOK

Finish!

Apple Watch Tutorial - Learn How to Make a Simple Apple Watch App

http://vimeo.com/112249657

上記動画を参考にしています。

以下ソースです。

File: ZoomEmojiController.swift ------------------------- // // ZoomEmojiController.swift // EmojiWatch // // Created by matz on 2014/11/24. // Copyright (c) 2014年 matz. All rights reserved. // import UIKit import WatchKit class ZoomEmojiController: WKInterfaceController { @IBOutlet weak var zoomEmojiLabel: WKInterfaceLabel! @IBOutlet weak var definitionLabel: WKInterfaceLabel! override init(context: AnyObject?) { // Initialize variables here. super.init(context: context) var emoji:AnyObject = context! // Emoji Zoom size var font = UIFont.systemFontOfSize(90) var specialString = NSAttributedString(string: emoji[1] as String, attributes: [NSFontAttributeName:font]) self.zoomEmojiLabel.setAttributedText(specialString) var definition = emoji[0] as String self.definitionLabel.setText(definition) } }

次回はglanceやnotificationのサンプルを作りたいと思います。
AppleWatchのお仕事お待ちしております！

2014/11/21

Sprout by HP 新発想デスクトップPCがほしい

アメリカですでに発売しているPC、Sprout
HPの一体型デスクトップPCの新製品Sproutの紹介です。
日本発売は2015年からの発売のようです。
https://sprout.hp.com/

3Dスキャンとプロジェクターが一体となった、
マウス、キーボードなしのマルチタッチスクリーンとマット付きのWindowsPC Sprout.
Windows 8.1, 1TB of storage, and an Intel i7 processor, so it’s a regular powerful PC.

HP is launching its Sprout PC on November 9th for $1,899.99.
20万強、iMac 5Kよりか安い。
SDKも公開されています。

Sprout SDK
https://sprout.hp.com/developer/develop/download/
開発言語はC＃, C++

デザインツール、DTPとしてはもちろん、
アニメーション、映画、音楽、本のスキャン、ゲーム、ピアノ、スクラップブック作成などのアプリがすでに用意されてあるようです。
デザイン会社はみんな買うでしょうね、教育機関にも最適かなー。
なんやかんやでキーボードは必要になるかと思うけど、オプションがあるとすれば、プロジェクターで投影するのかな？
あとスキャンする時に、プロジェクターの影は下のマットに映らないんだろうか。

NEW @HP Sprout PC with @Windows featuring 3D scanning and a projector! | HP® Official Site http://bit.ly/1tDrBqA
#sproutbyhp

2015年が待ち遠しい！

2014/11/13

Wordpress 既存サイトのwordpress化

既存サイトをワードプレス化するにあたっての情報です。

なぜワードプレスを使用するか。
ブログなどをHTMLだけで管理している場合、
記事が増えた際に管理しにくくなってきますので、wordpressなどのCMSなどが便利です。
例えば、ブログ記事や、メディア記事などを時系列に、
同じようなデータ構造の内容を管理したい場合に最適です。

最近ではconcrete5という汎用的かつ高機能のCMSツールもあるようです。
wordpressはblogなどの紋切り型のコンテンツを管理したい場合に向いているかと思います。

今回説明する内容
・ワードプレスのインストール
・テーマの作成（テンプレートのレイアウト設定など、詳細は以下を確認してください）
・ページャーの設定
・/wpがwordpressページとなるようにリダイレクト設定
・その他、設定など、詳細は以下

あくまでも備忘録としての認識。

【実行環境】
phpバージョン5.2以上
MySQLバージョン5.0以上

【ワードプレス公式サイトよりインストール】
https://ja.wordpress.org/
ダウンロードより、wordpress 4.0をダウンロード

【ワードプレスのバージョン】
4.0

【ワードプレス、インストール箇所】
/wordpress/
既存のサイトを運用しているサイトにwordpressディレクトリをFTPなどでアップロードしてください。
その後ホスト/wordpressにアクセスし、DBの設定などを行う。
そして管理画面にログインする。

【新イベントページTOP】
/wp/
※リダイレクト設定により
wordpressのままでは長いのでwpに変更
【ワードプレス管理画面】
/wordpress/wp-admin/

【テーマの編集】
テーマとはワードプレスページのデザインのこと。
ワードプレス側にテーマを与えることによって、固定したページレイアウトとなる。
例えば大枠は、ヘッダー、左サイド、ボディ、ボディの記事部分、
フッターに分けています。

○テーマのCSSを編集したい場合は、
1.左サイドメニュー、外観 > テーマ編集を選択
2. style.cssの編集が「ファイルを更新」のボタンより可能

○テーマのレイアウトの説明
既存htmlをベースに以下に分割。

index.php（メインテンプレート）
header.php（共通ヘッダー,グローバルメニューなどの共通部分）
footer.php（共通フッター）
sidebar.php（左サイド、記事の部分）
single.php （単一記事の投稿用）
loop.php （記事一覧のループ箇所）

それぞれのページをテンプレート化することによって、
個別にphpで呼び出しています。

例えば、index.phpの場合、header部分の呼び出しには、

でヘッダー部分のソース、header.phpを読み込んでいます。

header.phpの中身を確認してみると、
ところどころにphpのタグがありますが、
meta, titleタグの部分など、WP用のタグに変更しています。

何を読み込んでいるのかの確認はこちら

日本語版wordpressチートシート
http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/

管理画面からテーマ編集をすることが面倒な場合は、
/wordpress/wp-content/themes/【テーマの名前】内をエディターで編集

【記事の投稿】
管理画面、ログイン後左サイドメニューの「投稿」

○新規投稿、編集、公開
HTMLの編集は新規投稿ページ内、タブにて、
ビジュアル、テキストがありますが、テキストを選択してください。
その後、プレビューして確認後、公開。

「続きを読む」を追加したい場合は以下のタグを入力することで、
表示されます。
<!--more—>
これは以下のボタンでも挿入可能です。

実態は.more-linkなので、
CSS変更したい場合はstyle.cssに追記してください。

※コメント欄を非表示にしたい場合はこちら
http://wp-exp.com/blog/comment-no-display/

○公開日の設定
デフォルトでは公開日が今日になるので、過去の記事を投稿したい場合は、
新規投稿ページ、すぐに公開するの右、編集リンクより、日付を操作

【記事のページング設定】
デフォルトで、記事3つでページングするようにしています。
ページングのデザインに関して変更したい場合は、cssの調整が必要

【左サイドのアーカイブリスト】
デフォルトで公開している記事があれば、
年月（記事数）を表示。

li要素にクラスを当てるために、
functions.phpにて、archiveのリンクにクラス当てをしています。

【もろもろの設定】
左サイド、設定より確認
メールアドレス、日付、時刻のフォーマットなど要確認

○メールでの投稿
メール投稿したい場合、メールサーバーの設定を行う。

○1ページに表示する最大投稿数の設定
設定 > 表示設定より、1ページに表示する最大投稿数に「3」を設定
ページングのCSSに関しては、style.cssを参照。

○設定 > ディスカッション設定により、
記事のコメントに関しての設定編集など

○設定 > 投稿設定更新情報サービス
新しい投稿を公開すると、他の更新情報サービスに自動的に通知します。
通知するサイト（yahoo, google, fc2）などを追加。

以上、既存サイトのワードプレス化の説明です。

ワードプレスはカスタマイズすることで、もっといろいろできそうです。
以下のページが参考になるかと思います。
ワードプレス超初心者講座
http://wp-exp.com/

2014/11/12

Underscore.js Practice

javascriptのライブラリ
jQueryにはDOMの操作をさせて、Underscore.jsには
配列やオブジェクトの操作をさせるのが、ベスト。

MV*フレームワークに（AngularJS, Backbone.js)と組み合わせるのがよい。
Backbone.jsは開発者が同じなので、underscore.jsと依存関係にある。

rubyライクな書き方ができる。
大量のデータを処理する際に楽、あくまで補助的なツール。
mapやfilterが便利。

バージョンは1.7.0です。

File: undescorejs-practice.html ------------------------- underscore.js practice Underscore.js practice see on console

2014/11/03

AngularJs, WebAPIをサービスでまとめる

AngularJsで複数のWeb APIを使用する時、
処理をまとめた関数を作成すれば便利

EventAtndというサービス名をfactoryを使って宣言、
ビジネスロジックはservice.jsにまとめ、使う際は複数のコントローラーから呼び出せる形。

例はatndのAPIでイベントを取得するサンプル

File: services.js ------------------------- // Atnd API GET app.factory('EventAtnd', function($http, EventConnpass) { var getEvent = function(query, callback){ $http.get('http://api.atnd.org/events/', { params : { keyword : query, count : 10, ym : "201411,201412", format : 'json', callback : 'JSON_CALLBACK' } }).success(function(data){ if(data.events){ atnd_events = data.events; callback(atnd_events); } }); } return {get : getEvent}; });

2014/10/31

AngularJs × YouTube API Sample

AngularJsの練習です。
LamusicaはAngularjsを使用していますが、
再度復習でやってみる。

今回はAngularJsでYouTube APIを叩いて、
検索し、取得した動画を一覧表示させるサンプルです。

jQueryでやるよりもかなり少ないコード量。30行足らず。
iframeを動的に埋め込む際にng-bind-htmlではそのまま利用できないので、
trustAsHtmlを利用しました。

SCEに関してはQiitaのこちらを参考にさせていただきました。
AngularJSのStrict Contextual Escapingって何だ？

ソースは以下です。

File: index.html ------------------------- AngularJs YouTube Search YouTube Search Results {{ result.title.$t }} ↑ 上から検索してください。

2014/10/30

AngularJs Practice1

AngularJsの練習です。
LamusicaはAngularjsを使用していますが、
再度復習でやってみる。
ドットインストールのAngularjs入門を参考にしています。
http://dotinstall.com/lessons/basic_angularjs

AngularjsとはjavascriptのMVCフレームワーク。
versionは1.2.0です。
詳細な説明については割愛しています。

以下、参考キーワード。

Directive

ディレクティブ（カスタムタグやカスタム属性）を埋め込むことでUI部品として利用できる。
【ng-app】
Angularアプリケーションとしての宣言、これによって、アプリケーションのルートとなるディレクティブ。
【ng-controller】
ビューにコントローラークラスを割り当て。
【$scope】
アプリケーションのモデルを参照するオブジェクト。
コントローラーとビューをつなげる糊の役割。

【ng-model】
【ng-bind】
双方向データバインディング用ディレクティブ

【ng-repeat】
コレクションから各項目のテンプレートをインスタンス化する。
ループ用。

Filter

|date
日付フォーマット用
|uppercase/lowercase
|currency
|date:'yyyy-MM-dd'

|limitTo:5
|orderBy:'score'|limitTo:5
|orderBy:'-score'

テキストフィルター
ng-model="query"

※要素指定
ng-model="query.name"
|filter:query

ng-repeat
{{ $index + 1 }} {{$first}} {{$middle}} {{$last}}
ng-repeat="user in users|filter:query" ng-class-even="'even'" ng-class-even="'odd'"

controller nest
click event
ng-click
button ng-click="increment()"
$scope.increment = function() {
$scope.user.score++;
}

------

Form

ng-submit
デバッグ表示

validation
novalidate
required
ng-minlength="5" ng-maxlength="8"
ng-show validation message
Required!

input type="number"
input type="email"
input type="url"
checkbox
radio
select/option

API Referenceはこちら

https://docs.angularjs.org/api

AngularJs ToDo List

最後はサンプル・アプリケーションです。

以下、サンプルコード。

File: index.html ------------------------- AngularJs practice Data Binding Your Name: Hello! {{ yourname }} Hello! Filter {{ 25* 500| number}} {{ 25* 500| currency:""}} {{ today| date:'yyyy-MM-dd h-mm-ss'}} Text filtering ng-repeat ng-click {{ users.length }} users. {{ $index + 1 }} {{$first}} {{$middle}} {{$last}} {{ user.name|uppercase }} {{ user.score|number:4 }} ng-submit Name: Required! Too Short! Too Long! Gender: male female Score: Email: Not valid email! Web Url: Not valid web url! 18+: Phone: iPhone Android {{140-user.memo.length}} Color: Debug {{user}} ToDo List Sample Finished Task: {{ getDoneCount() }} / {{ tasks.length }} {{ task.body }} [x]

2014/10/27

Swift and Objective-C get API and Json Parse

SwiftとObjective-CでAPIからjson取得、parse、tableviewに表示まで。

プロジェクトテンプレート、SingleViewApplicationではじめて、
Storyboardでtableviewを追加。アウトレット,datasource,delegateを接続。
プロトコル、UITableViewDelegateを追加

ローカルファイルの読み込みの場合も、コメントアウトして残してあります。
エラー処理などはしていないので、あくまで参考に。

File: jsonRead.swift ------------------------- // // ViewController.swift // jsonRead // // Created by matz on 2014/10/26. // Copyright (c) 2014年 matz. All rights reserved. // import UIKit class ViewController: UIViewController , UITableViewDelegate{ var myObject = [] var titleStr:String? var thumnail:String? var author:String? @IBOutlet var tbView: UITableView! override func viewDidLoad() { super.viewDidLoad() self.view.backgroundColor = UIColor.whiteColor() self.getData() } func getData(){ /************************************************** // ローカルファイルから取得 var filePath:String = NSBundle.mainBundle().pathForResource("gist", ofType:"json")! let jsonString:String? = String(contentsOfFile: filePath, encoding: NSUTF8StringEncoding, error:nil) if(jsonString != nil){ // JSON 文字列をそのまま NSJSONSerialization に渡せないので、 // NSData に変換する var jsonData = jsonString?.dataUsingEncoding(NSUnicodeStringEncoding, allowLossyConversion: false) var jsonObjects:AnyObject? = NSJSONSerialization.JSONObjectWithData(jsonData!, options: NSJSONReadingOptions.MutableContainers, error: nil) println(jsonObjects) }else{} var data:NSData? = NSData(contentsOfURL: NSURL(string: "https://api.github.com/users/manchan/gists")!) **************************************************/ let URL = NSURL(string: "https://api.github.com/users/manchan/gists") let req = NSURLRequest(URL: URL!) let connection : NSURLConnection? = NSURLConnection(request: req, delegate: self, startImmediately: false) // リクエスト送信 NSURLConnection.sendAsynchronousRequest(req, queue: NSOperationQueue.mainQueue(), completionHandler:response) } // リクエスト終わり次第、実行 func response(res: NSURLResponse!, data: NSData!, error: NSError!){ if let json = NSJSONSerialization.JSONObjectWithData(data, options: .MutableLeaves, error: nil) as? NSArray { myObject = json tbView.reloadData() } else { //NSArray is nil } } func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int { return myObject.count; } func tableView(tableView: UITableView?, cellForRowAtIndexPath indexPath:NSIndexPath!) -> UITableViewCell! { let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "Cell") cell.textLabel.text = myObject[indexPath.row]["description"] as? String return cell } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } }

2014/10/25

Swift API Request,JsonParse, Bind PickerView

File: getPrefecture.swift ------------------------- // // ViewController.swift // getPrefecture // // Created by matz on 2014/10/24. // Copyright (c) 2014年 matz. All rights reserved. // import UIKit class ViewController: UIViewController, UIPickerViewDelegate { // 都道府県 var pref: NSArray = [] @IBOutlet var pickView: UIPickerView! @IBOutlet var itemLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } @IBAction func load(sender: AnyObject) { getData() } func getData() { let URL = NSURL(string: "http://express.heartrails.com/api/json?method=getPrefectures") let req = NSURLRequest(URL: URL!) let connection : NSURLConnection? = NSURLConnection(request: req, delegate: self, startImmediately: false) // リクエスト送信 NSURLConnection.sendAsynchronousRequest(req, queue: NSOperationQueue.mainQueue(), completionHandler: response) } // リクエスト終わり次第、実行 func response(res: NSURLResponse!, data: NSData!, error: NSError!){ // 取得したデータをログ表示 // println(data) let json: NSDictionary = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.AllowFragments, error: nil) as NSDictionary let res: NSDictionary = json.objectForKey("response") as NSDictionary pref = res.objectForKey("prefecture") as NSArray // for var i=0; i Int{ return 1; } func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{ return pref.count } func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String!{ return pref[row] as String } func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){ var itemSelected = pref[row] as String itemLabel.text = itemSelected } }

Swift API Request,JsonParse, Bind PickerView

UIPickerViewとUILabelをStoryBoardで追加後、
アウトレット接続

@IBOutlet var pickView: UIPickerView!
@IBOutlet var itemLabel: UILabel!

LOADボタンを追加後、

アクション追加

@IBAction func load(sender: AnyObject)

2014/10/22

Gist（Github）のツール作りました

gist-tool

http://manchan.github.io/gist-tool/

Description

Seo friendly gists generate tool. Generate a gist and embeds it in a <noscript> tag for RSS readers and search engines

gistのIDを入れるだけで、ソースをコピペできるツール作りました。

既存のgistの埋め込みのソース（Embed URL）では、 jsが動的に生成されるだけで、SEO的にあれなので、生のソースをコピペできる用にしました。

使い方は簡単で、gistのidを入力して、検索するだけ。結果が表示され、noscriptでソースが表示されます。 Select Embed Codeで簡単に全ソースを選択できます。

あとは煮るなり、焼くなり、ブログに貼り付けるなり、お好きにどうぞ。

http://manchan.github.io/gist-tool/

※更新 2014/10/27
マルチファイルに対応できる用にしました。

2014/10/21

PhpStormとGoogle App Engineの連携

PhpStormとGoogle App Engine連携

便利。PhpStorm6.0からできてたので、2013年の3月には連携できてたみたいです。いちいち、google AppEngineLauncherを立ち上げて、deployするのはめんどくさいので、PhpStormからさっとアップできるのは便利です。

設定方法

Preferencesより、Google App Engine for PHPを探します。 Enable Google App Engine for PHP supportにチェックを入れて、 Macの場合、SDK directoryは以下にします。

/Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine

Python executableは以下。

/usr/bin/python

App Engine Account Settingsはgoogleのアカウント情報を入れて、下のApplyボタンを押して、OK。

これで、ToolsのGoogle App Engine for PHPのところで、 Upload App Engine PHP app...が押せるようになっているので、押すと、コンソールが画面が立ち上がりdeployが完了する。

PhpStorm本家の記事はこちら

Getting Started with PhpStorm as Google App Engine PHP IDE
https://confluence.jetbrains.com/display/PhpStorm/Getting+Started+with+PhpStorm+as+Google+App+Engine+PHP+IDE
http://blog.jetbrains.com/phpstorm/2013/05/support-for-google-app-engine-php-in-phpstorm/

2014/10/15

Swift Tourやってみた part2

Swift Tour part1

playgroundを順にやってみる。
https://developer.apple.com/library/prerelease/mac/documentation/Swift/Conceptual/Swift_Programming_Language/GuidedTour.html#//apple_ref/doc/uid/TP40014097-CH2-XID_1

2014/10/14

SwiftでのSyntaxHighlight

swiftをブログとかに載せたいときに通常のシンタックスハイライターでは表示がしっくりこない場合にどうするか。

1. Xcodeからのコピー

ハイライトさせたいコードをXcodeからコピーします。

2. TextEditアプリでhtmlにエクスポート

次に、TextEditのアプリで新規ファイルを作成、ペースト、
そして、保存する際に、htmlで保存してください。

3. 保存したhtmlからCSSを抜き出す

htmlエディター（Vim, Emacs, Sublime Text）などで先ほどの、
htmlを開いて、<style>ブロックの部分を抜き出します。
それをブログのプラットフォームでのhtmlヘッダー共通部分などに貼り付けて、保存します。

bloggerの場合ですと、
ブログ管理画面より、テンプレート > HTMLの編集　の箇所です。

4. body以下の部分をブログ記事に

body以下の部分をコピーしてhtml保存すればOK。

※注意点

ブログサービスによっては、既存のCSSとセレクタが重複する可能性があります。また一度CSSを追加している場合は、再度貼り付ける必要はありません。

※結局
gistでもいいかも

2014/10/13

Swift Tourやってみた part1

Swift Tour part1

2014/10/06

iphone6について

先日購入したiphone6が割れた...
つるっとコンクリートの地面に落としてしまったら、もう最期。
それは5とは全くの別もの。
はい、私、3GS,、5、6と連続破損歴更新中でございます。
縁が丸く、つるっといきやすいのですよ、
つるっと。

iphoneはケースとかフィルムしない方がかっこいいと思ってるあなた！
ケースとかしてるやつはジョナサン・アイブへの冒涜だ！とか
デザインされたままのApple製品を愛していて、ケースとかつけたことない、
そこのあなた！！！

ほんとすぐ割れるから、
買って30秒で割れた人とかいるみたいだから（ぐぐって）
ケツポケットで割れたとか、
昔ゲームボーイをケツポケットに入れて座って、
割れて泣いたこと思い出したわ。

つべこべ言わずに保護フィルムか、ケースをつけてね。
http://yukan-news.ameba.jp/20141001-23963/
「Z’us-G（ゼウスジー）」
112gの鉄球を150cmから落としても割れないみたい。
実感がわかないけれども、頑丈そう。

とにかく6はほんとに割れやすいのでご注意を！

2014/09/11

OpenDataを活用した滋賀県（大津市）の観光スポットなどをナビゲーションするiOSアプリを作りました

オープンデータを活用した滋賀県（大津市）の観光スポットなどをナビゲーションするiOSアプリを作りました

アプリの概要

※オンライン状態でGPS機能をONにしてください。

機能一覧:

市営駐車場

観光名所

社寺

市営駐車場

公衆トイレ

ホテル（小休憩用）

花火大会当日用ゴミ箱　※現在は花火大会終了しているため、使えません。
上記スポットを選択するとマップにピンが立ちます。

徒歩と車でどのくらい時間がかかるかの表示（デフォルトで車となっています）

テーブルのダブルタップで目的地への3Dルート案内

スポットのWeb案内

目的地までの方角コンパスとリアルタイム距離表示、方位磁石付き

※マップにピンが立たない、表示されない時はしばらく経ってからアイテムを選択してください。

技術的な話

ホテル以外はすべて大津市のびわ湖大花火大会オープンデータを活用させてもらっています。
オープンデータとはなに？という詳細は割愛させてもらいますが、ざっくり言うと国や公共機関などが所有、管理するデータをアクセスしやすい、誰でも活用しやすい形に加工したデータです。そして、そのWeb上のデータをつなぐ（linkする）ことで、新しい価値を生み出そうとする取り組み、総称をLOD（Linked Open Data）というそうです。LODはWebの創始者Tim Berners-Leeが提唱しています。
最近テレビでも鯖江市などのオープンデータの活用事例が放映されていたり、今後かなりアツい分野であることは確かです。

公開されているオープンデータの取得方法

RDFで書かれたメタデータを検索するためのクエリ言語「SPARQL」を使用しています。

滋賀県のホテルリストの取得方法

ホテルリスト表示APIからObjective-cでスクレイピングしています。

スポットの画像取得

オープンデータで定義されていないものに関しては、
Google Image Search APIにて非同期で取得

最後に

京都でオープンデータはないのかと思い、調べたところ、オープンデータでの形式はないようです。

京都市 観光・モビリティ・防災 オープンデータ
https://kyoto.smartercity.jp/

全国の状況はというとこんなのを見つけました。

日本のオープンデータ都市数
http://fukuno.jig.jp/2013/opendatamap

2014/09/05日現在で45です。

まだまだ少ないといった印象ですね。

2014/09/06

SwiftからSPARQL利用

SwiftからSPARQLを利用するには

SPARQLは、エンドポイントと呼ばれるURIにGETリクエストでSPARQLクエリを投げると、json、xmlなど(指定可能)がレスポンスで返ってきます。

例えば、CocoaPodsでAFNetworkingを利用する場合
execQueryにSPARQLクエリを入れてください。

以下、びわ湖大花火大会に関するオープンデータ用

        let manager :AFHTTPRequestOperationManager = AFHTTPRequestOperationManager()
        let url :String = "http://dl.opendata.shiga.jp/sparql"
        let sparql :String = execQuery
        
        let parameters :Dictionary = [
            "default-graph-uri" : "http://lod.opendata.shiga.jp/hanabi2014",
            "query"             : sparql,
            "format"            : "json",
        ]
        
        manager.requestSerializer = AFJSONRequestSerializer()
        manager.requestSerializer.setValue("application/sparql-results+json", forHTTPHeaderField: "Accept")
        manager.responseSerializer = AFHTTPResponseSerializer()
        let requestSuccess = {
            (operation :AFHTTPRequestOperation!, responseObject :AnyObject!) -> Void in
            NSLog("requestSuccess \(operation.responseString)")            
        }
        let requestFailure = {
            (operation :AFHTTPRequestOperation!, error :NSError!) -> Void in
            NSLog("requestFailure: \(error)")
        }
        
        manager.GET(url, parameters: parameters, success: requestSuccess, failure: requestFailure)

CC BY Yuichi Matsuoka / @you_matz

2014/09/05

Objective-CでのSPARQL利用

Objective-CからSPARQLを利用するには

SPARQLは、エンドポイントと呼ばれるURIにGETリクエストでSPARQLクエリを投げると、json、xmlなど(指定可能)がレスポンスで返ってきます。

例えば、大津市内の観光名所のデータ一覧を取得する場合は

  
prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos# ≷
prefix schema: <http://schema.org/ ≷
prefix place: <http://fp.yafjp.org/terms/place# ≷

select * where {
?uri geo:lat ?lat;
geo:long ?long;
rdfs:label ?label;
schema:address ?address;
schema:description ?description;
place:access ?access;
schema:url ?homepage.
filter(regex(str(?uri),"http://lod.opendata.shiga.jp/otsucity/tourist_attraction")).
}

Objective-CでのGETリクエスト送信部のサンプル
execQueryの部分にさきほどのSPARQLを突っ込む

  
    NSString *endpointurl = @"http://dl.opendata.shiga.jp/sparql?default-graph-uri=http%3A%2F%2Flod.opendata.shiga.jp%2Fhanabi2014&query=";
    // ここがポイント
    NSString *encodedText = (__bridge_transfer NSString *)CFURLCreateStringByAddingPercentEscapes(
                                                                                                  NULL,
                                                                                                  (__bridge CFStringRef)execQuery, //元の文字列
                                                                                                  NULL,
                                                                                                  CFSTR("!*'();:@&=+$,/?%#[]"),
                                                                                                  CFStringConvertNSStringEncodingToEncoding(NSUTF8StringEncoding));
    
    NSString *finalreq = [[endpointurl stringByAppendingString:encodedText] stringByAppendingString:@"&format=json"];
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:finalreq]];
    // Accept ヘッダ値は以下の指定に
    [request setValue:@"application/sparql-results+json" forHTTPHeaderField:@"Accept"];
    NSURLResponse *resp;
    NSError *error;
    NSData *resdata = [NSURLConnection sendSynchronousRequest:request returningResponse:&resp error:&error];    
　// jsonに変換
    NSMutableArray *jsonResponse = [NSJSONSerialization JSONObjectWithData:resdata
                                                                   options:kNilOptions
                                                                     error:nil];
    
    return [[jsonResponse valueForKey:@"results"] valueForKey:@"bindings"];

エンドポイントURLにエンコードしたクエリをひっつけて、
レスポンスの形式をapplication/sparql-results+jsonとし、GETリクエストを投げる。
するとレスポンスはjsonで返ってくる。
jsonを配列に格納して、必要な部分を返り値として渡す。
エラー処理などはしていませんので、あくまで参考に。

NSStringクラスの標準URLエンコードでは、対応しきれていない特殊な文字（"!*'();:@&=+$,/?%#[]"）がある。

  
//encoding
NSString *encodedText
     = [execQuery stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]

CoreFoundationのCFURLCreateStringByAddingPercentEscapes()を使用
ARC環境では__bridge_transferを使用することでメモリリークを回避

  
 NSString *encodedText = (__bridge_transfer NSString *)CFURLCreateStringByAddingPercentEscapes(
                                                                                                  NULL,
                                                                                                  (__bridge CFStringRef)execQuery, //元の文字列
                                                                                                  NULL,
                                                                                                  CFSTR("!*'();:@&=+$,/?%#[]"),
                                                                                                  CFStringConvertNSStringEncodingToEncoding(NSUTF8StringEncoding));

次はSwiftでやってみる

CC BY Yuichi Matsuoka / @you_matz

2014/08/24

La MusicaというYouTube Music Player作りました

一ヶ月以上前ですが、La MusicaというYouTube Player作りました。

音楽をずっと聞きっぱなしにできる作業用BGMが欲しかったので、開発しました。

音楽系のWebサービスのLast Fmが公開しているAPIを使えば、アーティストの情報など豊富な情報を取得できるAPIがあるので、比較的容易に開発できます。

使い方〜How To Use

アーティスト名を入れてplayボタンを押すだけ、

あとは自動的にアーティストの音楽がランキング順に流れます。

■一曲をリピートしたい時

・画面左リピートボタンを使用してください。

■Biographyの欄
アーティスト情報の表示

■Similarの欄
似ているアーティストの表示とリンククリックで、自動再生

■画面左Trend
人気アーティストTOP１０のリンククリックで、自動再生

■取得する動画数を増やしたい

・デフォルトで20個に設定しているので、

増やしたいもしくは少なくしたい場合は、「set number」に

数字を入力してください。

静的なページのみの作成なので、GitHub pagesの使用で、無料です。

※アーティストから絞ったアマゾンの商品取得だけ、サーバサイドでGAEを使用してます。（GAEはリクエスト過多の場合、課金）

以下使用技術です。

・Github pages

（静的ページのみのホスティング）

FrontEnd

■Angular js

jsのMVWフレームワーク

■jQuery

■Twitter Bootstrap 3

■typeahead.js

オートコンプリート検索付きプルダウンリスト

WEB API

■Last fm

・曲のランキングの取得

・アーティスト情報の取得（類似アーティストなど）

・最新チャートのTOP10アーティスト取得

http://www.lastfm.jp/api

■YouTube Data API

・動画検索、取得（不要なものを除き、結果をランキング順にソート）

■YouTube JavaScript Player API

・動画プレイヤーの制御（連続自動再生、連続リピート）

■Amazon Product Advertising API

・Amazonからアーティストのアルバム商品をひっぱってくる。

■GAE（Google App Engine）

GAEをAmazon Product Advertising APIを使うためだけに使用。

jsでAPI叩く方法が見当たらない（プラス、awsのkeyを公開したくないなどもろもろ）

ソースはGithubで公開してます。

https://github.com/manchan/lamusica

La Musica Music Player

http://manchan.github.io/lamusica/

24時間好きな音楽聞き放題、あなたのミュージックライフを楽しませるツールです「Lamusica」開発者インタビュー

http://startapp.jp/2014/07/11/lamusica.html

2014/06/14

Swiftことはじめ、UIAlertView

iOSアプリ開発、新プログラミング言語Swift、
まずはUIAlertViewの表示から。

Swiftの場合

    @IBAction func showMessage(sender : AnyObject) {
        
        let alert = UIAlertView()
        alert.title = "Swiftでタイトル"
        alert.message = "SwiftでUIAlertViewを使ってメッセージ"
        alert.addButtonWithTitle("OK")
        alert.show()
    }

Objective-Cの場合

// 複数行で書くタイプ（１ボタンタイプ）
UIAlertView *alert = [[UIAlertView alloc] init];
alert.title = @"Objective-c title";
alert.message = @"完了しました";
[alert addButtonWithTitle:@"確認"];
[alert show];

登録: 投稿 (Atom)