第1回プログラミング大学in福岡
DESCRIPTION
第1回プログラミング大学in福岡で使ったスライドです。 ・今話題のkintoneって何だろう！ ・kintoneを使ってアプリを作ろう！ ・プログラミングってそもそも何だろう！ 関連記事 http://yamaryu0508.hatenablog.com/entry/2014/06/24/224203TRANSCRIPT
第1回プログラミング大学 in 福岡
2014年6月19日 kintone公認エバンジェリスト 山下 竜Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3 Blog: http://yamaryu0508.hatenablog.com/
アジェンダ• アイスブレイク
• 今話題のkintoneってなんだろう！
• kintoneを使ってアプリを作ろう！
• プログラミングってそもそも何だろう！
• 仕事について理解を深めよう！
• 開催者からのお知らせ
※太字：私のパート
まずプログラミングとは?
kintoneを語る前に
「今話題のkintoneってなんだろう！」
プログラミングとは?
アプリを作って、提供する一連のプロセス
1つの表現として
では、kintoneとは?
kintoneとは?
1行もコードを書かずに ドラッグ&ドロップだけで、
Webアプリを作れる最速のプログラミング環境！（簡単かつ柔軟）
kintoneとは?
そして、最短で改善・効率化を実現する アプリの提供環境
最速な様子
通常 kintone
ネットワーク・サーバの準備
OSのインストール
プログラミング言語開発環境・データベースのインストール
アプリ作成 （要件定義・コーディング・テスト）
アプリ完成！
申込
アプリ作成 （ドラッグ&ドロップ）
準備 （数時間～数日）
準備 （数分）
待ち （数分）
作業 （数日～数年）
作業 （数分）
※「通常」の方で、作ることと提供することの区別がやや曖昧に表現されています
通常
ネットワーク・サーバの準備
OSのインストール
プログラミング言語開発環境・データベースのインストール
アプリ作成 （要件定義・コーディング・テスト）
アプリ完成！
• サーバ/PCを買う
• OS/ライセンスを買う
• トラブりながらインストール・設定作業
環境を準備するだけでも、 (初心者には)金銭的・時間的に リスクだらけです！
そして、本1冊読んでコードを 書いても、他人に提供して、 利用出来るアプリには至れません
初心者でなくても割と似たようなものですorz
これが難しいイメージ？
kintone
申込
アプリ作成 （ドラッグ&ドロップ）
アプリ完成！
• 何しようにも安い・速い・簡単
• 気軽に始められる
• やめようと思えばすぐにやめられる
• 自動的にモバイル対応
• 見えない所で安全・安心要素満載
最短3分で、改善・効率化を 実現するアプリを提供できる！勿論弱点もありますが、アップデート・改修も
ファストなので気になりません
(kintone押しの身としては使い続けて頂けると嬉しいです)
(780円/u/月で) (作るのも) (使うのも)
通常 kintone
ネットワーク・サーバの準備
OSのインストール
プログラミング言語開発環境・データベースのインストール
アプリ作成 （要件定義・コーディング・テスト）
アプリ完成！
申込
アプリ作成 （ドラッグ&ドロップ）
準備 （数時間～数日）
準備 （数分）
待ち （数分）
作業 （数日～数年）
作業 （数分）
※いつか機会があれば、比べてみましょう
なぜ、こんなファストが 可能なのか？
kintoneがファストな理由①
100個弱のアプリが提供されていて、無料アプリは即ダウンロードできます。 あなたの課題を解決してくれるアプリに出会えるかも？
アプリストアの存在
（出典：「kintoneアプリストア」）
kintoneがファストな理由②
業務フローを形作るための パーツが絶妙なバランスで
準備されている！
自分で作るのにも
• コンセプト
• 「ファストシステム」
• 「10分で業務改善アプリ」
• 基本構成要素
• データ
• ワークフロー
• コミュニケーション
kintoneの概要
（出典：「kintone公式サイト」）
アプリ作成のための機能群
「サイボウズプロダクト=チームを強くするツール」の中でも汎用性と専門性を行き来しながら、様々な業務シーンで活用出来るクラ
ウドデータベース（WebDB）サービス
kintoneの基本要素①
ドラッグ&ドロップでフォーム作成
フォーム編集
おすすめグラフ
グラフの種類や集計方法の候補を自動生成
• データ
kintoneの基本要素②• ワークフロー（プロセス管理）
• 柔軟なワークフロー（電子申請・承認）設定
ステータス設定 プロセス設定ワークフローの実行
ステータス名や条件分岐を自由に設定
kintoneの基本要素③
アプリ内コメントスペース
ピープル アプリやコミュニケーションの融合
個人間のコミュニケーション
スマホ通知
• コミュニケーション
kintoneの基本要素（その他）• その他
モバイルビュー
2ファクター認証
4重冗長化「Square」
（出典：「cybozu.comのクラウド基盤」）
これでもか！と言うくらいのBU
[subdomain]
モバイルで使ってこそのクラウド
※地図はJavaScript カスタマイズです
最速過ぎて 有り余る時には・・・
• REST API
• レコードやスペースの操作（登録・更新・削除等）、バルクAPI
• ユーザ・組織の操作
• JavaScript/CSSカスタマイズ
• 各種イベントハンドル、情報取得
• プロキシによる外部API連携
• URL指定によるライブラリの読み込み（HTTPS対応）
kintoneの拡張機能
データ レコード スペース ユーザ
ユーザインターフェース
基幹システム Excel
他のクラウドREST API
kintone.proxy
（他システムとのデータの出し入れ）
（見た目や操作性の強化）
カスタマイズ機能を使うのもの良いでしょう！（これにはコードの記述が必要です）
色々言うより やってみましょう！
「今話題のkintoneってなんだろう！」
「kintoneを使ってアプリを作ろう！」
まずは私から
タブレットとkintoneを活用したアンケートBefore
After
ハンズオンしていきましょう
準備（サンプルダウンロード）①「https://github.com/yamaryu0508/pg-univ-1」にアクセス
②「Download ZIP」をクリックして、 ファイル一式をダウンロード
アプリの作り方
• 自分でフォームを並べてアプリを作る
• Excel/CSVを取込んでアプリを作る
• kintoneアプリストアからアプリを作る（選ぶ）
• SI/サービスを受けてアプリを作る（もらう・買う）
今日はこの辺
今回のアプリ作成シナリオ（インターン先の）社内にこんな課題があると感じた／耳にしたと想像してみてください。数日後に解決策を提案するつもりで考えてみましょう！
案件情報をExcelで管理しているが、同時入力ができなかったり、誰かが古い内容を含むファイルで上書きしてしまったり。また、協力会社と共有しているがメールの飛ばし合いで、破綻気味だ
顧客情報を安全に外出先から閲覧したい（これも社内HDD上にExcelで管理している）
業日報は上司へのメール報告になっているが、メンバーで共有したい（CC面倒だ）
��� �� �������� �� ���
��� �� �������� �� ���
��� �� �������� �� ���
私の思いつき（今日のアプリ作成の流れ）
• 「営業日報」はアプリストアに「商談報告書」というアプリがあったはずなので、そのまま利用
• 「顧客情報」はExcelからそのまんま取込んでしまおう
• 「案件情報」もそのまま取込んでもいいけど、自分で作ってみよう
・顧客情報との紐付けでルックアップも有用 ・協力会社との情報共有にはゲストスペースも有用 （ゲストスペースは今回は取り上げません）
私の思いつき（今日のアプリ作成の流れ）
① 営業日報 ③ 案件情報② 顧客情報
（アプリストアから）（Excelから）
（自分でフォーム設計）
課題解決（提案の中身）
• 情報を共有するのはkintoneの得意とする所なので、「同時入力」や「メールの飛ばし合い」による手間、情報管理のミスは自動的になくなる
• 外出先からの参照はBasic認証だけで不安ならセキュアアクセス（オプション）もあるので、セキュリティの壁は越えられる
• これをキッカケに他の課題解決にも取り組んでもらおう（提案しよう）
• クラウドなのでまずは試してもらうところから（継続してもらえるようにフォローは必要）
②「アプリストアから選ぶ」 をクリック
アプリ作成①「営業日報」
①「作成」をクリック
アプリ作成①「営業日報」
※「営業・セールス」を選択
④「追加」をクリック
③「このアプリを追加」をクリック
アプリ作成①「営業日報」
⑤めでたく完成！
アプリ作成②「顧客情報」
①「作成」をクリック
②「Excel/CSVから作成」をクリック
アプリ作成②「顧客情報」
③Excel/CSVファイルを取り込み
アプリ作成②「顧客情報」
④フィールドタイプを選択 （今回は右のように変更）
⑤「作成」をクリック
アプリ作成②「顧客情報」
⑥めでたく完成！
アプリ作成③「案件情報」• 案件情報として管理する必要がありそうな情報を洗い出す（考えながら作って、後からの追加・修正も大丈夫）
• 「はじめから作成」で、ガイドに従ってアプリ作成フォーム項目 フィールドの種類タイトル 文字列（1行）担当者 文字列（1行）
納工期（開始） 日付
納工期（終了） 日付
会社名 ルックアップフィールド （設定は最後に）
先方担当者 文字列（1行）電話番号 文字列（1行）内容 文字列（複数行）
参考資料 添付ファイル
ルックアップ先のフィールドを配置した後
（今回は「先方担当者」、「電話番号」）
アプリ作成③「案件情報」
①「作成」をクリック
②「はじめから作成」をクリック
アプリ作成③「案件情報」
• 「アプリストアから選ぶ」でアプリ作成
※ここからガイドに従って進めます
③「アプリ名」を入力して「保存」をクリック
アプリ作成③「案件情報」
• 「アプリストアから選ぶ」でアプリ作成
⑤アイコンを選択 （好みで）
⑥デザインを選択 （好みで）
⑦アプリの説明を入力 （適当に）
⑧「保存」をクリック ④「一般設定」をクリック
アプリ作成③「案件情報」
• 「アプリストアから選ぶ」でアプリ作成⑪「保存」をクリック ⑨「フォームの編集」をクリック
⑩ドラッグ&ドロップでフォーム設計
※「会社名」（ルックアップフィールド）の設定
アプリ作成③「案件情報」
• 「アプリストアから選ぶ」でアプリ作成⑮「保存」をクリック ⑫「一覧の追加」をクリック
⑭ドラッグ&ドロップで表示一覧設定
⑬「一覧名」を入力
アプリ作成③「案件情報」
⑯「設定完了」をクリック
アプリ作成③「案件情報」
⑰めでたく完成！
アプリ完成イメージまとめ
フォームの項目を 洗い出し
アプリストアの テンプレートベース
顧客情報
営業日報
案件情報
情報参照 （ルックアップ）
フォームもデータも 元のExcelベース
今回のアプリで解決出来る他のケースBefore
今回のアプリで解決出来る他のケース（続き）
• 現場で必要な情報は事務所からペーパー持参が主となっている（無くして問題になったことも）
• 現場で急遽必要になった情報の即時入手が困難である
• 作業時の現場の状況が把握しづらい
• 事務所と現場の連絡は電話が主となっており、重要な項目について履歴を残しにくいことがある
• グループ企業間での情報連携がスムーズに行えず、情報の2重管理等の手間を要している
Before
今回のアプリで解決出来る他のケース（続き）After
ちょっとだけ コーディング
機能強化で更に便利なアプリを！
（出典：「cybozu.com developer network」）
（と言ってもサンプルを入れて試すだけです）
時間があれば
JavaScriptカスタマイズ（完成イメージ）
• 「案件情報」にガントチャートを導入
• 「顧客情報」に地図を導入
ガントチャート
地図
サンプルコードを今日作ったアプリに適用します
（アプリをサンプル用に改造）
• 準備
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
フォーム項目 フィールドの種類 フィールドコード 初期値・選択肢 !
タイトル 文字列（1行） To_Do
納工期（開始） 日付 From
納工期（終了） 日付 To
内容 文字列（複数行） Details色 ドロップダウン Color Red, Orange, Blue, Green
「フィールドコード」を設定
「（色）フィールド」を追加
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
②「フォームの編集」をクリック
①アプリトップ右上の「歯車」の「このアプリの設定」をクリック
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
①「歯車」の「設定」をクリック
②「フィールドコード」を設定（他も同様）
③「色」フィールドを追加
④「保存」をクリック
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
⑤「JavaScript/CSSでカスタマイズ」をクリック
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
⑥「アップロードして追加」から サンプルファイルをアップロード
⑦「保存」をクリック
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
⑧「設定完了」をクリック
⑧めでたく完成！
JavaScriptカスタマイズ① 「案件情報」にガントチャートを導入
• 準備
JavaScriptカスタマイズ② 「顧客情報」に地図を導入
フォーム項目 フィールドの種類 フィールドコード
住所 文字列（1行） Address
緯度 数値 lat
経度 数値 lng
レコード番号 （レコード番号） record_no
「フィールドコード」を設定
「（レコード番号）フィールド」を追加
②「フィールドコード」を設定（他も同様）
③「レコード番号」フィールドを追加
①「歯車」の「設定」をクリック
※「ガントチャート」と 同様に設定していく
JavaScriptカスタマイズ② 「顧客情報」に地図を導入
めでたく完成！
JavaScriptカスタマイズ② 「顧客情報」に地図を導入
ここで、ちょっとだけまとめておきましょう
アプリを作る時の進め方
アプリストアから選ぶ
利用
自分で加除修正 ドラッグ&ドロップで作る
少しイメージが違う 全くイメージが違う
効率化したい課題を吟味
そして、修正や作り直して ブラッシュアップしましょう
プログラミングについて考えていきましょう
「kintoneを使ってアプリを作ろう！」
「プログラミングってそもそも何だろう！」
プログラミングとは?
アプリを作って、提供する一連のプロセス
1つの表現として
プログラミングの必要性
高まってきていると言わざるを得ないでしょう！
トレンドとしては
まず「理系か文系か?」
プログラミング= 理系の学生?
文系の学生に プログラミングは不要?
理系か文系か?
理系の大学生が1年生でプログラミングを学ばされる理由を考えると分かるような気がします。
理系か文系か?
理系の大学生が1年生でプログラミングを学ばされる理由を考えると分かるような気がします。
理系の場合は、その後の学習・研究を進める際に有用になる可能性が高いからだと思います
では、「文系でも」と言われるようになってきたのは?
プログラミングの必要性アメリカ大統領が言ったから?
（出典：「https://www.youtube.com/watch?v=6XvmhE1J9PY#t=28」）
「コンピューターを勉強することはあなたの未来のためだけじゃないんだ。アメリカの未来がかかっている。」
（出典：「https://www.youtube.com/watch?v=zXubEVVDGxs」）
「Everyone Should Learn to Code」
プログラミングの必要性
「プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。」（Facebook元役員Chamath Palihapitiya）
Facebookの元役員が保証してくれるから?
プログラミングの必要性政府の成長戦略素案にプログラミング教育が出てきたから?
（出典：「http://techacademy.jp/magazine/736」）
「toggeter」[http://togetter.com/li/519664]等でも賛否意見・議論されています
義務教育としてなら、音楽や美術等の副教科的な感じが良いかと個人的に思います（キッカケの場）。教材のアップデートが大変そうですし、先生のスキルに左右され過ぎそうです。
プログラミングを学ぶ必要性
• ICT利活用の敷居は下がり続けていくので、一歩踏み込んで、アプリも「使う」側から「作って、提供する」側にいくのも当たり前になってくる
• タダで学べる環境も充実してきているので、プログラミングが教養化していく
• データや情報の量が増えてきているので、これらの整理、自身の思考の整理、効率的かつ高速な意思決定等を行うのに役立たせる
• 日本の（労働）人口が減っていくことから、労働力の補完として役立たせる（古典的には、ルール化された計算や単純作業、繰り返し作業のPCへのお任せ）
私の思いとしては、・・・今後学生として、社会人として・・・
下がり続けるICT利活用の敷居
1995年頃
CPU:200MHz メモリ:32MB HDD:5GB 通信:32kbps約50万円
CPU:1.2GHz メモリ:512MB HDD:40GB 通信:10Mbps
2005年頃
約25万円
現在
CPU:1.4GHzDC メモリ:4GB HDD:256GB 通信:1Gbps約10万円
PC
私が欲しかったPC 私が買ったPC 私が使ってるPC
インターネット
下がり続けるICT利活用の敷居
インターネットを使うのは当たり前
プログラマ人口
国内のプログラマ人口は40～100万人くらいのようです
世界最大のプログラマコミュニティサイト『GitHub』のユーザ数は年間100万人単位で増加（現在は約400万ユーザ、約1,000万レポジトリ）
プログラミング学習サイト（無料）
※2年間で再生回数1,000万回突破
プログラミングコミュニティサイト
プログラミングに関する様々なQ&A、ディスカッションが展開されています！
増え続けるデータ・情報
（出典：「EMARKETINGBLOG.NL」）
最後に
アプリ提供に必要とされるもの
コーディング
ユーザーの利用価値
継続性+
+ アプリケーション=
プログラミング
スピード+
アプリ提供に必要とされるもの
ユーザーの利用価値
継続性+
+ アプリケーション=
kintoneを活用すれば、「スピード」と「コーディング」の要素は意識しなくてよくなるので、しっかり考えたいところに時間を割けるようになります！
プログラミング
kintoneでプログラミングと改善はじめませんか？
便利な業務改善アプリ JavaScript
+ =更に便利な業務改善アプリ
ICTツール
kintoneでプログミラングと（業務）改善はじめてみませんか?
手応えが欲しい方はJavaScriptあたりも
※エディタさえあれば大丈夫