【Codepatch #04】Swiftの書き心地をお手軽に試せるplaygroundを使ってみた！他
Goodpatchのフロントエンドエンジニアが持ち寄った話題をみなさんにお届けする「Codepatch」第四弾です！
初めまして、フロントエンドエンジニアのたにしです。フロントエンド定例では毎回たくさんのことを学ばせてもらっています。
今回のラインアップは次の三つとなります。
・Swiftのplaygroundでいろいろ試す
・Twitterのリアルタイムキーワード検索結果をSlackに投稿
・一覧からタグを選ばせるUIをAngularJSで作った
Swiftのplaygroundでいろいろ試す
フロントエンジニアミーティングで「5分で学ぶSwift講座」をはじめたので、Codepatchで資料を公開していきたいと思います。現在、Goodpatch内にはObjective-Cエンジニアが2名いますが、まだまだリソースが足りない状況です。iOSアプリ開発体制強化のためにも、学習コストが低いと言われているSwiftに取り組んでみました。
現在はXcode6-betaのplaygroundという機能で色々なものを試している状態です。
■ Swiftの試し方
- Xcode6-BetaをiOS Dev Centerからダウンロードしてインストールhttps://developer.apple.com/devcenter/ios/index.action
- Xcode6-Betaを立ち上げると「Welcome to Xcode」という画面が出るので「Get Started with a playground」を選択
- Nameに任意の名前を入力して「Next」。任意の場所をファイル保存先として指定
- 変数などを打ち込むとその中身が表示されたり、consoleを開いてみることが可能
ぜひ試してみてください！
驚いたのは変数名に日本語や絵文字が使えること…使うことってあるんですかね？変数について色々試してみたことに関してはコチラのGitHubにてコードを公開しておりますのでご覧ください。
https://github.com/Yoshikikojima/SwiftFirstPrograming
Twitterのリアルタイムキーワード検索結果をSlackに投稿
Goodpatchでは社内の連絡ツールとしてSlackが使われています。入社して初めて使ったのですが、とても気に入っています。そこで今回はSlack投稿APIとTwitterのストリーミングAPIを使って、Twitterのリアルタイム検索結果をSlackに投稿するコードをNode.jsでさらっと書いてみました。
var Slack = require('node-slack');
var slack = new Slack("YOUR_DOMAIN", "YOUR_TOKEN");
var Twitter = require("ntwitter");
var twitter = new Twitter({
consumer_key: "YOUR_KEY",
consumer_secret: "YOUR_SECRET",
access_token_key: "YOUR_KEY",
access_token_secret: "YOUR_TOKEN_SECRET"
});
var keywords = ["Swift", "Node.js", "AngularJS"];
twitter.stream("statuses/filter", { track: keywords }, function (stream) {
stream.on("data", function (data) {
var name = "tweet by @"+data.user.screen_name;
var msg = "https://twitter.com/" + data.user.screen_name + "/status/" + data.id_str;
slack.send({
text: data.text+"\n"+msg,
channel: '#test',
username: name
});
});
});
ライブラリはこちらを使っています。
ntwitter(https://www.npmjs.org/package/ntwitter)
node-slack(https://www.npmjs.org/package/node-slack)
気になる情報をSlackで追うことが出来てちょっと便利です。
一覧からタグを選ばせるUIをAngularJSで作った
設定画面などでよくある、一覧からタグを追加したり削除したりするUIをAngularJSで作ったらかなり簡単にできたのでメンバーに共有しました。
<div ng-app="app" ng-controller="appCtrl">
<p>
<!-- ng-repeatで配列の中身を一つずつ表示 -->
<span class="label label-info" ng-repeat="item in words" ng-click="removeWord($event, $index)">{{list[item]}}</span>
</p>
<!-- 既に選択ずみのものを選択した際のアラート文 -->
<div class="alert alert-warning alert-dismissable" ng-show="notice">
{{notice}}は選択ずみです。
</div>
<!-- 選択の対象となるもののリストの配列をng-repeatで生成 -->
<form>
<select class="form-control" ng-model="select" ng-change="setWord(select)">
<option value="{{$index}}" ng-repeat="item in list">{{item}}</option>
</select>
</form>
<!-- デバグ用(選択したものの配列の中身を表示 -->
<pre class="pre">{{words}}</pre>
</div>
htmlはこれだけ。シンプル。
お次はjsの中身を。
// 選択対象となるリスト
var list = ['小田さくら','飯窪春菜','石田亜佑美','佐藤優樹','工藤遥','譜久村聖','生田衣梨奈','鞘師里保','鈴木香音','光井愛佳','ジュンジュン','リンリン','久住小春','亀井絵里','道重さゆみ','田中れいな','藤本美貴','高橋愛','紺野あさ美','小川麻琴','新垣里沙','石川梨華','吉澤ひとみ','辻希美','加護亜依','後藤真希','保田圭','矢口真里','市井紗耶香','中澤裕子','石黒彩','飯田圭織','安倍なつみ','福田明日香']
var appCtrl = function($scope) {
$scope.list = list;
// デフォルトで選択されているものを設定
$scope.words = [29,30,31,32,33];
// セレクトボックスの値が変わった時に配列に値を追加する
$scope.setWord = function (id) {
// 引数を数に
var id = id << 0;
// 注意文をリセット
$scope.notice = false;
// 既に配列の中にあるものと被ってないかチェック
for (var i=0,l=$scope.words.length;i<l;i++) {
// 被っている場合はnoticeにその値を入れる
if ($scope.words[i]===id) {
$scope.notice = list[id];
return;
}
}
$scope.words.push(id);
};
// タグをクリックで消去
$scope.removeWord = function ($event, i) {
// タグのclassで一度目か二度目かを判定
if ($($event.target).hasClass('label-info')) {
// 一度目であればdangerのclassを与える
$($event.target).removeClass('label-info').addClass('label-danger').prepend('☓');
} else if ($($event.target).hasClass('label-danger')) {
// 二度目であれば配列から削除する
$scope.words.splice(i, 1);
}
};
};
angular
.module('app',[])
.controller('appCtrl', appCtrl);
はい。本当にこれだけです。
実際に動くものはこちらから確認できます。
http://jsdo.it/migi/xPpW
まとめ
今回はフロントエンドに限らない情報も共有できて、非常に興味深かったです。
「5分で学ぶSwift講座」の今後の資料が楽しみですね！
Goodpatchでは現在iOSエンジニアを募集中です。興味を持っていただけた方は下記よりぜひご連絡ください！
最強のUIデザイナー軍団と最高のUIを作り出すiOSエンジニア
フロントエンドエンジニアも募集しております！