サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia

Transcript of "サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia"

1. 1. サンタクロースを⽀支える   IT技術 @M_̲Ishikawa
2. 2. メリークリスマス！
3. 3. ⾃自⼰己紹介 • ⽯石川将⾏行行（@M_̲Ishikawa  id:ishikawam）   • グリーでエンジニアやってます   • YAPCでのトークは2年年ぶり   • これまでやってきたボランティア活動   • 地球温暖化防⽌止の啓発、障がい者福祉、等のボランティア   • YAPCのボラスタッフも3回⽬目  (phpcon,  html5j等も)   •  　 　チャリティーサンタでITボランティア  
4. 4.  　このセッションの⽬目的 • 「仕事以外の趣味エンジニアリングで
 ボランティアに参加するって⼿手があるよ
 」って伝えたい  
5. 5. 今⽇日のおはなし • チャリティーサンタとは   • ITチームについて   • プロボノ   • ITチームの活動   • NPOとIT   • Web以外の事例例
6. 6. チャリティーサンタとは • チャリティーサンタとは   • IT • プロボノ   • IT • NPO • Web
7. 7.  　チャリティーサンタとは • 全国でボランティアで集まったサンタク ロースたちが⼦子どもらにプレゼントを届け に⾏行行くNPO活動   1,775⼈人 4,434⼈人 ※2014年度実績 • 家庭から集まったお⾦金金 で海外や国内の⼦子ども たちへの⽀支援活動をし ています
8. 8. 岡山 秋田 仙台 多摩 北東京 南東京 千葉 横浜 湘南 群馬 香川 愛媛 上越 名古屋 津山 北九州 福岡 大阪 広島 都留 甲府 三重 企業 サポーター 支援先 子ども保護者 プレゼントをお預かりし、 チャリティー金を頂きます。 クリスマス当日、お預かり したプレゼントをサンタ さん（ボランティア）がお 届けに伺います！ 頂いたチャリティー金で 世界の子どもたちに支援 を行います。 チャリティーサンタの 活動に賛同、ご支援い ただいた個人、法人の みなさまには、定期的 に報告書、メルマガな どで活動報告をいた します。
9. 9. 「サンタのような    　⼤大⼈人を増やす」   「あなたも誰かの    　サンタクロース」
10. 10. ITチームについて • チャリティーサンタとは   • IT • プロボノ   • IT • NPO • Web
11. 11. ITチーム
12. 12.  　ITチームの位置づけ 本部 ITチーム ⽀支部 サンタ ⼦子ども 8⼈人 22⽀支部 1,775⼈人 4,434⼈人
13. 13.  　ITチームのいろんな⼈人たち • 渋⾕谷のベンチャー企業のWebエンジニア   • 中国で暮らしているWebデザイナー   • 岡⼭山にいるSIerエンジニア   • ベトナム出張のオフショアマネージャー   • ソーシャルゲームのプログラマ   • グッドデザイン受賞経験あるディレクター   • 事務機器メーカーのエンジニア   • 企業研修向けのIT講師
14. 14.  　チャリティーサンタのITの歴史 • 代表ががんばってホームページ作る   • Webデザイナーがメンバーに現れ始める   • エンジニアがメンバーに現れ始める   • 任意団体からNPO法⼈人へ   • 複数名で作業できるようになる  
15. 15. • 代表ががんばってホームページ作る   • Webデザイナーがメンバーに現れ始める   • エンジニアがメンバーに現れ始める   • 任意団体からNPO法⼈人へ   • 複数名で作業できるようになる    　チャリティーサンタのITの歴史 • 代表ががんばってホームページ作る   • Webデザイナーがメンバーに現れ始める   • エンジニアがメンバーに現れ始める   • 任意団体からNPO法⼈人へ   • 複数名で作業できるようになる   「どうやってだよ！」   をこれから説明します。
16. 16. IT周辺の環境 〜～レンタルサーバと仲良良くなる〜～
17. 17.  　レンタルサーバと仲良良くなる • 共⽤用レンタルサーバは基本的に   • SSHが使えずFTPでファイル転送   • DocumentRootが固定   • rootにもなれず⾃自由に設定ファイルをいじれない   sudo権限がないどころではない
 厳しい制約
