課外活動2
今日は,見た目を整えます.
CSS
CSSはカスケーディングスタイルシート と呼ばれ,HTMLの見栄えを整えるために用いられます.
昨日の例に少し書き加えます.style
タグで囲われた場所には,CSSを書くことができます.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <style> h1 { background-color: green; } </style> </head> <body> <h1>HTMLの勉強</h1> <p> HTMLはHyper Text Markup Languageといってハイパーリンクと呼ばれる <a href="https://google.com/">リンク</a> を張ることができます. </p> </body> </html>
すると,表示される内容は以下のようになります.
h1 { background-color: green; }
上のCSSは,h1
という要素の背景を green
すなわち,緑色にするという意味です.
このように,css は,
セレクタ { 状態 }
というように書いていきます.
HTML における class
このようなHTMLファイルがあったとします.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello World</title> </head> <body> <h1>HTMLの勉強</h1> <p> HTMLはHyper Text Markup Languageといってハイパーリンクと呼ばれる <a href="https://google.com/">リンク</a> を張ることができます. </p> <h1>CSSの勉強</h1> <p> CSSはカスケーディングスタイルシート と呼ばれ,HTMLの見栄えを整えるために用いられます. </p> </body> </html>
"HTMLの勉強" と"CSSの勉強" において違う色を背景色としたい場合があります.
このとき,セレクタを h1
としてしまうと,どちらも同じ色になってしまいます.
そこで,h1タグにclass という属性を付けます.
付け方は <h1 class="learn-html"><h1>
というように付けます.
これで,この h1 タグに learn-html というクラス属性がつきました.
この属性に対して背景色を変えるというCSS は以下のように書きます.
.learn-html { background-color: blue; }
すなわち,それぞれに色を付けたければ,それぞれにクラスとCSSを記述することによって実現することができます.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <style> .learn-html{ background-color: green; } .learn-css { background-color: blue; } </style> </head> <body> <h1 class="learn-html">HTMLの勉強</h1> <p> HTMLはHyper Text Markup Languageといってハイパーリンクと呼ばれる <a href="https://google.com/">リンク</a> を張ることができます. </p> <h1 class="learn-css">CSSの勉強</h1> <p> CSSはカスケーディングスタイルシート と呼ばれ,HTMLの見栄えを整えるために用いられます. </p> </body> </html>
DevTools
多くのブラウザには,DevToolsという開発者向けのツールが標準搭載されています.ウェブを開発する上で,このツールは非常に有用で,CSSを変更しながら確認することができます.
chromeの場合,右クリックをして 検証(inspect) を選択します.するとhtmlのソースが表示されます.
開発者ツールの左上にある四角と矢印が重なっているアイコンをクリックします.
すると,それぞれの要素の詳細を選択しながら確認することができます.
試しに,"CSSの勉強" という部分をクリックしてみてください.
先程書いたCSS が DevTools右のstyle というところに表示されます.
blue
という文字を red
に書き換えてください."CSSの勉強"の背景が変わります.
まとめ
色やレイアウトを変更するときはCSSを書く
HTMLのタグには,class を付けることができる.
DevToolsで確認しながら作業もできる
課外活動1
この記事は,ウェブ(フロントエンド)を学ぶ時,どのように学んで行けばいいかの例の一つとして,書いていきます.
友人にウェブのちからを付けてもらう目的で書いているので,その人にパーソナライズされています.
参考
developer roadmap というものがあります.これは,どのように学んでいくかの参考になります.このroadmapは私も概ね同意なので,参考にしながら記事を書いていきます.
https://github.com/kamranahmedse/developer-roadmap
始めるにあたり
どの開発をするに当たっても必要だと思われるスキルとして,以下のものが挙げられます.
私は,ウェブプログラミングを始めた当初これらのことについて全く知りませんでした.今になって考えると,これらを知っていた方が素早く学習することができたのかもしれないです.
個人的な意見ですが,これらのスキルは開発をしていくと自然と覚えていくものであると思うので,「データ構造とアルゴリズムを深く勉強するぞ」というようにする必要は無いと思います.(もちろん,勉強しても良いと思います.)
ウェブ
ざっくりとウェブを図解するとこのようになります.
- 「クライアント」が「サーバ」に対して「リクエスト」を行います.
- 「サーバ」は「クライアント」に対して「レスポンス」を返します.
柔らかく表現すると,1 で「データをください」として,2 で,「どうぞ」というイメージです.
フロントエンド
多くのアプリケーションは「フロントエンド」と「バックエンド」という2つに分けられます.
フロントエンドはクライアント側のことで,バックエンドはサーバ側のことを指します.
フロントエンドは,ユーザの操作に対して表示する内容を変えたり,サーバとの通信を行います.これらのプログラムを書くのがフロントエンドエンジニアです.
プログラミングをはじめる
HTML
ウェブで用いられる基本的なファイルとして,HTMLというファイルがあります.これは,Hyper Text Markup Languageのことで,タグと呼ばれる記号で文字をくくる(Markup)ことによって表示されるものの種類を示します.
多くのタグは,<body></body>
というように一対一対応しているものが多いです.
エディタを開いて以下のコードを打ち込んでみてください.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello World</title> </head> <body> <h1>HTMLの勉強</h1> <p> HTMLはHyper Text Markup Languageといってハイパーリンクと呼ばれる <a href="https://google.com/">リンク</a> を張ることができます. </p> </body> </html>
これを,hello-world.html
として保存してください.
そのファイルをブラウザ(Google Chrome, Firefox, Edge, Safari)などで開くと,以下のような画面が表示されます.
解説
表示されるコンテンツは,body というタグの間に書きます.そして h1 は,見出しを意味します.ブラウザは,h1タグでくくられた場所を見出しと解釈して大きく表示します.
p というタグでくくられた場所があります.p は,paragraph(段落)を意味しています.複数の段落を作りたいときは,その文ごとにpタグで囲います.
a タグは,ハイパーリンクを作成するときによく用いられるタグです.href= でそのリンクの宛先を指定することができます.
他にも多くのタグがあり,MDN というウェブサイトで確認することができます.ひとまず,わからないことがあれば,<キーワード>+mdn で検索すると大体わかります.
まとめ
HTMLはマークをすることによってコンテンツの概要をブラウザに伝える.
困ったらMDN
TREASUREへ行ってきた話
VOYAGE GROUP
8月13日から8月31日までの三週間,VOYAGE GROUPのインターンへ参加してきました.
概要
前半は講義,後半はチームか開発となっていました.
講義内容は以下の通りです.
- Go言語の講義
- TDDについて
- ペアプログラミング
- httpについて
- フロントエンドの講義
- JavaScriptの変遷
- React
- Redux
- Web APIの講義
- セキュリティ
- データベース
- ER図
- サーバ環境構築
その後,チーム開発
前半の講義
Go言語を用いて,サーバ側で行われている処理を勉強しました.テストを書く人と実際のコードを書く人に分かれてペアプログラミングをしました.私は,今まで一人でコードを書くことが多く,考える時間が多くかかるということが多々ありました.しかし,ペアプログラミングをしてみると,話すことによって考えが整理され,自然と手が動くという感覚になりました.今後も機会があればペアプログラミングをしてみたいです.
セキュリティの講義では,適切な処理が行われていない場合,SQLインジェクションやXSSといった脆弱性を生み出してしまうので,注意が必要であることを体験しながら学習をしました.実際に脆弱なウェブアプリケーションをローカルで動かしながら,攻撃し,その脆弱性を防いでいくという講義で,なかなかおもしろかったです.
データベースの講義はとても良かったです.ER図を作成する際の手順として,
- エンティティ抽出
- 属性洗い出し
- どんなデータを保持するか洗い出し
- 正規化
- リレーションシップを張る
- 主キーと外部キー制約を定義する
という手順を紹介されていました.この手順に従って考えていくことによって,スムーズにデータベースの設計ができることを実感しました.
前半の講義を通して,新しく学ぶことばかりでとても成長できたと感じました.
後半のチーム開発
このTREASUREのテーマは,「Go言語を使って学ぶ、価値のあるもの創りとチーム開発」です.前半で学習したことを用いて,価値のあるもの創りをしました.
価値のあるものとは?
価値のあるものを考えるときに参考となるのが USN という考え方です.
- U は User で,そのプロダクトをどのような人が使うのか
- N は Needs で,そのプロダクトを利用することによって,どのような需要を満たすことができるのか
- S は Solution で,どのような手法で,UserのNeedsを満たすのか
というものです. この3つが揃っていなければ,サービスとして成り立たず,価値のあるものということはできません.
私達のチームは,「インターンの参加者/社員旅行のメンバー」が「楽しみたい,わいわいしたい」という課題の解決方法として,「お題に沿って写真を投稿するライブフォトアプリ」というものを考えました.
実際の開発
プラットフォームはiOSを選定しました.Webアプリケーションとして実装するという選択肢もあったのですが,対象としているユーザ層は,共有をする際ネイティブアプリを使うという意見や,投稿の際わざわざブラウザを立ち上げてサイトにアクセスするという手間のかかることをしないという意見があり,ネイティブアプリでの実装となりました.
チームは5人で,クライアント側2人,サーバ側2人,マネジメント1人といった構成でした.
私はクライアント側の担当で Swift をゴリゴリ書いていました.しかし,最近やっていない,PCが貧弱かつ 今までとは違う書き方(Storyboardを使わない)となると開発速度がかなり落ちました.そのため,予想していたよりも長い時間がかかりました.サーバ側の方々は優秀で,クライアント側の実装待ちのような状況になっていました.非常に申し訳なかった.
マネジメントの人は,主にモック作成とクライアント側とサーバ側の連携を行うための調整を行っていました.この人がいたおかげで,私のチームは順調に開発することができたと思います. (私達のチーム以外,会社に泊まっていたような気が…)
TREASURE の感想
圧倒的に成長することができたインターンだと感じます.前半の講義はもちろん,後半のチーム開発では,どのようなことを考えて一緒にものを作っていくのか,どのようにするとより良いものができるのかということを学びました.
コンフォートゾーンの外側へ行くことができたと思います.
デザイン?よく分からんよな.僕もよく分からん.
はじめに
"デザイン"という言葉の意味を確認します.
デザイン【design】
① 下絵。素描。図案。
② 意匠計画。製品の材質・機能および美的造形性などの諸要素と、技術・生産・消費面からの各種の要求を検討・調整する総合的造形計画。
『広辞苑 第六版』(岩波書店)より.
ここで注意しなければいけないのは,"デザイン" という単語は,装飾 を意味しているのではなく 設計 を意味してる という点です.良いデザインは,良い装飾という意味ではなく,良い設計という意味です.もちろん,装飾も設計の一部に含まれると思います.
なぜデザインを考えるのか
私達は普段の生活において,「伝える」という行動を頻繁に行っています.例えば,「ハンバーガーが美味しかった.」という情報を Twitter に投稿する.研究成果のプレゼンテーションを行う.プルリクエストに対してレビューを送る. これらはすべて,「伝える」という行動です.
物事を伝えるとき, 伝える人と受け取る人がいて成立します. 伝えるときに,全く違った情報が混ざっていたり,適切な表現がされていなければどうでしょうか? 全く伝わってきません.
すなわち "デザイン" を考えることは,「伝え方」を考えるということ です.
どのようなデザインが良いのか
良いデザインの多くに共通する基本原則として,
- 反復
- 整列
- 近接
- コントラスト
があります.
反復
特徴を繰り返すことによって,全体の統一感を作り上げることができるという法則です.
並列性のある要素に対して,繰り返しが行われているとスムーズに情報を得ることが可能です.
反復の原則に従わない場合
唐突に別の情報が入ってきて受け取り側が混乱してしまいます.また,フォントが全て違っているので,並列の情報として受け取っていいのかも悩みます.
反復の原則に従う場合
並列性のある情報が正しく配置されているので,スムーズに情報を受取ることができます.
整列
揃えることができる要素は,揃えて配置することによって違和感がなくなるという法則です.
少し調節するだけで,スッキリとした印象になります.
整列の原則に従わない場合
サイズがバラバラで,違和感を感じます.
整列の原則に従う場合
わかりづらいので補助線を引きます.
全体的にすっきりと収まっているので,情報の階層構造がわかりやすいです.
近接
関連の強いものを近くに配置し,関連の弱いものは遠くに配置するという原則です.
近くに配置することによって一つのまとまった情報に見えます.逆に違った情報である場合,余白を設けることによって別の情報であると直感的にわかりやすくなります.
近接の原則に従わない場合
インコの情報がバラバラに配置されているので,対応関係を確認するのに手間がかかります.
近接の原則に従う場合
情報がまとまって表示されているので,情報をまとまりとして受け取ることができます.
コントラスト
情報に強弱を付けるということです .文字のサイズや太さ,色を変えることで情報に強弱を付けることができます.
コントラストの原則に従わない場合
すべての文字が同じ大きさなので,どの情報が重要か分かりづらいです.また 文字と写真の大きさが中途半端なので,何を伝えているのかよくわかりません.
コントラストの原則に従う場合
鉄橋の写真ということがわかり,鉄橋が残っているとひと目で分かります.
まとめ
良いデザインは,
- 反復
- 整列
- 近接
- コントラスト
という点で調整されている場合が多いです.なので良いデザインを作ろうと考えたとき,この原則を思い出して検討することで 伝わりやすくて良いものになります.
おわりに
私は "デザイン" を「伝え方」であると表現しました.しかし,デザインは人によってそれぞれであり,"デザイン" を「マナー」としている方もいますし,"デザイン" を「ユーザーとの関係性をかたちにすること」と表現されている方もいます.
このように,"デザイン"というものの捉え方は人によってそれぞれです.一つの考え方にとらわれず,自分にあった考え方を持つことこそがデザインの本質ではないでしょうか.
『伝わるデザインの基本』を下さった yonex 氏に感謝しています.
参考文献
伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール
- 作者: 高橋佑磨,片山なつ
- 出版社/メーカー: 技術評論社
- 発売日: 2016/08/05
- メディア: 大型本
- この商品を含むブログ (3件) を見る
- 作者: Robin Williams,小原司,米谷テツヤ,吉川典秀
- 出版社/メーカー: マイナビ出版
- 発売日: 2016/06/30
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る
リンクスタートしたかった.
某アニメで出てくるかっこいいアレをモチーフにした画像をillustratorで作ってみた.
完成作品
まず,まわりに飛んでいる謎の長方形をつくる.
ひとつひとつ作ってもいいけど,手間がかかるのでまとめつくる.
長方形ツールで適当な大きさの長方形をつくる.
そのあと,段組み設定からこの長方形を分割する.
分割する量はお好みで.
色を塗っていく
いろんな色の長方形を作りたいから,ランダムに色をつくる.
右上だけ色を変える
上下にブレンドでいろんな色をつくる
自分でランダムに配置してもいいけど,悩むから僕は場所を入れ替えた.
かっこいいアレを作っていく
遠近図形選択ツールで,さっき作った長方形を配置していく.
それっぽくなってきた.
背景を整える.
完成
インターンシップへ行って学んだこと(2回目)
2月5日から2月16日まで,Yahoo! JAPAN でインターンしてきました.
Yahoo! JAPAN は,グランフロントに大阪オフィスがあり,私はここへ毎日通っていました.(土日,祝日は休みです.)
インターンの概要
インターン参加人数は7人で,それぞれが別々のチームに配属される形で実施されていました.
僕は,Yahoo!天気・災害の災害チームに配属されました.そこで,iOSアプリケーション改修のお手伝いをしました.
実際に使われているアプリのソースコードをさわるという貴重な体験ができたことは,とても良かったです.
インターンの詳細
インターンのある一日
- 10:00 出社
- 10:15 チーム内ミーティング
- 10:30 開発
- 12:00 お昼休み
- 13:00 再び開発
- 15:00 社内勉強会
- 16:00 プロジェクト内ミーティング
- 17:00 開発
- 18:00 1 on 1
- 18:30 終業作業
- 18:45 退社
チーム内ミーティング
基本的にチームの全員が参加されていました.ここで,各プロジェクトの進捗共有などされていました.チームのプロジェクトが今どのような状況にあるのかを把握することができ,また 連携が必要な部分の調整などについてもここで話し合われていました.
【補足】
「チーム」は ”防災” や "天気" のような分類で,「プロジェクト」は "アプリ",”バックエンド” などの分類です. 今回私は,防災チームのアプリプロジェクトメンバーでした.
社内勉強会
社内向けに勉強会が開かれていました.開発に携わる多くの人が来るものや,iOSの開発者が集まる勉強会など様々でした.
プロジェクト内ミーティング
アプリ開発に携わる人でミーティングでした.アプリのUI等についてAndroidとiOSの人で話し合ったり,デザイナーさんと意見を交換したりしました.
1 on 1
インターンでこの言葉を初めて聞きました. 検索すると出てきますが,「上司と部下が対話する」感じです. 普通に開発やミーティングをしていると,なかなか思っていることを言い出すことができないかもしれませんが,ここでいろいろと相談することもできます.
本が出ているようです. http://amzn.asia/8YMHblv
ミーティングや勉強会は 日によって様々で,あまり開発する時間を取れない日もありました.その一方で,丸一日開発という日もありました.
インターンで学んだこと
他人のコードを読む
最近は,多くのOSSがあります.それらのコードを読んでみると,自分たちが知らないところ(知らなかったところ)でどのような処理をしているのかを理解することができます.その裏側を知っていることによって,自分の書くコードをいい感じにすることができます.また,多くのすごい人たちが作りあげているので,単純に勉強にもなります.
勉強し続ける
前提として,コードを書くことだけが勉強ではありません.本を読んだり,映画を見たり(SFとか?),発表したり,他人のコードを読むことも勉強です.プログラムなどの技術には,移り変わりがあります.なので,「【任意の言語】を勉強しておけば大丈夫」や,「【任意のシステム】だけで生きていく」などはリスクがあります.その時代に合わせて,自分を変化させていく必要があります.勉強を続けることで,変化にも対応することができます.
勉強するモチベーション維持の方法
- いろいろなことに興味を持つ
- 興味のある分野を増やすことによって,「疲れてきたから別の興味があるものを勉強しよう」という技が使えるようになります.
- 勉強会に参加する
- 勉強会へ参加することによって,情報交換ができます.また,同じ分野の仲間とも出会うことができます.
- 根性
いろんな人の意見を聞く
これは,デザイナーさんから聞いた話です.自分が良さそうと思ってデザインしたものでも,他の人がもっといいデザインのものを思いつく可能性があります.
いろんなことをする
新しい分野を勉強するとき,0から始めることはとても苦労します.少しでも,勉強した経験があれば,新しく勉強を始めることが簡単になります.
学生の間は,自由に勉強することができます.「業務で使うから,絶対に~をしなければならない」という強制などはありません.自分の好きなときに,自分の好きなことができます.できる間にいろんな好きなことをしておきましょう.
今回のインターンでは,実際のエンジニアに近い経験ができました.このようなインターンを用意してくださった Yahoo! JAPAN の皆様ありがとうございます.
インターンへ参加することによって,実際の社会ではどのような手法で開発されているのか.何を考えてサービスが作られているのかを知ることができました.
ぜひ皆さんもインターンへ参加してみてください.
傲慢な大学生がインターンシップへ行くことになった話(2回目)
某社に2週間インターンへ行くことになりました.
今回の企業は,大企業です. たぶん,誰もが1度名前を聞いたことがある企業です.
インターンへ参加し,技術やエンジニアとしてどうあるべきかを学んできたいです. また,ベンチャー企業との違いを知り今後のエンジニアライフに役立てたいです.
これだけでは少し物足りないので,選考のときのことを書きます.
私の申し込んだインターンの申し込み期限は,12月中旬でした.春休みに実施されるインターンの選考は,主にこの時期にあると考えても良さそうです.12月末のところもいくつかありました.
申し込み用紙には,以下の質問がありました.
- 言語やOSの経験,期間
- 研究内容の詳細,自信のある開発経験
- 手がけたプログラムで自信のあるもの
自信のある開発経験と自信のあるプログラムって似てる気がする...
私の回答はこんな感じです.
言語やOSの経験
JavaScript 3年
プロジェクションマッピングにおいて,Node.jsでWebSocketサーバ構築.
Node.jsを用いてArduinoの制御
ブラウザ拡張機能の制作
Swift 3年
プロジェクションマッピングにおいてSpriteKitを用いたインタラクティブ映像の作成.
生放送サービスにアスキーアートを投稿するiPhoneアプリケーションの作成
Python 2年
(アルバイト関係)
C言語 2年
基本的な動作の理解,
Java 1年
基本構文やJavaアプレットで簡単なアプリケーションの作成.
初歩的な内容を高校で教える.
期間だけ見れば詐欺ですね.
私の場合,日替わりで言語を勉強したり,行き詰ったらしばらく別の開発をするというスタイルなので 期間は長くなっています.(別の開発している期間全く考えてないわけではないので,大目に見て 🙏)
CentOS 7
個人制作物紹介ウェブサイトの作成.
それぞれに対して具体的に何をやったのかを書くと選ぶ側もわかりやすいと思います. また,そのソースコードをGitHub などに上げておくとより効果的だと思います.
研究内容の詳細,自信のある開発経験
この質問は 主に大学院生など研究室に配属されている人に向けられている質問ですね.私は,2年生なのでまだ配属されていません.なので,自信のある開発経験を書きました.
私は,Webの技術に興味を持っています.なので,自分のウェブサイト( https://polyomino.jp
)を作ったときの話を書きました.まずこの技術に興味を持ったきっかけを書いた後,自分がどのようにして学んできたかを書きました.最後に 今していることを書くと字数制限ちょうどぐらいでした.
順を追って書いていくと,かなり書きやすかったです.(おそらく,読む人も読みやすい)
余談ですが,ずっと前に読んで良いと思った本です.
- 作者: 結城浩
- 出版社/メーカー: 筑摩書房
- 発売日: 2013/04/11
- メディア: 文庫
- この商品を含むブログ (32件) を見る
自信のある開発経験
上の質問とほぼ同じでしたが,同じことを書いてしまうと読む人もつまらないだろうと考え,別の開発経験について書きました.
「プロジェクションマッピング」を実施したときの話を書きました.(WebVRを利用したアプリケーション開発なので,広い目で見ると "Web" ですけどね.)
利用した技術と苦労したところ,もし今後するとしたとき改善できるところなどを書きました.
あと,GitHubや個人制作物のリンク,ブログがあれば載せる場所があったので,そのフォームを埋めて提出しました.
締め切りから数日後,書類選考通過の連絡がきました.テストの受験依頼と履歴書の提出,web面接の日程調整でした.
私はこの連絡が来た日に面接日の予約とテスト受験をしました.忘れるといけないので.
「テスト」とあったので,AtCoderのようなものを想定していましたが,実際は違いました.
いわゆる SPI (?) と呼ばれるもので,迫りくる時間がかなりのプレッシャーになりました.もし,インターンへ参加するときテストがあれば,このような形式のテストも存在するということを覚えておくといいかもしれません.
https://www.benesse-i-career.co.jp/univ/assessment/pdf/gps_academic.pdf
さて 面接ですが,特に問題なく終えることができました.エントリーシートを書く時点で,自分のしてきたことや興味があること,やりたいことなどをまとめているので,詳細を付け加えながら話すだけでした.この直前に準備などはマイクのテストぐらいでほとんどしていません.強いて言うなら,一つだけ質問を用意しておきました.これは,もしお祈りされたとしても,「現場の人から聞くことができた」と自分を落ち着かせるためです.いわば自己満足ですね.
こうして 数日後参加許可のメールが届き,2月5日からインターンへ参加することになりました.
精進します.