課外活動4

今日は,作ったウェブサイトを公開します.

公開には,GitHub Pagesを利用します.

基本的なgit操作

私はこのウェブサイトでGitについて勉強しました.非常にわかりやすいので,おすすめです.

backlog.com

これの入門編を一通り読んでください.

頻繁に打つコマンドとして以下のものがあります.

  • git status
    • ワークツリーとインデックスの状態を確認する
  • git add .
    • すべてのファイルをインデックスに登録する
  • git commit -m "コミットメッセージ"
    • コミットする
  • git log
  • git push

GitHub を使う

リポジトリ作成

GitHub へログインします.

https://github.com/

リポジトリを作ります.

右上の+ボタン,New repository をクリックします.リポジトリ名を入力し,Create repository をクリックします.

f:id:Polyomino:20190126160352p:plain

リポジトリを作ることができました.

clone

緑のボタンを押してリポジトリのアドレスを確認します.このとき,Clone with SSH となっていることを確認してください.

もし,ssh という選択肢がないのであれば, Connecting to GitHub with SSH - User Documentation で確認しながら公開鍵を登録してください.

f:id:Polyomino:20190126160258p:plain

実際にクローン(ダウンロード)してきます. クローンして期待ディレクトリに移動して,以下のコマンドを打ちます.

僕の場合,このようになります.

git clone git@github.com:iPolyomino/szm.git

Git Bash もしくはPowerShellで, git clone リポジトリ としてください.

クローン完了後,ls コマンドでそのリポジトリがクローンされていることを確認することができます.

commit & push

まず,cd でクローンしてきたディレクトリに入ってください.そして,クローンしてきたディレクトszm に初日に作った hello-world.html を追加します.(コピー&ペーストでOK)

git の状態を確認します.

git status

すると,以下のような結果が帰ってきます.

On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

    hello-world.html

nothing added to commit but untracked files present (use "git add" to track)

hello-world.html がgit の追跡対象となっていないことがわかります.なので,追跡対象に追加します.

git add hello-world.html

追加でたか確認します.git status を打ってください.

On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    new file:   hello-world.html

追加できているようです.

インデクスに追加されたので,コミットの準備ができました.commit します.

git commit -m "add hello-world"

コミットできました.

git status で確認します.

On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)
nothing to commit, working tree clean

最後にリモートにpush (アップロード)します.

git push

自分のリポジトリGitHub)を確認すると,ファイルが上がっていることを確認することができます.

f:id:Polyomino:20190126170039p:plain

GitHub Pages に公開する.

GitHub を開いて,Settingsタブに移動します.

f:id:Polyomino:20190126170206p:plain

下の方にある GitHub Pages の Source を master branch にしてsaveボタンを押します.

f:id:Polyomino:20190126170352p:plain

しばらくすると,Your site is published at https://ipolyomino.github.io/szm/ というようなメッセージが出ます.

今回,hello-world.html という名前で公開しているので,このURLの最後にhello-world.html を追加します.

https://ipolyomino.github.io/szm/hello-world.html

というように,https:// <ユーザー名> .github.io/ <リポジトリ名> / <ファイル名> とすることによってアクセスすることができるようになります.

まとめ

Git コマンドを使う

GitHub はGitのホスティングサービス

GitHub Pages でウェブサイトを公開することができる.

課外活動3

動的なコンテンツ(ボタンを押したら表示される内容が変わるなど)というものを見たことがあると思います.

これは多くの場合,JavaScriptによって実装されています.

JavaScript

よく間違えられるのですが,JavaとJavaScirpt は別物でインドとインドネシアぐらい違うので,情報を集めるときには注意が必要です.

JavaScriptscript タグで囲われた場所に書くことができます. 初日の例に書き加えます.

<!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>
    <script>
     alert("これがJavaScriptです");
    </script>
  </body>
</html>

f:id:Polyomino:20190125172918p:plain

for文やif文などの基本構文はc言語Javaと似ています.

