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って何だ?

ソースは以下です。


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


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

以下、サンプルコード。


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を追加

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



2014/10/25

Swift API Request,JsonParse, Bind PickerView


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/14

SwiftでのSyntaxHighlight

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/06

iphone6について

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

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

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

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


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