18. 18.  　レンタルサーバと仲良良くなる • これまで：FTPでファイルを転送   • レンタルサーバはこれ=デプロイ   • このデプロイは各⾃自のローカルから直接できて しまう   • バージョン管理理はしていない  or  ⼈人⼒力力バージョ ン管理理   ！危険な状態！
19. 19. レンタルサーバに   git導⼊入で全部解決！ • これから：Git＆FTP   • 本番に  .git  置いて、git  pull   • FTPで転送されても  git  diff  で変更更内容確認でき て、add&commitできる   • 事故があっても戻したり、すぐ復復旧ができる   • (あたりまえだけど)バージョン管理理！   すごくいい感じになりそう♪
 だけど...
20. 20.  　Git  &  Github導⼊入の壁 • Git&Githubを使ったことないメンバーもいる   • terminal(=Linuxコマンド)を使わないメン バーもいる   • sshできずftpでのみアクセスするメンバーも いる   Git  &  Github、SSHを使わなくても⼤大丈夫な状態にする
21. 21. レンタルサーバに   git導⼊入でやっぱり解決！ • non-‐‑‒SSHerに対する配慮   • 「いままでどおりFTP使ってもいいんだよ」   • 「でもできたらgit、Github使うと便便利利だし楽しいよ」   • デプロイを本番での  git  pull  とすることで、担当者がFTPとかCMSによ る変更更に気づくことができる。   • FTPで転送されても  git  diff  で変更更内容確認できて、add&commitできる   • ⼊入れているWordpressとかフレームワークで構築されたものとか も  .gitignore  しないで更更新されたらaddすることでバックアップになる。   • コミット汚れが気になるならそこを  git  submodule  で管理理すればOK   すごくいい感じに♪
22. 22. Gitリポジトリ運⽤用 • ブランチ   • 本番サーバがmaster,  ステージングがdevelop,  に固定しておく   • Pull  Requestベースだが、⾯面倒なら直commit  OKの運⽤用   • リリース⼿手順   • この運⽤用ではmasterもdevelopもcommitが進む可能性があるので   • master-‐‑‒>developマージしてステージングでdevelopをpull、確認。   • Githubでdevelop-‐‑‒>masterの差分確認。ここでもPRする。浮いてる commitは担当者にSlackで聞いて確認。   • OKならdevelop-‐‑‒>masterマージして本番でmasterをpull。
23. 23. • Q:  レンタルサーバにどうやってgitコマン ドを？   • A:  意外と⼊入れられる(XSERVER調べ)
24. 24. レンタルサーバに   git導⼊入でまるっと解決！ # まずgettext cd ~/tmp wget http://ftp.gnu.org/pub/gnu/gettext/gettext-0.19.1.tar.gz tar gettext-0.19.1.tar.gz cd gettext-0.19.1 ./configure —prefix=$HOME/opt make make install export PATH=~/opt/bin:$PATH # .bashrcにも入れる # そしてgit cd ~/tmp wget https://github.com/git/git/archive/master.zip unzip master cd git-master make configure ./configure --prefix=$HOME/opt make all make install
25. 25. レンタルサーバに   emacs導⼊入で気分も爽快！ # ncursesが必要 cd ~/tmp wget http://ftp.gnu.org/pub/gnu/ncurses/ncurses-6.0.tar.gz tar zxvf ncurses-6.0.tar.gz cd ncurses-6.0 ./configure --prefix=$HOME/opt make make install # そしてemacs cd ~/tmp wget http://ftp.gnu.org/pub/gnu/emacs/emacs-24.5.tar.gz tar zxvf emacs-24.5.tar.gz cd emacs-24.5 LDFLAGS="-L$HOME/opt/lib" ./configure --prefix=$HOME/opt --without-x make make install
26. 26.  　レンタルサーバのちょっと変わった仕様も   エンジニアリングでカバーする • DocumentRootの階層問題   • hoge.com,  www.hoge.com   • ~∼/hoge.com/public_̲html/   • test.hoge.com   • ~∼/test.hoge.com/public_̲html/  ではなく   • ~∼/hoge.com/public_̲html/test/  ！！   • これだと   • hoge.com/test/  で  test.hoge.com  にアクセスされてしまう   • サイトルート相対パスだと崩れる   ln  -‐‑‒s  ~∼/hoge.com/public_̲html/test  ~∼/test.hoge.com 　で解決。
 .gitignore  に/test/を。/test/に  .git  を設置。
 あとは.htaccess  でなんとかする