なので,JavaScript 特有の書き方を紹介します.

定数

定数の宣言は,const と書きます.

const hello = "こんにちは";

変数

変数の宣言は,let と書きます.

let hello = "こんにちは";
hello = "여보세요"

const とは違い,再代入が可能です.

古いレファレンスなどで,var という変数宣言が用いられている場合がありますが,スコープが直感的などバグの原因となりやすいので使うのを控えましょう.

関数

JavaScriptには複数の関数の書き方があります.

const hello = () => {
    console.log("Hello World");
};
function hello() {
    console.log("Hello world");
}
const hello = function() {
    console.log("Hello world");
}

どれも,helloという関数を作ることができ,hello() で実行することができます.

現在の主流は,一番上の書き方なので抑えておきましょう.

developer.mozilla.org

比較演算子

JavaScript の比較演算子は少し特殊です. 以下の例を見てください.

'1'  ==  1         // true
1    == '1'        // true
0    == false      // true

左右で型が違った場合,自動で型を変換して比較を行うので,すべてtrueになります.なので,===を使います.

'1'  ===  1         // false
1    === '1'        // false
0    === false      // false

その他の構文

if 文や for 文はおおよそ他の言語と同じです. 出てきたタイミングで確認すればすぐにわかります.

DevTools

昨日 css の確認をするときに用いたDevToolsですが,JavaScriptの動作の確認にも使うことができます.

一番上の例の alert("これがJavaScriptです");console.log("これがJavaScriptです"); に書き換えてみてください. そして DevTools を Console タブに切り替えると,以下のようになります.

console.log

consoleには,エラーやデバッグのメッセージを出すことに使うことができます.

余力があれば,ブレークポイントなどの使い方も勉強すると良いと思います. developers.google.com

fizzbuzz

プログラミングの練習問題としてfizzbuzzというものがあります.

プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字を発言していく。ただし、3で割り切れる場合は「Fizz」、5で割り切れる場合は「Buzz」、両者で割り切れる場合(すなわち15で割り切れる場合)は「Fizz Buzz」を数の代わりに発言しなければならない。発言を間違えた者や、ためらった者は脱落となる。Fizz Buzz - Wikipedia

すなわち,

  • 3の倍数のときは Fizz
  • 5の倍数のときはBuzz
  • 15の倍数のときは FizzBuzz

と出力するという問題です.JavaScriptFizzBuzzを書くとこのようになります.

