1. ITサービス公開体験
講師役 : 柿元俊也
3/17 STEP UP FESTA 2018 ~Execution~

2. はじめに
•今日は参加していただき
ありがとうございます！
•今回のスライドは、手元の画面でも見れます！
•Slideshareというサービスに感謝！

3. 体験のスケジュール
• 自己紹介 ( 5min )
• 今日のテーマ・作るもの ( 5min )
• 今日使う技術・予備知識 ( 5min )
• プログラミング ( 20min )
• 各自で改造☆タイム ( 10min )
• 質疑応答・まとめ ( 残り時間で )

4. ちなみに

5. 今日は僕の顔入り写真NGです!
体験内容などはどんどん取ってもらってOK!

6. 僕の自己紹介。。。
の前に！

7. スタッフの自己紹介
•名前
•学年
•最近使ってる技術( 言語, 環境とか )
•一人10秒!!

8. 自己紹介
•柿元 俊也 (かきもと しゅんや)
•20歳
•総合情報メディア学科 (4年制)
•ネットワークセキュリティ専攻
•2年

9. 自己紹介
•奈良朱雀高校卒業
• なんと偏差値44!
• 四捨五入したらゼロ！

10. 自己紹介
•資格とか
• 基本情報技術者
• ITパスポート
• 3級陸上特殊無線技士
• 高高度や専用の周波数を使うドローンが飛ばせる、らしい(詳しく知らな
い)
• 普通自動車/普通自動二輪車運転免許
• 小型車両系建設機械の操作に係る講習 修了
• 3tまでのショベルカーを業務で操作できます
• 3級情報配線施工技能士
• 光ファイバーをくっつけたりできるよってやつ

11. 自己紹介
•趣味など
• ClariSと緋弾のアリアが好き
• バイク
• カメラ
• 映え～
• お酒
• 着物？
このあとコンサートで~す

12. テキーラショット2杯 / 30min

13. 自己紹介
Twitter
@kakimoto_itc
Facebook
kakimotoShunya
GitHub
NNN-kakimoto

14. 専門学校入ってからしてきたこと

15. 副部長したり。。。

16. 記事になったり。。。

17. わかりにくいけど。。。

18. ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまで自己紹介
ここから作るもの紹介

19. 作るもの
•「OCAN MUTTER」
• オープンキャンパスの感想とか投稿できる
• Twitter掲示板みたいな
• mutter = つぶやき
• tweet = さえずり
• 画像投稿、いいね、RT、フォローとかはなし
• あとから気づいたけど”ocan”ってオーシャンじゃん。。。
• あたしってほんとバカ

20. とりあえず確認してみよう！
http://ocan-mutter.herokuapp.com/

21. 色とか
←このへんの色

22. ・・・
投稿するために『NEW』を押すと。。。

23. 非常にイケてない
よろしくない

24. ブラウザの別のタブに、
このNEWの先にくるページを作ってます！

25. 投稿できないので、
できるようにします！

26. ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまでサイトの紹介
ここから体験授業開始

27. 今日の方針
「やってみて難しそうなことは、
できそうな人にやってもらう」
平成も終わるので、できないことに時間をかける
→「できること」を「めちゃくちゃできること」
にする方に力を入れてみよう！
ちなみに「やってみて」ってとこが一番大事!

28. 何が言いたいかっていうと
「動かね～～～～～」って悩んだら、
周りのスタッフに聞いてね！

29. ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまで作るもの紹介
ここから今日の技術紹介

30. 使う技術
HTML / CSS 外側と見た目
HTTP通信 / 非同期通信 データの通信
Javascript, jQuery 通信するデータを操作
MySQL データベース(保存先)
PHP
プログラミング言語
※皆さんの見えないところで動いてます。

31. その他デザイン的な部分
•レスポンシブデザイン
• 携帯でもPCでも見れるよ
•マテリアルデザイン
• 今流行りの
• 詳しくはしらん
みたいなとこを意識してます

32. 今の状態
•へんじがない。ただの屍のようだ。
•というかなにもない。
•入力欄もボタンもない
•虚無

33. ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまで技術紹介
ここからプログラミング

34. このイラストがある画面は
入力してください！→

35. まずは文字を打てるようにしよう！

36. 次にボタン！

37. 見た目を整えて。。。

39. 外側完成！
ついて来れてる～～？？

40. 次は内側の動作～

41. 変数ってのを使うよ
•例えば、文字を保存するときに変数を使っ
ておくとコピペが楽だし、編集するときに
何回も書き換えなくてよくなる

