ITサービス公開体験
講師役 : 柿元俊也
3/17 STEP UP FESTA 2018 ~Execution~
はじめに
•今日は参加していただき
ありがとうございます!
•今回のスライドは、手元の画面でも見れます!
•Slideshareというサービスに感謝!
体験のスケジュール
• 自己紹介 ( 5min )
• 今日のテーマ・作るもの ( 5min )
• 今日使う技術・予備知識 ( 5min )
• プログラミング ( 20min )
• 各自で改造☆タイム ( 10min )
• 質疑応答・まとめ ( 残り時間で )
ちなみに
今日は僕の顔入り写真NGです!
体験内容などはどんどん取ってもらってOK!
僕の自己紹介。。。
の前に!
スタッフの自己紹介
•名前
•学年
•最近使ってる技術( 言語, 環境とか )
•一人10秒!!
自己紹介
•柿元 俊也 (かきもと しゅんや)
•20歳
•総合情報メディア学科 (4年制)
•ネットワークセキュリティ専攻
•2年
自己紹介
•奈良朱雀高校卒業
• なんと偏差値44!
• 四捨五入したらゼロ!
自己紹介
•資格とか
• 基本情報技術者
• ITパスポート
• 3級陸上特殊無線技士
• 高高度や専用の周波数を使うドローンが飛ばせる、らしい(詳しく知らな
い)
• 普通自動車/普通自動二輪車運転免許
• 小型車両系建設機械の操作に係る講習 修了
• 3tまでのショベルカーを業務で操作できます
• 3級情報配線施工技能士
• 光ファイバーをくっつけたりできるよってやつ
自己紹介
•趣味など
• ClariSと緋弾のアリアが好き
• バイク
• カメラ
• 映え~
• お酒
• 着物?
このあとコンサートで~す
テキーラショット2杯 / 30min
自己紹介
Twitter
@kakimoto_itc
Facebook
kakimotoShunya
GitHub
NNN-kakimoto
専門学校入ってからしてきたこと
副部長したり。。。
記事になったり。。。
わかりにくいけど。。。
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまで自己紹介
ここから作るもの紹介
作るもの
•「OCAN MUTTER」
• オープンキャンパスの感想とか投稿できる
• Twitter掲示板みたいな
• mutter = つぶやき
• tweet = さえずり
• 画像投稿、いいね、RT、フォローとかはなし
• あとから気づいたけど”ocan”ってオーシャンじゃん。。。
• あたしってほんとバカ
とりあえず確認してみよう!
http://ocan-mutter.herokuapp.com/
色とか
←このへんの色
・・・
投稿するために『NEW』を押すと。。。
非常にイケてない
よろしくない
ブラウザの別のタブに、
このNEWの先にくるページを作ってます!
投稿できないので、
できるようにします!
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまでサイトの紹介
ここから体験授業開始
今日の方針
「やってみて難しそうなことは、
できそうな人にやってもらう」
平成も終わるので、できないことに時間をかける
→「できること」を「めちゃくちゃできること」
にする方に力を入れてみよう!
ちなみに「やってみて」ってとこが一番大事!
何が言いたいかっていうと
「動かね~~~~~」って悩んだら、
周りのスタッフに聞いてね!
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまで作るもの紹介
ここから今日の技術紹介
使う技術
HTML / CSS 外側と見た目
HTTP通信 / 非同期通信 データの通信
Javascript, jQuery 通信するデータを操作
MySQL データベース(保存先)
PHP
プログラミング言語
※皆さんの見えないところで動いてます。
その他デザイン的な部分
•レスポンシブデザイン
• 携帯でもPCでも見れるよ
•マテリアルデザイン
• 今流行りの
• 詳しくはしらん
みたいなとこを意識してます
今の状態
•へんじがない。ただの屍のようだ。
•というかなにもない。
•入力欄もボタンもない
•虚無
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまで技術紹介
ここからプログラミング
このイラストがある画面は
入力してください!→
まずは文字を打てるようにしよう!
次にボタン!
見た目を整えて。。。
外側完成!
ついて来れてる~~??
次は内側の動作~
変数ってのを使うよ
•例えば、文字を保存するときに変数を使っ
ておくとコピペが楽だし、編集するときに
何回も書き換えなくてよくなる
どういうことかっていうと
hako1~3 に「あいうえお」って表示する
• 変数使わないとき
hako1.text('あいうえお');
hako2.text('あいうえお');
hako3.text('あいうえお');
• 変数使うとき
moji = 'あいうえお';
hako1.text( moji );
hako2.text( moji );
hako3.text( moji );
'あいうえお'
を
'かきくけこ'に変える
「あいうえお」→「かきくけこ」
• 変数使わないとき
hako1.text('かきくけこ');
hako2.text('かきくけこ');
hako3.text('かきくけこ');
• 変数使うとき
moji = 'かきくけこ';
hako1.text( moji );
hako2.text( moji );
hako3.text( moji );
15文字 5文字!
ざっくりいうと
こんな感じ
変数に文字を入れて、
画面に名前を表示!
F5 !
送信ボタンのID(名前)をつけて、
ボタンが押されたことを検知!
を押してから !F5 F12
こうなるはず
ボタンが押されたら内容を取得してみよう!
•やり方はさっきと似てる!
• IDをつける
• 「 $('#<<入力エリアのID>>').val() 」で入力した文字
を取得
• さっきの「 console.log('略') 」のカッコの中を書き
換えてみよう!
プログラム例
※違ってても動けばOK。
最後にデータを送信!
送信できるようになった?
確認してみよう!
(たぶん)できたということで。。。
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
ここまでプログラミング
ここからもプログラミング改造
ここから先は例に3つ紹介します!
•見た目をさらにリッチにする
•動作をさらにリッチにする
•トリッキーな動きを盛り込む
見た目をさらにリッチにする
•CSSをカスタマイズしていく例
• 文字とか背景色を変えてみる
• 入力中の枠をアピールしてみる
• 送信したらロードしているみたいに見せる
などなど。
「こうしたい!」ってのがあれば相談してね
動作をさらにリッチにする
•Javascriptをカスタマイズしていく例
• 空白だと送信できないようにする
• ○文字以上のときは送信できないようにする
• データの送信中は送信ボタンを押せなくする
などなど。
だいたい何でもできます
ん?今なんでもって
トリッキーな動きを盛り込む
•基本的にはJavascriptをさらにカスタマイズし
ていく
• 不適切なワードの置き換え
• 『HAL』 → 『H*L』
• 語尾に「ンゴ」「ざます」「僕はキメ顔でそう言っ
た」をランダムでつける
• 「オーキャン参加なうンゴ」
• 「なんか変なのついてるwwww僕はキメ顔でそう言った」
みたいな。
ちなみに言うほど物語シリーズ知らな
というわけで、
皆さん好きなようにカスタマイズどうぞ
終了5分前を目処に回収します
•みなさんが携帯などからアクセスできるよ
うにします。
•サイト自体は予告せず終了するかもしれま
せん。ご了承ください。
•「DEMO」のページからこの体験の感想と
か書き込んでくれると喜びます。
以下は参考までに、
さっきの例をやってみたプログラムです
できれば丸コピじゃなくて、
オリジナルに改造してみてね。
一例として : 不適切なワードの置き換え
•javascriptは 「content.replace('変換前','変換
後')」で置き換えができる
まとめ
まとめ1
•たぶん何書いてるかあんまりわかんない
•でもみんなそう
•俺たちはフィーリングでプログラムを書い
ている
•なにか自分で作りたいものを作ってみれば、
わからなかったところがなんとなくわかっ
てきたり。。。
まとめ2
•だいたい誰かが難しいことはやってくれて
る
•わからないときは素直に力を借りよう
•少しずつ独力でできるところを増やすのが
理想的
•俺は今からライブだ
【重要なお知らせ】
ITCreateClub
http://itc.moe
質疑応答をもって終了です
おつかれさまでした。
質疑応答とか出ない気がするので。。。
Q. プログラミング言語は何がおすすめですか?
A.
人による。
でもゼロから始めるなら
JavaScript, PHP, Ruby とかおすすめ。
Q. 自分のパソコンってあったほうがいいですか?
A.
「あったほうがいい」
ではなく、
「必要」 と考えます。
学校の教室でしか勉強しない人と、
家でも行き帰りの電車の中でも勉強する人な
ら、どっちのほうが時間を有効に使える?

Hands on learning