for (let i = 1; i <= 30; i++) {
  if (i % 5 === 0 && i % 3 === 0) {
    console.log("FizzBuzz");
  } else if (i % 5 === 0) {
    console.log("Fizz");
  } else if (i % 3 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

CやJavaをしていれば,容易に理解することができると思います.

まとめ

ブラウザで動く言語はJavaではなくJavaScript

DevToolsのコンソールで確認.

基本的構文

  • 定数(const)
  • 変数(let)
  • 関数(アロー関数)
  • 比較演算子(===)

課外活動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>

すると,表示される内容は以下のようになります.

css

     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のソースが表示されます.

開発者ツールの左上にある四角と矢印が重なっているアイコンをクリックします. f:id:Polyomino:20190125163015p:plain

すると,それぞれの要素の詳細を選択しながら確認することができます.

試しに,"CSSの勉強" という部分をクリックしてみてください. f:id:Polyomino:20190125163911p:plain

先程書いたCSS が DevTools右のstyle というところに表示されます.

blue という文字を redに書き換えてください."CSSの勉強"の背景が変わります.

f:id:Polyomino:20190125163455p:plain

まとめ

色やレイアウトを変更するときはCSSを書く

HTMLのタグには,class を付けることができる.

DevToolsで確認しながら作業もできる

課外活動1

この記事は,ウェブ(フロントエンド)を学ぶ時,どのように学んで行けばいいかの例の一つとして,書いていきます.

友人にウェブのちからを付けてもらう目的で書いているので,その人にパーソナライズされています.

参考

developer roadmap というものがあります.これは,どのように学んでいくかの参考になります.このroadmapは私も概ね同意なので,参考にしながら記事を書いていきます.

https://github.com/kamranahmedse/developer-roadmap

始めるにあたり

どの開発をするに当たっても必要だと思われるスキルとして,以下のものが挙げられます.

私は,ウェブプログラミングを始めた当初これらのことについて全く知りませんでした.今になって考えると,これらを知っていた方が素早く学習することができたのかもしれないです.

個人的な意見ですが,これらのスキルは開発をしていくと自然と覚えていくものであると思うので,「データ構造とアルゴリズムを深く勉強するぞ」というようにする必要は無いと思います.(もちろん,勉強しても良いと思います.)

ウェブ

ざっくりとウェブを図解するとこのようになります.

flow
ウェブにおける通信

  1. 「クライアント」が「サーバ」に対して「リクエスト」を行います.
  2. 「サーバ」は「クライアント」に対して「レスポンス」を返します.

柔らかく表現すると,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)などで開くと,以下のような画面が表示されます.

hello-world screen shot

解説

表示されるコンテンツは,body というタグの間に書きます.そして h1 は,見出しを意味します.ブラウザは,h1タグでくくられた場所を見出しと解釈して大きく表示します.

p というタグでくくられた場所があります.p は,paragraph(段落)を意味しています.複数の段落を作りたいときは,その文ごとにpタグで囲います.

a タグは,ハイパーリンクを作成するときによく用いられるタグです.href= でそのリンクの宛先を指定することができます.

他にも多くのタグがあり,MDN というウェブサイトで確認することができます.ひとまず,わからないことがあれば,<キーワード>+mdn で検索すると大体わかります.

developer.mozilla.org

まとめ

HTMLはマークをすることによってコンテンツの概要をブラウザに伝える.

困ったらMDN

TREASUREへ行ってきた話

VOYAGE GROUP

8月13日から8月31日までの三週間,VOYAGE GROUPのインターンへ参加してきました.

概要

前半は講義,後半はチームか開発となっていました.

講義内容は以下の通りです.

  • Go言語の講義
  • フロントエンドの講義
  • Web APIの講義
  • セキュリティ
    • XSS
    • SQL インジェクション
  • データベース
    • ER図
  • サーバ環境構築

その後,チーム開発

前半の講義

Go言語を用いて,サーバ側で行われている処理を勉強しました.テストを書く人と実際のコードを書く人に分かれてペアプログラミングをしました.私は,今まで一人でコードを書くことが多く,考える時間が多くかかるということが多々ありました.しかし,ペアプログラミングをしてみると,話すことによって考えが整理され,自然と手が動くという感覚になりました.今後も機会があればペアプログラミングをしてみたいです.

セキュリティの講義では,適切な処理が行われていない場合,SQLインジェクションXSSといった脆弱性を生み出してしまうので,注意が必要であることを体験しながら学習をしました.実際に脆弱なウェブアプリケーションをローカルで動かしながら,攻撃し,その脆弱性を防いでいくという講義で,なかなかおもしろかったです.

データベースの講義はとても良かったです.ER図を作成する際の手順として,

  1. エンティティ抽出
  2. 属性洗い出し
  3. どんなデータを保持するか洗い出し
  4. 正規化
  5. リレーションシップを張る
  6. 主キーと外部キー制約を定義する

という手順を紹介されていました.この手順に従って考えていくことによって,スムーズにデータベースの設計ができることを実感しました.

前半の講義を通して,新しく学ぶことばかりでとても成長できたと感じました.

後半のチーム開発

このTREASUREのテーマは,「Go言語を使って学ぶ、価値のあるもの創りとチーム開発」です.前半で学習したことを用いて,価値のあるもの創りをしました.

価値のあるものとは?

価値のあるものを考えるときに参考となるのが USN という考え方です.

  • U は User で,そのプロダクトをどのような人が使うのか
  • N は Needs で,そのプロダクトを利用することによって,どのような需要を満たすことができるのか
  • S は Solution で,どのような手法で,UserのNeedsを満たすのか

というものです. この3つが揃っていなければ,サービスとして成り立たず,価値のあるものということはできません.

私達のチームは,「インターンの参加者/社員旅行のメンバー」が「楽しみたい,わいわいしたい」という課題の解決方法として,「お題に沿って写真を投稿するライブフォトアプリ」というものを考えました.

実際の開発

プラットフォームはiOSを選定しました.Webアプリケーションとして実装するという選択肢もあったのですが,対象としているユーザ層は,共有をする際ネイティブアプリを使うという意見や,投稿の際わざわざブラウザを立ち上げてサイトにアクセスするという手間のかかることをしないという意見があり,ネイティブアプリでの実装となりました.

チームは5人で,クライアント側2人,サーバ側2人,マネジメント1人といった構成でした.

私はクライアント側の担当で Swift をゴリゴリ書いていました.しかし,最近やっていない,PCが貧弱かつ 今までとは違う書き方(Storyboardを使わない)となると開発速度がかなり落ちました.そのため,予想していたよりも長い時間がかかりました.サーバ側の方々は優秀で,クライアント側の実装待ちのような状況になっていました.非常に申し訳なかった.

マネジメントの人は,主にモック作成とクライアント側とサーバ側の連携を行うための調整を行っていました.この人がいたおかげで,私のチームは順調に開発することができたと思います. (私達のチーム以外,会社に泊まっていたような気が…)

TREASURE の感想

圧倒的に成長することができたインターンだと感じます.前半の講義はもちろん,後半のチーム開発では,どのようなことを考えて一緒にものを作っていくのか,どのようにするとより良いものができるのかということを学びました.

コンフォートゾーンの外側へ行くことができたと思います.

デザイン?よく分からんよな.僕もよく分からん.

はじめに

"デザイン"という言葉の意味を確認します.

デザイン【design】
① 下絵。素描。図案。
② 意匠計画。製品の材質・機能および美的造形性などの諸要素と、技術・生産・消費面からの各種の要求を検討・調整する総合的造形計画。
広辞苑 第六版』(岩波書店)より.

ここで注意しなければいけないのは,"デザイン" という単語は,装飾 を意味しているのではなく 設計 を意味してる という点です.良いデザインは,良い装飾という意味ではなく,良い設計という意味です.もちろん,装飾も設計の一部に含まれると思います.

なぜデザインを考えるのか

私達は普段の生活において,「伝える」という行動を頻繁に行っています.例えば,「ハンバーガーが美味しかった.」という情報を Twitter に投稿する.研究成果のプレゼンテーションを行う.プルリクエストに対してレビューを送る. これらはすべて,「伝える」という行動です.

物事を伝えるとき, 伝える人と受け取る人がいて成立します. 伝えるときに,全く違った情報が混ざっていたり,適切な表現がされていなければどうでしょうか? 全く伝わってきません.

すなわち "デザイン" を考えることは,「伝え方」を考えるということ です.

どのようなデザインが良いのか

良いデザインの多くに共通する基本原則として,

があります.

反復

特徴を繰り返すことによって,全体の統一感を作り上げることができるという法則です.

並列性のある要素に対して,繰り返しが行われているとスムーズに情報を得ることが可能です.

反復の原則に従わない場合

f:id:Polyomino:20180726220540j:plain

唐突に別の情報が入ってきて受け取り側が混乱してしまいます.また,フォントが全て違っているので,並列の情報として受け取っていいのかも悩みます.


反復の原則に従う場合

f:id:Polyomino:20180726220537j:plain

並列性のある情報が正しく配置されているので,スムーズに情報を受取ることができます.

整列

揃えることができる要素は,揃えて配置することによって違和感がなくなるという法則です.

少し調節するだけで,スッキリとした印象になります.

整列の原則に従わない場合

f:id:Polyomino:20180726221922j:plain

サイズがバラバラで,違和感を感じます.


整列の原則に従う場合

f:id:Polyomino:20180726220931j:plain

わかりづらいので補助線を引きます.

f:id:Polyomino:20180726220934j:plain

全体的にすっきりと収まっているので,情報の階層構造がわかりやすいです.

近接

関連の強いものを近くに配置し,関連の弱いものは遠くに配置するという原則です.

近くに配置することによって一つのまとまった情報に見えます.逆に違った情報である場合,余白を設けることによって別の情報であると直感的にわかりやすくなります.

近接の原則に従わない場合

f:id:Polyomino:20180726221045j:plain

インコの情報がバラバラに配置されているので,対応関係を確認するのに手間がかかります.


近接の原則に従う場合

f:id:Polyomino:20180726221048j:plain

情報がまとまって表示されているので,情報をまとまりとして受け取ることができます.

コントラスト

情報に強弱を付けるということです .文字のサイズや太さ,色を変えることで情報に強弱を付けることができます.

コントラストの原則に従わない場合

f:id:Polyomino:20180726221201j:plain

すべての文字が同じ大きさなので,どの情報が重要か分かりづらいです.また 文字と写真の大きさが中途半端なので,何を伝えているのかよくわかりません.


コントラストの原則に従う場合

f:id:Polyomino:20180726221216j:plain

鉄橋の写真ということがわかり,鉄橋が残っているとひと目で分かります.

まとめ

良いデザインは,

という点で調整されている場合が多いです.なので良いデザインを作ろうと考えたとき,この原則を思い出して検討することで 伝わりやすくて良いものになります.

おわりに

私は "デザイン" を「伝え方」であると表現しました.しかし,デザインは人によってそれぞれであり,"デザイン" を「マナー」としている方もいますし,"デザイン" を「ユーザーとの関係性をかたちにすること」と表現されている方もいます.
このように,"デザイン"というものの捉え方は人によってそれぞれです.一つの考え方にとらわれず,自分にあった考え方を持つことこそがデザインの本質ではないでしょうか.

『伝わるデザインの基本』を下さった yonex 氏に感謝しています.

参考文献

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

リンクスタートしたかった.

某アニメで出てくるかっこいいアレをモチーフにした画像をillustratorで作ってみた.

完成作品

f:id:Polyomino:20180513180546j:plain

まず,まわりに飛んでいる謎の長方形をつくる.

ひとつひとつ作ってもいいけど,手間がかかるのでまとめつくる.

長方形ツールで適当な大きさの長方形をつくる.

f:id:Polyomino:20180513180639p:plain

f:id:Polyomino:20180513180646p:plain

そのあと,段組み設定からこの長方形を分割する.

f:id:Polyomino:20180513180915p:plain

分割する量はお好みで.

f:id:Polyomino:20180513180920p:plain

色を塗っていく f:id:Polyomino:20180513181112p:plain f:id:Polyomino:20180513181108p:plain

いろんな色の長方形を作りたいから,ランダムに色をつくる.

右上だけ色を変える

f:id:Polyomino:20180513181254p:plain

上下にブレンドでいろんな色をつくる

f:id:Polyomino:20180513181330p:plain f:id:Polyomino:20180513181334p:plain

自分でランダムに配置してもいいけど,悩むから僕は場所を入れ替えた.

f:id:Polyomino:20180513181455p:plain f:id:Polyomino:20180513181501p:plain

かっこいいアレを作っていく

f:id:Polyomino:20180513181608p:plain

遠近図形選択ツールで,さっき作った長方形を配置していく. f:id:Polyomino:20180513181628p:plain

それっぽくなってきた. f:id:Polyomino:20180513181714p:plain

背景を整える.

f:id:Polyomino:20180513181800p:plain f:id:Polyomino:20180513181804p:plain f:id:Polyomino:20180513181809p:plain

完成 f:id:Polyomino:20180513180546j:plain