2015年4月23日木曜日

GTUG Girls Meetup (#gtuggirls) に参加してきました!

しょこです。

昨日は第21回GTUG Girls Meetup「1からはじめるAngularJSハンズオン」に
参加してきました。GTUGのイベントは初参加。

Meetupの内容

簡単な概要と初心者向けハンズオンをやりました。
講師は@albatrosaryさん,チュータが@mitsuruogさんでした。
これに則ってやってきた(全部はやってない)
http://albatrosary.hateblo.jp/entry/2014/11/06/101400
togetterはこちら

AngularJS概要

1. AngularJSが生まれた背景
そもそもJava Scriptとは,DOMを操作することを原点としている言語。
→ただ操作しづらいので,操作しやすくするためにjQueryができた。
→でも結構問題があったので,jQueryを整理したBACKBONE.JSが生まれた
→そこからさらに操作しやすくしたのがAngularJS

ちなみにWeb業界2大トレンド"AngularJS"と"React"の違いは,
DOM操作を隠ぺいするかしないか辺りらしい。

2. AngularJSとは
JavaScriptフレームワーク。
色々特徴あるなかで今日は初心者でもわかりやすいディレクティブをやります。
(ディレクティブ以外だとルーター,コントローラー,ファクトリーなどがある)
近いうちに1.x系か2.x系への大型アップデートがあり,機能も拡張される予定。
<<キーワード>>
カスタムタグ/双方向バインディング/DI/ルーティング/Virtual DOM

ハンズオン

1. 環境構築 (サーバの準備)

(1)Macの場合
Pythonが入ってるのでそれを使う。
- アプリケーションサーバを作業フォルダ内で立ち上げる
- localhost:8000 (またはlocalhost:9000)にアクセス
- index.htmlを作成する

(2) Windowsの場合
Python入ってないのでとりあえずWeb IDEを使う。
- Web IDEを開く (今回はJS Binを使った)
- [Add Library] で Angular 1.3.2 Stableを選択
- この時点でindex.htmlが作成されるのでここを編集していく

2. index.htmlを編集してHello, Worldしよう。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body>
  Hello
</body>
</html>

3. index.htmlにAngularJSを読み込ませる

ダウンロードしてもいいけど,とりあえず以下のようにURLから読み取る
srcに指定するのはhttps://angularjs.org/のDownload→CDN
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>

4. 実際に動かしてみよう!!

(1) Angular JSが動いてることを確認する
1+1を{{}}で囲んだ場合に演算結果が表示されればOK
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body>
  Hello {{1+1}}
</body>
</html>

<出力結果>
Hello 2

(2) バインディングの基本をやってみる
<body ng-app>とすると,AngularJSのコードだと認識される。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body ng-app>
<!--テキストボックス-->
  <input type="text" ng-model="hoge">
<!--テキストボックスに入力された内容を表示(バインディング)する-->
    {{hoge}}
</body>
</html>

バインディング時に一瞬{{hoge}}が見えてしまう。
これを解決したい場合はspanを利用してバインディングする。
<body ng-app>
  <input type="text" ng-model="hoge">
  <span ng-bind="hoge"></span>
</body>

(3) 条件分岐をやってみる
AngularJSではng-showとng-ifの2種類が条件分岐文。
二つの違いは今は気にしなくてよいため,今回はng-showを利用。
(*・ω・){<div ng-show="hoge==='1'">が肌になじまない...!
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<!--"1"入力時のみメッセージを出す-->
<body ng-app>
  <input type="text" ng-model="hoge">
  <div ng-show="hoge==='1'">
    <span ng-bind="hoge"></span>
    が入力されました
  </div>
</body>
</html>

(4) ループ文をやってみる
予め初期化しておいたリストからデータを取り出して表示する。
ここらへんで気付いたけどAngularJSはデフォルトの表示がある程度成形されている。
今回のケースだと箇条書きになっている点。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body ng-app>
  <!--ブラウザが表示されたときにdemoDataとして読み取るデータ群-->
  <div ng-init="
    demoData = [
      {name: '佐川', age: 28}, 
      {name: '小川', age: 32}, 
      {name: '山田', age: 16}, 
      {name: '井上', age: 42}
    ]
  "></div>
  <ul>
    <!--リストからデータを取り出す-->
    <li ng-repeat="data in demoData">
      {{data.name} - {{data.age}}
    </li>
  </ul>
</body>
</html>
<出力結果>
・ 佐川 - 28
・ 小川 - 32
・ 山田 - 16
・ 井上 - 42

ここにフィルタ機能を実装するときはliにfilterオプションつけるだけ。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body ng-app>
  <div ng-init="
    demoData = [
      {name: '佐川', age: 28}, 
      {name: '小川', age: 32}, 
      {name: '山田', age: 16}, 
      {name: '井上', age: 42}
    ]
  "></div>
  <input type="text" ng-model="search">
  <ul>
    <li ng-repeat="data in demoData | filter: search">
      {{data.name} - {{data.age}}
    </li>
  </ul>
</body>
</html>
(5) Validationチェックをやってみる
まず初めにhead内でstyleを定義する。
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
  <!--style定義-->
  <style>
    input.ng-invalid.ng-dirty {
      border-color: #ff0000;
    }
  </style>
</head>
次に,body内で必須項目設定(required)をする
<body ng-app>
  <input type="text" ng-model="hoge" required>
</body>
これだけで必須項目にしたテキストボックスに値が入っていないと赤枠が表示されるようになる。
最初から陰影ついててビビる。

(6) エラー処理をやってみる
body内をformで囲った後,エラー条件(今回は文字数)を定義。
エラーメッセージで指定するために名前を付けておく。
<body ng-app>
  <form name="demo">
    <input type="text" name="username" ng-model="hoge" ng-minlength="4" ng-maxlength="8" required>
  </form>
</body>
エラー条件定義後,エラーメッセージを実装
<body ng-app>
  <form name="demo">
    <input type="text" name="username" ng-model="hoge" ng-minlength="4" ng-maxlength="8" required>
      <!--テキストボックスに入力された文字数に問題があった場合エラーメッセージを表示する-->
      <p ng-show="demo.username.$error.minlength">4文字以下です</p>
      <p ng-show="demo.username.$error.maxlength">8文字以上入力されています</p>
  </form>
</body>
(7) 番外編:ヘッダーを固定させる(SPA)
Single Page Applicationを実装するときは,ファイルを分けてbody内でindex.htmlから呼び出す。
<body ng-app>
  <div ng-include="'header.html'"></div>
  <div>
    <!--この中身を書き換える-->
  </div>
</body>

Q&A

1. 今後独学するのにおすすめなサイト/本


2. その他


  • Yeoman
    • http://yeoman.io/
    • yo angular-fullstackコマンドだけでちょっとしたアプリケーションが動く。
    • 次回のGTUGのテーマです。
  • AngularJS適用するのにおすすめ/おすすめじゃないソフトウェアは?
    • おすすめ→業務アプリケーションの管理画面とか
    • おすすめじゃない→画像をたくさん動かすゲームとか
    • 規模は小規模~大規模特に関係ない
  • ディレクティブの次は何やるのがいい?
    • 次のステップならルーターとコントローラーがおすすめ。
      • ルーターには3種類ある。ng-ルーター/ui-ルーター/new-ルーター
      • 仕事でAngular触るならui-ルーター,勉強用ならnew-ルーターを使うのがおすすめ (newはまだ安定していない)
    • ルーターとコントローラーの次はファクトリー
      • $httpと$resourceを使ってサーバと通信すれば一通り作れるようになったってことになる。

2015年4月16日木曜日

3泊4日で坐禅修行してきた

お休みをいただいて3泊4日の坐禅修行に行ってきました。

修行してきたのは,宝泉寺 禅センターという
嵐山よりさらに奥へ入ったところです。

行ってどうだった?

行ってよかった。でも1回でいいかな。
今回の大きな収穫は,無心になることを坐禅を通して身に着けれたことかなと思います。
あとは,食事の際の行儀がよくなった。
メリハリが聞いていたので長期でも大丈夫かなと思いました。
施設も全体的に綺麗で,建物も新しかった。お寺の方も若かった。
ただ施設内はシャワーだけなのでお風呂が恋しかった。

修行の基本

決まった場所以外での私語禁止。5分前行動。
防寒具の着用禁止。靴下も禁止で常に裸足。
食事に肉・魚は出てきません(精進料理。ただし味付けは薄目濃いめ様々。)
朝食・夕食は無言で食事中の飲み物も無しで,決められた作法でいただきます。
ここで使う箸・器は修行初日~最終日まで洗剤では洗いません。
昼食は和やかな雰囲気で喋りながら楽しく食べれます。(カレーとか出てきます)

修行のスケジュール

※1日目は安単から参加し,最終日は粥座まで参加です。
5:20 開静 (起床)
  行く前は早いと思ったけど,夜も早いので意外に起きれる。
5:40 八段錦 (太極拳)
  起きてから15分なので始まりまであまり余裕がない。
  雨の日は坐禅に変わります。
6:00 坐禅 (25分×2)
  朝のいい静けさと空腹によるお腹からの音(笑)を感じながらの坐禅は
  落ち着きました。(坐禅は初日の夜以外は落ち着く)
7:00 朝課
  本堂でお経を読みます。お経を読むと,修行感高まります。
7:20 掃除
  誰でもわかるマニュアルが置いてある。だから常に寺は綺麗。
7:50 粥座 (朝食)
  朝早い割に朝食が遅い。朝は必ずお粥。
-:-- 下山者挨拶
  その日の下山者はここで挨拶して帰ります。
9:00 作務
  雨の日は法話DVD鑑賞に変更。
  草むしりしたり,畑耕したりします。途中に茶礼(おやつ休憩)あり。
11:45 安単
  昼食前の坐禅タイム。
12:00 斎座 (昼食)
  普段どおりに食事して,修行者が手分けして片付けます。
  作法無しで自由に食べれるので三食のうち一番食べてます。
12:40 自由時間
  自分は寝たり,観光に行ったり,洗濯したり,シャワー浴びたり。
  読書している方や,外で坐禅している方など過ごし方は様々。
16:45 安単
  夕食前の坐禅タイム。ここで入山した人が自己紹介した後合流する。
17:00 薬石 (夕食)
  個人的に,初日の薬石はこの修行最難関。
  前に座っている長期修行者並のスピードで食べ,片付けます
18:10 法話 (火曜/土曜のみ)
  和尚さんからのありがたいお話。法話がなければ休憩になる。
19:00 坐禅 (25分*3)
  初日は最初のコマで坐禅指導あり。
  姿勢指導も適宜あり,テレビなどでよく見る板で叩かれるのも
  希望すればしてもらえます。(希望しなければされない)
20:30 開枕調経
  消灯までの準備時間開始って意味です。
21:10 茶礼 (自由参加)
  お寺のスタッフの方や修行者とお菓子とお茶をいただきながら,
  雑談したり食事の作法の練習したりフリータイムです。
22:00 開枕 (消灯)
  消灯の見回りに来ます。消灯後は速やかに寝ていました。
  ログハウスの二段ベッドで寝ましたが,少し寝にくいです。

これから行く人へ

一回の修行でしっかりとした収穫を得るために,
長期修行者やお寺のスタッフさんとたくさん話すといいと思います。
また,寒暖差が激しいのでジャージの中に着込める防寒具を多めに用意しましょう。