27. 27.  　レンタルサーバで諦めたこと • zsh   • まあいらないか   • redis,  memcached   • ポート使えそうだったけど、マナーとしてやめておい た。ファイルキャッシュで。   • ユーザーアカウントは1つのみ   • これも本番サーバと思えば諦められる
28. 28. モチベーション 〜～ボランティアでエンジニアリングするモチベーション〜～
29. 29.  　ボランティアでエンジニアリングする
 モチベーション • 好きなツール、好きな技術を好きに使わせ てもらうこと。   • やりきった後のビール   • ⼦子どもたちの笑顔（  ＾ω＾） • 好きなツール、好きな技術を好きに使わせ てもらうこと。  
30. 30.  　担当別なので結構好き勝⼿手(許容) $ ls public_html ... Supporter_Claus callback cbbs index.html letter m sandbox secure staff test WPにCompass/Sass使うね 開発⽤用 BootswatchとVanilla  PHPで 決済のcallback⽤用 KENTの墓場... レンサバのSSLディレクトリ リニューアルサイト！
 Laravel5,  Gulp WP使うー ステージング。サブドメ。 申し込みフォームは   herokuで動かすね ⻑⾧長く運⽤用してるDWサイト
31. 31. 使っているツール • Github   • Private  Repositoryは個⼈人が1つ提供   • Facebook   • Slack   • Trello   • Prott   • Vagrant   • Heroku   • ツールじゃないけど   • Confluence   • 有料料だけどどうしても使いたくて⽯石川が提供 基本的にコスト0
32. 32. ジャンルを越えて   技術に触れられる • まるでOSSコミュニティ＋多技術   • まるでハッカソン＋1⽇日じゃなく1年年〜～ 1年年続くハッカソンを想像してみてください！
33. 33. プロボノ • チャリティーサンタとは   • IT • プロボノ • IT • NPO • Web
34. 34. –wikipediaより プロボノ（Pro bono）は、各分野の専門家が、 職業上持っている知識・スキルや経験を活かし て社会貢献するボランティア活動全般。 また、それに参加する専門家自身。
35. 35. プロボノ • 専⾨門職である私たちが、技術をもってボラ ンティア活動すれば、それはプロボノ。   • アメリカやイギリスではメジャー。⽇日本は ぼちぼち。   • NPOはえてしてIT⾳音痴。技術職のプロボノ が求められている
36. 36.  　⽇日本の主なプロボノ仲介サービス • サービスグラント   • プロボネット   • ⼆二枚⽬目の名刺刺   • a-‐‑‒con   • Social  Marketing  Japan   • ⽇日本でも少しずつ増えてきています
37. 37.  　関わり⽅方   (例例:チャリティーサンタ) • 作業は普段は週に2時間くらい   • ⽉月に2回のもくもく会   • 忙しい時期になるともっと。   • でも、だれがどれくらい関わるかは任せら れる   • まるでOSSコミュニティ！
38. 38. プロボノ＝OSS＋リアル
39. 39. エンジニアの理理想郷は   プロボノ活動にあった！
40. 40. ITチームの活動 • チャリティーサンタとは   • IT • プロボノ   • IT • NPO • Web
41. 41. ITチームの活動 • 作業は普段は週に2時間くらい   • ⽉月に2回のもくもく会   • 忙しい時期になるともっと。   • でも、だれがどれくらい関わるかは任せら れる  
42. 42. もくもく会 • ⽉月に2回、打ち合わせでもなく、ミーティングでも なく、ただモクモクと作業をするのに同じ場所に集 うだけ。   • 結局はちょっと議題がでてきたり、進捗が確認でき たり、相談ができたり、元気かどうか確かめられた り。   • つまり職場で仕事してるのとかに近い環境  
43. 43.  　ITチームが去年年やったこと • ITチーム発⾜足！   • 新サービス(サンタクロースからの⼿手紙)リ リース   • サポタクロースLPのリリース   • Web決済の⾒見見直し、整理理   • サンタ申し込みフォームの改善
44. 44. 新サービス開発   サンタクロースからの⼿手紙 ITチーム ⼿手紙制作会社 本部 Web開発 商品開発 リアルの⼿手紙がどんなものかを   ユーザーにサイトで伝える 全国の家庭 サイト注⽂文 ⼿手紙の配送
45. 45.  　申し込みフォームの改善 ITチーム 全国のサンタ 22⽀支部 フォーム設計、開発 「サンタ申込みフォーム」はこの活動のキモ！   コンバージョンやKPIを設定して企画し開発   エンジニアの領領域を越えてサービスに参加できる 全国の家庭 申し込み ボラ応募 各⽀支部の個別の要望に応える   以前はフォームズで申し込み   メールをExcelへコピペ
46. 46.  　ITチームが今年年やること • スタッフ⽤用サイトのリリース   • サイトリニューアル   • レスポンシブとかコーポレートサイトとか   • サンタ申し込みフォームの強化   • 当⽇日の訪問先地図のシステムリリース   • 個⼈人情報の取り扱い強化
47. 47.  　サイトのリニューアル ITチーム 企業やメディア 中国 サイトが古いのでリニューアルし   レスポンシブ対応したり活動サイトと   コーポレートサイトとを分ける 全国の家庭 岡⼭山 東京 本部 全国のサンタ 制作 開発ディレクション 企画マークアップ ⼤大阪
48. 48.  　スタッフサイトのリリース ITチーム 全国のサンタ全国の⽀支部 企画、設計、開発 現在ベータ版でBasic認証。今後ユーザー認証の   実装や、スマホ対応をしていく。   →ほとんどのユーザーがSPアクセスだった
49. 49. 現場潜⼊入！ ITチーム 北北東京⽀支部 ITチームのメンバーが⽀支部に⼊入ってのサンタ活動。   ITを使った⽀支部の活動の改善余地があるかを潜⼊入調査し   フィードバックして次年年度度のIT計画に活かす 南東京⽀支部 潜⼊入！
50. 50.  　※⽀支部の活動とは • サンタ集め   • 訪問先の家庭集め   • 交流流イベント   • ボランティア管理理   • 訪問先管理理   • 講習会実施   • 活動報告会   • ⾐衣装、プレゼント制作
51. 51.  　地図(GoogleMaps)の活⽤用 • いままで   • 申し込みフォームから届いた メールに書いてある個⼈人情報 をエクセルにコピペしていた   • これから   • GoogleMaps  APIを利利⽤用しマ クロ等アプリケーション開発し て業務を楽に＆安全に ITチーム ⽀支部 地図を担当   現場で開発
52. 52.  　ITチームが来年年やりたいこと • 個⼈人情報の取り扱い強化   • メンバー増強   • あとは…   • あなたが考えたステキなアイデア♡
53. 53. 現状の課題   リテラシーやセキュリティ • いろんな⼈人が活動に参加している   • ITを使った途端なかなか⾔言葉葉が通じない⼈人も   • ⼦子どもの個⼈人情報の取り扱い⽅方   • SNSの危険性、ITリテラシー   • 急に⾳音信不不通   • クラウド上の共有データの紛失、破損
54. 54. 現状の課題   ITサンタを増やす • 5⼈人いても週で2時間なら労働で換算すると0.25⼈人   • 職業やプライベートの状況によって作業できたりで きなかったりで変動するので不不安定   • プロボノ組織なので多様なスキルや経験が増えたほ うが可能性が広がる   • このあたりを⼈人数でカバーしたい
55. 55. NPOとIT • チャリティーサンタとは   • IT • プロボノ   • IT • NPO • Web
56. 56. IT商品を無償でNPOへ   提供している主な企業
57. 57. ⽀支援例例 • Microsoftのクラウドサービス「Office365」 を無償提供   • Google  AppsやAdを無償提供   • SmartNewsは10のNPO団体に半年年間100万円 分の広告枠を提供   • Salesforce   • AWS 年年々⽀支援内容は   変化したりする
58. 58.  　その他のNPOの助成 • 企業からのNPO⽀支援プログラムを受けられる（要審査）   • 継続的にやっているもの、期間限定で枠を設けてやって いるもの、などなど   • 企業の多くは年年度度毎に⽀支援団体数や⽀支援⾦金金額の予算を組 んで⽀支援団体を募集し決定する。   • ⽀支援をやる年年、やらない年年、があったりする。  
59. 59. • 他にも、⼈人材⽀支援や低価格プログラム等、 思いつくほとんどのことがNPOだと優遇さ れる！   • ※ただし、審査あり   • 実績とか、信頼の調査   • どこを⽀支援するか、ということは、その企業の CSRレポートやIR等につながるので重要。
60. 60. Web以外のIT事例例 • チャリティーサンタとは   • IT • プロボノ   • IT • NPO • Web
61. 61. Webじゃない例例 • 同時字幕通訳要約筆記   • なにそれおいしいの？
62. 62. パソコン要約筆記（同時字幕通訳）
63. 63. 要約筆記の構成 無線LAN 投影 筆記者
64. 64. IP  talk • パソコン要約筆記⽤用のソフト   • 投影⽤用、筆記者⽤用全てに⼊入れておく   • 無料料で配布されています。   • 複数⼈人（最⼤大8⼈人）で筆記が可能   • Windows専⽤用   • だれでも無料料でダウンロードでき、即利利⽤用可能   • 同じネットワーク（LAN）でつながっている必要があります   • 筆記者⽤用、投影⽤用ともに同じソフトで設定を変えます
65. 65. IP  talkの課題 • 筆記ボランティアの⼈人材不不⾜足   • 要約筆記サークルは限られた地域にしかない   • 簡単なのでできれば知り合いでやりたい   • システムの⽼老老朽化   • Macでできない   • 進化していない   • アイフォン、スマートフォンに投影したい
66. 66. ゆえに
67. 67. 新しく作れば   あなたもヒーロー！   エンジニアが活躍できる場所は   NPOにあった！
68. 68. 今⽇日はみなさんへ   ITサンタさんからの   プレゼントがあります
69. 69. gulp-‐‑‒xmas
70. 70. gulp-‐‑‒xmas • grunt-‐‑‒xmas   • gulp-‐‑‒xmas  (NEW!)  
71. 71. さいごに
72. 72. • Q:  どうしてお⾦金金にならないのにそんなこと やってるの？   • A:  みなさんお⾦金金にならないのにコード書い たりしてますよね（  ＾ω＾）
73. 73. Letʼ’s   Volunteer   Engineering!
74. 74.  　ご清聴ありがとうございました • ぜひ繋がって下さい！   • @M_̲Ishikawa     • id:ishikawam   • 資料料公開してます   • みなさまの貴重なお時間頂き
  　ありがとうございましたm(_̲  _̲)m