42. どういうことかっていうと

43. hako1~3 に「あいうえお」って表示する
• 変数使わないとき
hako1.text('あいうえお');
hako2.text('あいうえお');
hako3.text('あいうえお');
• 変数使うとき
moji = 'あいうえお';
hako1.text( moji );
hako2.text( moji );
hako3.text( moji );

44. 'あいうえお'
を
'かきくけこ'に変える

45. 「あいうえお」→「かきくけこ」
• 変数使わないとき
hako1.text('かきくけこ');
hako2.text('かきくけこ');
hako3.text('かきくけこ');
• 変数使うとき
moji = 'かきくけこ';
hako1.text( moji );
hako2.text( moji );
hako3.text( moji );
15文字 5文字!

46. ざっくりいうと
こんな感じ

47. 変数に文字を入れて、

48. 画面に名前を表示！

49. F5 ！

50. 送信ボタンのID(名前)をつけて、
ボタンが押されたことを検知！

51. を押してから !F5 F12

52. こうなるはず

53. ボタンが押されたら内容を取得してみよう！
•やり方はさっきと似てる！
• IDをつける
• 「 $('#<<入力エリアのID>>').val() 」で入力した文字
を取得
• さっきの「 console.log('略') 」のカッコの中を書き
換えてみよう！

54. プログラム例
※違ってても動けばOK。

55. 最後にデータを送信！

56. 送信できるようになった？

57. 確認してみよう！

58. (たぶん)できたということで。。。

59. ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまでプログラミング
ここからもプログラミング改造

60. ここから先は例に3つ紹介します！
•見た目をさらにリッチにする
•動作をさらにリッチにする
•トリッキーな動きを盛り込む

61. 見た目をさらにリッチにする
•CSSをカスタマイズしていく例
• 文字とか背景色を変えてみる
• 入力中の枠をアピールしてみる
• 送信したらロードしているみたいに見せる
などなど。
「こうしたい！」ってのがあれば相談してね

62. 動作をさらにリッチにする
•Javascriptをカスタマイズしていく例
• 空白だと送信できないようにする
• ○文字以上のときは送信できないようにする
• データの送信中は送信ボタンを押せなくする
などなど。
だいたい何でもできます

63. ん？今なんでもって

64. トリッキーな動きを盛り込む
•基本的にはJavascriptをさらにカスタマイズし
ていく
• 不適切なワードの置き換え
• 『HAL』 → 『H＊L』
• 語尾に「ンゴ」「ざます」「僕はキメ顔でそう言っ
た」をランダムでつける
• 「オーキャン参加なうンゴ」
• 「なんか変なのついてるwwww僕はキメ顔でそう言った」
みたいな。
ちなみに言うほど物語シリーズ知らな

65. というわけで、
皆さん好きなようにカスタマイズどうぞ

66. 終了5分前を目処に回収します
•みなさんが携帯などからアクセスできるよ
うにします。
•サイト自体は予告せず終了するかもしれま
せん。ご了承ください。
•「DEMO」のページからこの体験の感想と
か書き込んでくれると喜びます。

67. 以下は参考までに、
さっきの例をやってみたプログラムです
できれば丸コピじゃなくて、
オリジナルに改造してみてね。

68. 一例として : 不適切なワードの置き換え
•javascriptは 「content.replace('変換前','変換
後')」で置き換えができる

69. まとめ

70. まとめ1
•たぶん何書いてるかあんまりわかんない
•でもみんなそう
•俺たちはフィーリングでプログラムを書い
ている
•なにか自分で作りたいものを作ってみれば、
わからなかったところがなんとなくわかっ
てきたり。。。

71. まとめ2
•だいたい誰かが難しいことはやってくれて
る
•わからないときは素直に力を借りよう
•少しずつ独力でできるところを増やすのが
理想的
•俺は今からライブだ

72. 【重要なお知らせ】

73. ITCreateClub
http://itc.moe

74. 質疑応答をもって終了です
おつかれさまでした。

75. 質疑応答とか出ない気がするので。。。

76. Q. プログラミング言語は何がおすすめですか？
A.
人による。
でもゼロから始めるなら
JavaScript, PHP, Ruby とかおすすめ。

77. Q. 自分のパソコンってあったほうがいいですか？
A.
「あったほうがいい」
ではなく、
「必要」 と考えます。
学校の教室でしか勉強しない人と、
家でも行き帰りの電車の中でも勉強する人な
ら、どっちのほうが時間を有効に使える？