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はほんとに割れやすいのでご注意を！

登録: 投稿 (Atom)