Download to read offline
Hands on learning
- 1. ITサービス公開体験 講師役 : 柿元俊也 3/17STEP UP FESTA 2018 ~Execution~
- 2.
- 3. 体験のスケジュール • 自己紹介 (5min ) • 今日のテーマ・作るもの ( 5min ) • 今日使う技術・予備知識 ( 5min ) • プログラミング ( 20min ) • 各自で改造☆タイム ( 10min ) • 質疑応答・まとめ ( 残り時間で )
- 4.
- 5.
- 6.
- 7. スタッフの自己紹介 •名前 •学年 •最近使ってる技術( 言語, 環境とか) •一人10秒!!
- 8. 自己紹介 •柿元 俊也 (かきもとしゅんや) •20歳 •総合情報メディア学科 (4年制) •ネットワークセキュリティ専攻 •2年
- 9.
- 10. 自己紹介 •資格とか • 基本情報技術者 • ITパスポート •3級陸上特殊無線技士 • 高高度や専用の周波数を使うドローンが飛ばせる、らしい(詳しく知らな い) • 普通自動車/普通自動二輪車運転免許 • 小型車両系建設機械の操作に係る講習 修了 • 3tまでのショベルカーを業務で操作できます • 3級情報配線施工技能士 • 光ファイバーをくっつけたりできるよってやつ
- 11. 自己紹介 •趣味など • ClariSと緋弾のアリアが好き • バイク •カメラ • 映え～ • お酒 • 着物？ このあとコンサートで~す
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. ↑ ↑ ↑↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ここまで自己紹介 ここから作るもの紹介
- 19. 作るもの •「OCAN MUTTER」 • オープンキャンパスの感想とか投稿できる •Twitter掲示板みたいな • mutter = つぶやき • tweet = さえずり • 画像投稿、いいね、RT、フォローとかはなし • あとから気づいたけど”ocan”ってオーシャンじゃん。。。 • あたしってほんとバカ
- 20.
- 21.
- 22.
- 23.
- 24.
- 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.
- 50.
- 51.
- 52.
- 53. ボタンが押されたら内容を取得してみよう！ •やり方はさっきと似てる！ • IDをつける • 「$('#<<入力エリアのID>>').val() 」で入力した文字 を取得 • さっきの「 console.log('略') 」のカッコの中を書き 換えてみよう！
- 54.
- 55.
- 56.
- 57.
- 58.
- 59. ↑ ↑ ↑↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ここまでプログラミング ここからもプログラミング改造
- 60.
- 61. 見た目をさらにリッチにする •CSSをカスタマイズしていく例 • 文字とか背景色を変えてみる • 入力中の枠をアピールしてみる •送信したらロードしているみたいに見せる などなど。 「こうしたい！」ってのがあれば相談してね
- 62. 動作をさらにリッチにする •Javascriptをカスタマイズしていく例 • 空白だと送信できないようにする • ○文字以上のときは送信できないようにする •データの送信中は送信ボタンを押せなくする などなど。 だいたい何でもできます
- 63.
- 64. トリッキーな動きを盛り込む •基本的にはJavascriptをさらにカスタマイズし ていく • 不適切なワードの置き換え • 『HAL』→ 『H＊L』 • 語尾に「ンゴ」「ざます」「僕はキメ顔でそう言っ た」をランダムでつける • 「オーキャン参加なうンゴ」 • 「なんか変なのついてるwwww僕はキメ顔でそう言った」 みたいな。 ちなみに言うほど物語シリーズ知らな
- 65.
- 66.
- 67.
- 68. 一例として : 不適切なワードの置き換え •javascriptは「content.replace('変換前','変換 後')」で置き換えができる
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.