Hands on learning

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('あいうえお');
• 変数使うとき
moji = 'あいうえお';
hako1.text( moji );
hako2.text( moji );
hako3.text( moji );

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

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

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

変数に文字を入れて、

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

ボタンが押されたら内容を取得してみよう！
•やり方はさっきと似てる！
• 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

More Related Content

What's hot (18)

Similar to Hands on learning (20)

More from NNN kakimoto (9)

Recently uploaded (20)

Hands on learning