Debianインストールバトル！！

GNU/Linux

Free Software というものをご存知ですか？

「Free Software(自由ソフトウェア)」は利用者の自由とコミュニティを尊重するソフトウェアを意味します．

ソフトウェアは 実行する自由，改変する自由，コピーする自由，再配布する自由があるべきだという思想です． この思想を大切にしている OS として，Debian があります．

https://www.gnu.org/philosophy/free-sw.html

Windows や macOS は Free Software ではありません．

利用規約などあまり読まない人がいるかもしれませんが，実際読んでみると多くの制約が書かれています．

windows のライセンスは典型的です．

c.制限。製造業者またはインストール業者、およびマイクロソフトは、本ライセンス条項において明示的に許諾されていない権利 (知的財産に関する法律に基づく権利など) をすべて留保します。たとえば、このライセンスは、次の行為に関してお客様にいかなる権利も与えるものではなく、お客様は次の行為を行うことはできません。 (i) 本ソフトウェアの機能を分離して使用または仮想化すること。 (ii) 本ソフトウェアを公開、複製 (許可されているバックアップ用の複製を除きます)、レンタル、リース、または貸与すること。 (iii) 本ソフトウェアを譲渡すること (本ライセンス条項で許諾されている場合を除きます)。

https://www.microsoft.com/en-us/Useterms/Retail/Windows/10/UseTerms_Retail_Windows_10_japanese.htm より

このように，たとえOS購入したとしても貸与や譲渡に制限があります．

macOS のライセンスにも制約があります

  1. リバースエンジニアリングの禁止 お客様は、Appleソフトウェアおよびこれにより提供されるサービスの全部または一部に対し、複製（本契約またはお客様に適用される利用ルールで明示的に許可される場合を除きます）、逆コンパイル、リバースエンジニアリング、逆アセンブル、ソースコード解明の試み、暗号化、修正または二次的著作物の創作を行うことはできないものとし、これらの行為を行わないことおよび他者がこれらの行為を行なうことを可能ならしめないことに同意されたものとします（ただし、上記の制限が適用法により禁止される場合、またはAppleソフトウェアに含まれるオープンソースコンポーネントの使用に適用されるライセンス条件を除くものとします）。

https://www.apple.com/legal/sla/docs/macOS1014.pdf より

少しカスタマイズしたいという場合でも，Apple のソフトウェアは修正や二次的著作物の創作が禁止されています．どのように振る舞っているのか知りたいとしても，ソースコードの解明に当たるのでNGです．

このような制約は，ソフトウェアが持っている簡単にコピーできる / 改変できる / 共有できるという利点を活かせていないと捉えることができます．

Debian のインストールを通して Free Software という考え方もあるということを知っていただければ幸いです．

ISO をダウンロードする

ドライバなどをあとからインストールするのは大変なので non-free 版を使います．

Free Software を語ったあとに non-free 版を使うのかと怒られるかもしれませんが，ごめんなさい．許してください． ネットワークのドライバは non-free です．通常版をインストールすると，インターネットに接続できないことになるので仕方ありません．

isoファイルをダウンロードします．

https://cdimage.debian.org/cdimage/unofficial/non-free/cd-including-firmware/9.8.0+nonfree/amd64/iso-dvd/

ダウンロードしたものが正しいものなのか確認

md5

md5sum Downloads/firmware-9.8.0-amd64-DVD-1.iso

出てきたチェックサムが，ダウンロードしたページのものと一致することを確認します．

boot USB を作成する

USB の情報を確認する

sudo fdisk -l で確認します

Disk /dev/nvme0n1: 238.5 GiB, 256060514304 bytes, 500118192 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0xbf2939e0

Device         Boot     Start       End   Sectors  Size Id Type
/dev/nvme0n1p1           2048 484306943 484304896  231G 83 Linux
/dev/nvme0n1p2      484308990 500117503  15808514  7.6G  5 Extended
/dev/nvme0n1p5      484308992 500117503  15808512  7.6G 82 Linux swap / Solaris


Disk /dev/sdb: 7.4 GiB, 7918845952 bytes, 15466496 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0x49ab43da

Device     Boot Start     End Sectors  Size Id Type
/dev/sdb1  *        0 7143423 7143424  3.4G  0 Empty
/dev/sdb2       21488   22319     832  416K ef EFI (FAT-12/16/32)

USB が /dev/sdb1 として刺さっていることがわかります．

なので /dev/sdb1 に対して アンマウント，フォーマット，書き込みを行います．

ご自身の環境に合わせて /dev/sdb1 の部分を変更してください．

アンマウントする

sudo umount /dev/sdb1

フォーマットする

sudo mkfs.vfat /dev/sdb1

書き込む

sudo dd if=/home/hagi/Downloads/debian.iso of=/dev/sdb1 bs=1048576

/home/hagi/Downloads/debian.iso とあるのは，私の計算機でのダウンロードしたisoファイルのパスです． ご自身の環境に合わせて変更してください．

これでboot USBの作成が完了しました．

Debian のインストール

BIOS の設定:

thinkpad の場合，起動時に enter キーを押すとBIOSの設定画面に入ることができます．

中古で買ったPCの場合など，他人が使ったものである場合，余計な設定になっている可能性があるのでBIOS の設定をリセットします．

Secure Bootを無効化

Security > Secure Boot で Enter キーを押すと，Secure Boot を無効化することができます．

ブートモードの変更

Startup > UEFI / Legacy Boot において，ブートの方法を Legacy Only に設定します．

ブート順の変更

Startup > Boot でEnter キーを押すと，ブートの順を変更することができます．

以上でBIOS の設定は終わりです． 保存して終了してください．

インストール開始

Debian GNU/Linux Installer boot menu

Install を指定します．

Select a language

English を指定します．

Select your location

other から Asia ，そして Japan を選択します．

Config locales

United States

Configure the keyboard

ご自身のキーボード配列を選択してください．

American English

Detect network hardware

Load missing firmware from removable media? Yes

Configure the network

wlp4s0: Intel Corporation Wireless 8260

  1. 自分の Wi-Fi のSSIDを選択する
  2. 自分の Wireless network type を選択する
  3. 自分の Wi-Fi のパスワードを入力する

Configure the network

ホスト名：計算機本体の名前です． 好きな名前を設定してください．私のボスは，”愛することができる名前” に設定するよう，アドバイスしてくださいました．

Set up users and passwords

Root password:

root ユーザのパスワードです．確認のために2回入力します． パスワードを確認するときは，チェックボックスにカーソルがある状態でスペースキーを押します．

Full name for the new user: ユーザの名前です．あまり使う機会が無いので深く考えなくていいです．

Username for your accout: ログインするときに用いるユーザ名です．あとで使うので忘れないでください．

Partition disks

デュアルブートしないので，ディスク全体を使います． - Guided - use entire disk

インストールするディスクを選択します．自分の計算機のSSD/HDDを選択してください． - SCSI2 256GB ATA SAMSUNG

自分で調整するのは面倒なのでおすすめの設定を利用します． - All files in one partition (recommended for new users) - Finish partitioning and write changes to disk

最後の確認です．もともと入っていたデータが消えるので，少しでも不安なら中止してください． Yesを選択すると次に進みます． - Write the changes to disk? -> Yes

Configure the package manager

Japan

どこでもいいのでミラーサーバを選択します．

プロキシなどの設定が必要な場合はプロキシのURLを書きます．

Configure popularity-contest

No

Software selection

Debian desktop Environment のチェックを外す．

これが重要です．ここで失敗するともう一度入れ直しです．

チェックを外すときはスペースキーです．

お好みで以下のチェックを入れてもいいです．

  • print server
  • SSH server
  • standard system utilities

Install the GRUB boot loader on a hard disk

ブートローダーをインストールするので，Yesを選択 Yes /dev/sda を選択

Finish the installation

USB を抜いて Continue

完了すると，PCが再起動します．

基本的な環境設定

ログイン

各種設定をするために root でログインします．

username と表示されているところで root と入力します． パスワードは先程設定したroot ユーザのパスワードです． パスワード入力時，表示はされませんが入力がされているので気にせず入力してください．

インターネット接続

wpa_supplicant の設定ファイルを書きます．

/etc/wpa_supplicant/wpa_supplicant.conf というファイルを作成して，以下の内容を書き込みます．

ファイルの作成は以下のコマンドで出来ます．

touch /etc/wpa_supplicant/wpa_supplicant.conf

次に編集です．

デフォルトのエディタとして，vi もしくは nano があります．

どちらも使ったことが無いという人は nano をおすすめします．

nano で今回のファイルを編集する場合，nano /etc/wpa_supplicant/wpa_supplicant.conf として nano を起動します．

network = {
    ssid="ここに SSID(Wi-Fi の名前)を書く"
    psk="ここに Wi-Fi のパスワードを書く"
}

書き終えたら保存して終了します．

nano で保存して終了するには，Ctrl キー を押しながら x キー です．すると，保存するかの確認が出るので y キー ．最後にファイル名が出るので Enter キー を押すと保存して終了されます．

ネットワークインターフェースの名前を確認します．

# iwconfig
wlp2s0    IEEE 802.11  ESSID:off/any  
          Mode:Managed  Access Point: Not-Associated   Tx-Power=22 dBm   
          Retry short limit:7   RTS thr:off   Fragment thr:off
          Encryption key:off
          Power Management:on
          
lo        no wireless extensions.
enp0s31f6 no wireless extensions.

wlp2s0 が自分の計算機のインターフェース名とわかりました．

/etc/network/interfaces にネットワークインターフェースの設定が書かれています．先程作成した wpa_supplicant.conf を利用するということを書きます．

# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

source /etc/network/interfaces.d/*

# The loopback network interface
auto lo
iface lo inet loopback

# 自分のインターフェース名にする
#       ↓
iface wlp2s0 inet dhcp
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf

これで設定を書くことが出来たので，実際に起動します．

ifup wlp2s0

iwconfig から接続されている Wi-Fi の SSIDを確認することができます．

パッケージのアップデート

apt-get update
apt-get upgrade

必須アプリケーションのインストール

debian にはデフォルトで sudo が入っていないので，インストールします． エディッタは好きなものをインストトールしてください．

apt-get install sudo vim emacs25 make curl firefox-esr

通常ユーザに権限を追加する．

vim派の人

export EDITOR=$(which vim)
visudo

emacs派の人

export EDITOR=$(which emacs)
visudo

開かれたファイルに以下を追加します．

自分のユーザ名    ALL=(ALL:ALL)   ALL

ユーザ名が hagi の場合の例は以下となります

hagi ALL=(ALL:ALL)   ALL

これでユーザに権限が与えられました．

CapsLock を Ctrl に割り当てる

Aキーの左にある CapsLockキー ですが，正直使う頻度が低いです． なので，CapsLock を Ctrl に割り当てます．

/etc/default/keyboard の XKBOPTIONS を以下のように変更します．

XKBOPTIONS="ctrl:nocaps"

再起動後，CapsLock キーは Ctrlキーとして扱われるようになります．

root ユーザでの作業は以上です．ここからは一般ユーザで作業します．

xpywm インストール

Hiroyuki Ohsaki 氏が作成した xpywm というウィンドウマネージャーをインストールします．

http://www.lsnl.jp/~ohsaki/software/xpywm/

手順は上記サイトと同一ですが，注意しないと行けない点として make install は root で行わないといけないという点です．

まず，一般ユーザでログインします．whoami で root とでなければOKです．

Makefile のダウンロード

wget http://www.lsnl.jp/~ohsaki/software/xpywm/Makefile

インストール

make install は root で行わないと行けないので，su コマンドで root に切り替えます． su root を打つと，root のパスワードが聞かれるので入力します．

su root
make install
exit

インストール完了後，一般ユーザに戻るために exit コマンドを打ちます．

設定ファイルを作成します．

make fetch-skelton
cp skel.xinitrc ~/.xinitrc
cp skel.Xdefaults ~/.Xdefaults
cp skel.emacs ~/.emacs

xpywm を起動する

startx

ウィンドウマネージャーが起動します．

各種ショートカットは以下のURLから確認することが出来ます． http://www.lsnl.jp/~ohsaki/software/xpywm/

日本語入力

日本語入力を行うために skk をインストールします．

sudo apt-get install ddskk skkdic uim uim-skk dbskkd-cdb skkdic-cdb

ブラウザで skk を利用するために ~/.uim を作成し，以下の設定を書きます．

(define default-im-name 'skk)

カスタマイズ

好みに応じて好きなソフトウェアをインストールしてください．

私は，zsh, zplug, tmux, mew などをインストールしています．

インターンでウォーターフォールモデルを体験した話

インターン

2019年2月26日から28日までの3日間，ソフトバンク・テクノロジーでインターンをしてきました．

きっかけ

私は今までいくつかの会社でインターンをしてきました． しかし，それらの会社はどれも自社開発がメインの業務であり，B to B の会社ではありませんでした． そこで，B to B の会社はどのような環境で作業されているのか興味を持ちました．

もう一つ，興味を持つきっかけになったものとして セキュリティ というものが挙げられます． 私は，セキュリティ・ミニキャンプというものに以前参加したことがあります． ソフトバンク・テクノロジーは，このセキュリティ・キャンプのスポンサーでした．

会社紹介

ソフトバンク・テクノロジーは，「データアナリティクス」「セキュリティソリューション」「クラウドソリューション」という３つの事業領域を持っています． これらの事業領域において，様々な案件を受注していているようです． 某省庁とも取引がありそうですね．以下のウェブサイトからわかります． プロジェクトストーリー

インターン内容

「アプリーケーションエンジニアを知る」というテーマのもとに，AzureとC#で作られたアプリケーションの拡張を行いました． ３日間で，拡張内容の提案や工数の見積もり，開発，テスト，納品とウォーターフォール・モデルの流れを知ることができる貴重な体験でした．

インターン生が 4 人チームとなり，チーム同士で各工程での出来を競いました．

1日目

Azure

はじめに Azure に関しての基礎的な講義がありました． 私はAzureを一度も使ったことがなかったのですが，この講義で大体の概要を把握しました． サービス間の協力な連携が魅力だと，説明されたことを覚えています．

提案書

その後チームでの作業が始まりました．はじめは提案の作成です．

提案の段階で，どのようなことをそのような手法で実現するのかということを大まかに決めます． この作業は，顧客の要望を正しく理解し提案を作成する必要があります． 顧客のニーズに対して提案が的外れなものであると，提案が無駄になります．

提案内容が決まれば提案書の作成です． 開発の背景と目的．課題に対する解決方法，機能面と非機能面でどのように変化するのかを相手がわかるようにまとめます． 提案した内容が相手に受け入れられなければ仕事がなくなってしまうので，提案書は非常に重要だとおっしゃられていました．

その後，提案書とともに顧客に提案を説明しに行きます．

この段階で，エンジニアは

  • 提案記載（システム部分）
  • 見積

を担当することが多いそうです．

外部設計・内部設計

提案書が承認されれば，受注となります．

受注が決まれば即コーディング とならず，どのように動作するのかを考えます．

設計をする上で考えることは以下の 4 つです．

  1. 動くように計算する
  2. 取捨選択をする
  3. 効果的に配置する
  4. 依存関係をコントロールする

外部設計では実際の見た目の変化，内部設計では処理する部分のロジックを考えます． 内部設計をする際，フロー図を書きます．このとき PlantUML というものを使うと簡単に作成できることを教えていただきました．

2日目

この日は主にプログラミングをしていました．

製造

設計が終われば，実際のコードを書きます． 仕様書通りになるように変更していきます．

私は C# についてあまり知識がありませんでしたが，コードの把握は他のチームメンバーより早かったです． そこで，私はチーム全体として生産性が上がるように説明をしたりプログラミングの補助を積極的に行いました． 当然，自分のタスクも消化しました．

この日，説明を行った項目をまとめてメンバーへ送った markdown ファイルがあります．このブログの一番下に貼り付けておきます．

3日目

テスト

製造が終わると作った機能が設計通り動作するのかをテストします．また，バグが出るかもしれない動作フローを準備しておき，バグが出ないかどうかの確認も行いました． バグが出た場合は製造工程に戻り修正を行います．

納品

動作するアプリケーションが作成されれば，顧客に確認してもらい納品となります． 私たちのチームは，提案書の段階で多くの機能を盛り込んでしまったため 完全な形で納品することができませんでした．

フィードバック

書くことに少し抵抗がありますが，スキルについては「断トツで深い」という評価をいただきました．チームでの活動において，一人ひとりのメンバーと情報を共有している点も評価していただけました． 一方，でタスクの管理が出来ていないとのマイナス評価も頂きました．

私達のチームは，提案の段階で多くの追加機能を提案してしまいました．そのため，製造の時間が終了してもコーディングが終わっていないということになりました． 他社との取引を行っているという状況において終了していないことは，許されることではありません．

感想

インターンにおいてチーム開発を行うことは３回目であり，チームメンバーとのコミュニケーションや情報共有の重要性を理解していました． なので，今回のチーム開発においてこれらのことを実践できたことは素直にうれしいです．

一方で，適切にタスク管理が出来なかったことについては 反省しています．今回のインターンでは，チームメンバーのスキルレベルがわからない状況でチームリーダーや提案内容を決める必要がありました． そのため状況把握を誤りました．更に修正を先送りにしてしまいまいした． 今後このようなことを避けるためには，まず状況の把握しチームリーダーが理解できるように話す．もしくは，自分自身がリーダーになってもいいのかもしれません．

おまけ

課外活動9

課外活動 Web

今日は企業のウェブサイトでよく見かける大きな背景画像の真ん中に文字があるものを作ります．

f:id:Polyomino:20190210221157p:plain

今日の記事は2部構成となっていて，はじめに自分で実装した場合のコード，その後Nuxt+vuetify を利用したものを紹介します．

自力実装

中央に文字を表示する

画面の中央に文字を配置するコードは，以前にも出てきました． 課外活動５ - undefined

このコードの応用です．

まず，基本となるHTMLファイルを作成します．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>中央に文字がある何か</title>
  </head>
  <body>
    <div class="content">おいしいお米を食べたい</div>
  </body>
</html>

表示すると，シンプルなテキストが表示されています．

次に，画面中央に文字を出します．styleタグを作り headのとじタグの前に入れてください．

body {
  margin: 0;
  padding: 0;
}
.content {
  font-size: 4rem;
  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

以前にもこのようなCSSを書いたと思います．これらのCSSについて解説します．

デフォルトのCSS，リセットCSS

まずはじめの body に対しての調整についてです．

body {
  margin: 0;
  padding: 0;
}

これらは，bodyタグの margin と padding を 0 にするというものです．なぜこのようなものが必要なのでしょうか？

ブラウザには，デフォルトでCSSの設定が組み込まれています．

この記事の最初にあるHTMLをブラウザで確認してみてください．

f:id:Polyomino:20190210211800p:plain

body {
    display: block;
    margin: 8px;
}

というCSSが適用されています．このCSSを生かしたままレイアウトの調整をおこなっても良いのですが，トラブルの原因となる場合が多々あります．なので，リセットCSSというものがよく用いられます．

リセットCSSはその名の通り，CSSの初期設定をリセットするものです．今回はお試しでレイアウトをしているのみなので，body タグに対して margin: 0; padding: 0; を適用するという簡単なものにしています．

次に contentクラスに対しての操作です．

.content {
  /*文字の設定*/
  font-size: 4rem;
  color: white;

  /*配置の設定*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

font-size

font-sizeは文字の大きさを指定するためのものです． 指定方法は，px指定や%指定，キーワード指定など様々な方法があります．

font-size - CSS: カスケーディングスタイルシート | MDN

4rem は，ルートHTMLのフォントサイズを1remとしたときの4倍という意味です．

なぜ私は，web以外でも一般的に使われている px ではなく，rem という単位をつかったのでしょうか？

それは，pxで指定した場合ユーザの解像度に関わらずpxで指定した値になるためです．

解像度が高いディスプレイで見たユーザには小さく見え，解像度が低いディスプレイで見たユーザは大きく見えてしまいます．

そのため，pxによる指定をする場合注意が必要です．

color

color は文字の色を変更するためのものです．こちらも指定方法が色々あります．

赤色にするものであっても，以下のような複数の書き方があります．

color: red;
color: #f00;
color: #ff0000;
color: rgb(255,0,0);
color: rgb(100%, 0%, 0%);
color: hsl(0, 100%, 50%);

私は，同じプロジェクト内で統一されていればどの指定方法でも良いと思います．

color - CSS: カスケーディングスタイルシート | MDN

display

/*配置の設定*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

配置を調整するためのものです． 近年，スマートフォンやタブレットの普及してきました．言い換えると，閲覧者の画面サイズがまちまちになってきたということです．

flaxを用いると様々な画面サイズに簡単に対応することができます．

このあたりは私も理解できていません．いつも雰囲気で書いています．ごめんなさい．

flex - CSS: カスケーディングスタイルシート | MDN

width, height

  width: 100vw;
  height: 100vh;

これらは，その要素の幅と高さを決めるものです．何も指定していなければ，文字を囲う枠の幅になります．

全画面に対して中央に持ってくることを考えた場合，要素の大きさも全画面にしなければなりません．

vw は，ウィンドウの幅を100としたときどれほどかという指定方法です．すなわち，100vwとはウィンドウ幅いっぱいということです．

同様に vh はウィンドウの高さを100としたときの割合による指定方法です．

これらの指定をすることによって画面いっぱいにコンテンツの領域ができます．

背景画像の指定

背景画像の指定は様々な手法がありますが，私が思う簡単な方法を紹介します．

まず画像がなければ表示できないので，写真を入手します． 私はこの画像を使います．

https://free-images.com/display/rice_usd_koshihikari_rice.html

imgフォルダを作りその中にダウンロードした画像を入れます．

その後，CSSを追記します．

/*背景画像の設定*/
background-image: url("img/rice_usd_koshihikari_rice.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

background-inage に画像のURLを指定することによって背景画像を設定されます．

その他の指定しているものであまり重要なものは無いので説明は省略します．"そう書く" 程度に以下のURLを確認しておいてください．

background-size - CSS: カスケーディングスタイルシート | MDN

background-repeat - CSS: カスケーディングスタイルシート | MDN

background-position - CSS: カスケーディングスタイルシート | MDN

これらをまとめたHTMLファイルはこのようになります．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>中央に文字がある何か</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .content {
        /*文字の設定*/
        font-size: 4rem;
        color: white;

        /*配置の設定*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;

        /*背景画像の設定*/
        background-image: url("img/rice_usd_koshihikari_rice.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="content">おいしいお米を食べたい</div>
  </body>
</html>

f:id:Polyomino:20190210221157p:plain

Vuetify

Vue.js Material Component Framework — Vuetify.js

Vuetify は，Vue(Nuxt) 向けのUIフレームワークです．

事前準備

昨日はプロジェクトを作成したのみです． テンプレートからプロジェクトを作成した場合，このテンプレートの設定が残っています．

今回は不要なのでその設定を削除します．

layouts/default.vue を変更

<template>
  <v-app>
    <v-content>
      <nuxt />
    </v-content>
  </v-app>
</template>

pages/index.vue を変更

<template>
  <section>
    おいしいお米を食べたい
  </section>
</template>

pages/inspire.vueを削除

package.json があるディレクトリに移動して，以下のコマンドを打ちます．

npm run dev

開発用サーバが立ち上がり，http://localhost:3000 にアクセスすると文字のみが表示された画面がでてきます．

f:id:Polyomino:20190211221850p:plain

Vuetify でそれっぽい画面を作る

画像の配置

まず，プロジェクト内に画像を配置しないといけません．Nuxt.js では，static フォルダ内に画像を入れます．

static フォルダ内に rice_usd_koshihikari_rice.jpg という画像を入れます．

parallax

Vuetify は，v-parallax というコンポーネントが準備されています．

Parallax Component — Vuetify.js

これを利用すると，手軽にかっこいい画面が作ることができます．

pages/index.vue を変更します．

<template>
  <section >
    <v-parallax src="/rice_usd_koshihikari_rice.jpg">
      <v-layout column align-center justify-center class="white--text">
        <h1 class="mb-2 display-3 text-xs-center">おいしいお米を食べたい</h1>
      </v-layout>
    </v-parallax>
  </section>
</template>

画像背景に文字が入ったものができました．

f:id:Polyomino:20190211221652p:plain

よく見ていただくとわかるんですが，高さが 100vh となっていません．

ドキュメント( https://vuetifyjs.com/ja/components/parallax#parallax ) には，height という属性をつけることができると書かれています．

なので，

<v-parallax src="/rice_usd_koshihikari_rice.jpg" height="100vh">

としてみます．

f:id:Polyomino:20190211221800p:plain

すると，レイアウトが崩れてしまいました．ソースコードを見ると，100vhpx となっていることがわかります．

すなわち，v-parallax の height 指定はpxによって指定する必要があります．

フレームワークを使うとこのような場合の調整に苦労します． 今回は諦めます．デフォルトの500pxのまま運用します．

まとめ

いろんな画面サイズに対応するとき flex が便利

フレームワークを使うと簡単に実装できるが，微調整をするとなるとつらい

課外活動８

課外活動 Web

今日から数日かけて Nuxt.js でダミー企業のウェブサイトを作ります．

Nuxt.js とは？

Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。 はじめに - Nuxt.js

Nuxt.js は，Vue アプリケーションを作成するためのフレームワークということですが，Vueアプリケーションとはどのようなものなのでしょうか？

Vue.js とは？

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 はじめに — Vue.js

Vueは，「ユーザーインターフェイスを構築するためのプログレッシブフレームワーク」です．

user interface

the way a computer gives information to a user or receives instructions from a user

ユーザがコンピュータにデータを入力したり，情報を引き出したりする操作方法の総称

progressive

  1. in favour of new ideas, modern methods and change
  2. happening or developing steadily

日本語に訳すとするならば，「進歩，前進」という意味です．

まず，アプリケーションを作成したとします．その後，環境の変化などにより機能を拡張したりする必要が出てきたとします． このとき，アプリケーションはprogressiveに変化していきます．必要となるフレームワークもprogressiveに変化することで無駄の無いものとなります．

Vueの作者であるEvan You氏のスライド https://slides.com/evanyou/progressive-javascript#/20

Nuxt.js でプロジェクトの作成

npx create-nuxt-app <プロジェクト名>でnuxt.jsの環境が整います．

Powershell で以下のコマンドを打ってください．

npx create-nuxt-app szm-corp

? Project name szm-corp
? Project description (My peachy Nuxt.js project) szm-corp website
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Universal
? Author name iPolyomino
? Choose a package manager npm

create-nuxt-app は nuxt.js のプロジェクトを簡単に作成することができるコマンドです． node.js のプロジェクトは，必要となるパッケージの管理で悩むことがありますが，このコマンドを使うことによって簡単に始めることができます．

Choose features to install で，Linter / Formatter, Prettier を選択しています．（選択は矢印キーとスペースで行うことができます．） Linter があることによってソースコードのセミコロンの位置などが統一され，読みやすいものとなります．

自力で修正するのは非常に疲れるので，エディッタに自動整形を行うプラグインを入れることをおすすめします．
Extensions で prettier を導入します．
f:id:Polyomino:20190206011337p:plain Settings で format on save を選択します．
f:id:Polyomino:20190206011359p:plain この設定をすることによって，保存したタイミングで自動的に整形されます．

UI framework は，vuetify を用いています．いろいろなフレームワークがありますが，私の好みでvuetifyを選択しました．今後の記事もvuetifyを利用したもので書いていきます．

vuetifyjs.com

# ローカル環境でNuxt.jsを動かす

プロジェクトのフォルダに入り， npm run dev コマンドを打ちます． Vue アプリケーションを作成するフレームワーク

cd szm-corp
npm run dev

開発用サーバが立ち上がり，http://localhost:3000/ へアクセスすることによって作成したウェブサイトを確認することができます．

f:id:Polyomino:20190206011029p:plain

GitHubにプロジェクトをpushする．

コードをGitHubに上げます．GitHubで管理することによって，あとで紹介するNetlifyとの連携を行うことができます．

リポジトリの作成

先日と同じようにGitHubからリポジトリを作成します．

Initialize READMEのチェックを外す，Add .gitignore / Add LICENSE をNone にしておいてください．

create-nuxt-appで作成したディレクトリは既にgitが入っているためです．

リポジトリは自分のものを指定してください．

git add .
git commit -m "first commit"
git remote add origin git@github.com:iPolyomino/szm-corp.git
git push -u origin master

これで，GitHubにpush されました．

Netlify にデプロイする．

ビルドやデプロイなど，色々やってくれるウェブサービスです．今回作成するウェブサイトは静的サイトなので，このサービスを利用します．

www.netlify.com

GitHubアカウントでログイン（連携認証）してください．

ログイン後，新しくサイトを作成します．

f:id:Polyomino:20190206005845p:plain

ウィンドウが出てくるので，先程作成したリポジトリへのアクセスを許可します．

f:id:Polyomino:20190206010056p:plain

デプロイするブランチ，ビルドするコマンドと公開するフォルダの設定をします．

branch to deploy にはmaster，Build command は nuxt generate ，Public directory は dist と設定してください．

f:id:Polyomino:20190206010256p:plain

Deploy Site ボタンを押すと，ビルドが走ります．しばらく待つと，サイトが生成されURLが表示されます．

このURLにアクセスすることによってウェブサイトを確認することができます．

f:id:Polyomino:20190206010636p:plain

今後masterブランチに変更が加わるごとに自動でビルドが走りデプロイされるので，ウェブサイトの管理が非常に簡単です．

まとめ

Nuxt.js はVue アプリケーションを作成するフレームワーク

GitHub + Netlify 便利

課外活動７

課外活動 Web

Node.js の勉強をします．

環境は，Windows10 使う シェルは PowerShell を想定して記事を書きます．

Node.jsとは？

Node はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 Node.js とは | Node.js

単語の意味

スケーラブル

  1. used to describe a computer, a network, software, etc. that can be adapted to meet greater needs in the future
  2. designed to work on a large or small scale, according to needs
  3. that can be climbed

https://www.oxfordlearnersdictionaries.com/definition/english/scalable?q=scalable

今回の場合，1番の「将来のニーズに対して適応可能」という意味です．

非同期型

非同期とは、データを転送する際に、送信側と受信側のタイミングの一致（同期）を気にせずにデータをやり取りすることである。

非同期とは (asynchronous) ひどうき： - IT用語辞典バイナリ

イベント駆動

イベントドリブンとは、コンピュータプログラムの開発および実行方式の一つで、利用者や外部の別のプログラムなどが引き起こす出来事に対応する形で処理を記述あるいは実行する方式。

イベントドリブン（EDA）とは - IT用語辞典

Node.js のインストール

PowerShell で以下のコマンドを打って確認してください．

node -v

もし，Node.jsが既にインストールされているのであればバージョン情報が返ってきます．

node -v
v10.13.0

インストールされていなければ，以下のURLからダウンロードしインストールしてください．

nodejs.org

補足：Node.jsはバージョンの更新が頻繁にあるので，nodist を使うことをおすすめします．nodist はwindows において使うことができるnode.js/npm のバージョンマネージャーです．複数のバージョン環境をPC上に作成でき，コマンドでバージョンを切り替えることができます． github.com

プロジェクト（パッケージ）の作成

cd でプロジェクトを作りたいディレクトリに入って以下のコマンドを打ってください．

npm init

パッケージ名やversion，ライセンス等聞かれますがすべて デフォルトでも問題ありません．（enterを押し続けると，デフォルトの括弧でくくられた値となります．）

すると，package.jsonが作成されています．

Node.js によるサーバアプリケーションの作成

Nodejsによるサーバを構築します．初日の図を思い出してください．

f:id:Polyomino:20190125004455p:plain

クライアントは，サーバに対してリクエストを行います．

サーバは，クライアントに対してレスポンスを返します．

すなわち，レスポンスを返す部分を作成します．

先程の 「プロジェクトの作成」で作成したフォルダに index.js というファイルを作成します．index.jsに以下のコードを書いてください．

// httpモジュールの読み込み
const http = require("http");

// ホスト名とポートの定義
const hostname = "127.0.0.1";
const port = 3000;

// リクエストに対してのレスポンスを定義
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello world\n");
});

// サーバを起動．起動時に，コンソールにメッセージを表示
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

node.jsでindex.js動かします．PowerShell で以下のコマンドを打って下さい．

node index.js

package.json に mainとしてindex.js が指定されているため，以下のコマンドでも実行できます．

node .

すると，Server running at http://127.0.0.1:3000/というメッセージが出てきます． ブラウザで http://127.0.0.1:3000/ にアクセスしてみると，Hello world というメッセージが表示されます．

f:id:Polyomino:20190131104051p:plain

HTMLファイルを返してみる．

適当なhtmlファイルを作成します． index.html という名前で保存してください．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Node</title>
  </head>
  <body>
    Nodeはおもしろいなぁ
  </body>
</html>

リクエストがきたとき，htmlを返すようにindex.jsを書き換えます

const http = require("http");
// File Systemを扱うfsモジュールを読み込み
const fs = require("fs");

// index.htmlを読み込む
const index = fs.readFileSync("index.html");

const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  // 返すものはテキストではなくhtml
 res.setHeader("Content-Type", "text/html; charset=utf-8");
  // index.htmlを返す
  res.end(index);
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

ブラウザで http://127.0.0.1:3000/ にアクセスしてみると，「 Nodeはおもしろいなぁ」というメッセージが表示されます．

f:id:Polyomino:20190131110258p:plain

パッケージの利用

すべて自分でコードを書いてもいいのですが，毎回同じコードを書いていては非効率です．また，サーバを立てる，ファイルを返す等の処理は多くの人が利用するものなので，共同（ときには個人）で作り上げてみんなでそれを使ったほうが非常に効率的です．

nodeには標準でnpmというパッケージマネージャがついています． npmを利用することによって，他人の作ったパッケージを自分のパッケージで利用することができます． package.json はそのパッケージを管理するためのjsonファイルです．

引き続き同じディレクトリで作業します．

Nodeでよく用いられるパッケージとして，expressというものがあります．expressを使ってみます．

npm install express --save

するとexpressのインストールが始まります． インストール完了後，package.json を見てみると，"dependencies" に expressが追加されています．

expressを使ってサーバを立ち上げます．app.jsという名前で以下のコードを打ち込んでください．

const express = require("express");

const app = express();
const hostname = "127.0.0.1";
const port = 3000;

app.get("/", (req, res) => res.send("Hello world"));

app.listen(port, hostname, () =>
  console.log(`express server running at http://${hostname}:${port}/`)
);

そして，サーバを立ち上げます．

node app.js

ブラウザで http://127.0.0.1:3000/ にアクセスしてみると，先程同様 Hello world というメッセージが表示されます．

index.htmlを返すサーバにしてみます．

const express = require("express");
const app = express();

const path = require("path");

const hostname = "127.0.0.1";
const port = 3000;

app.get("/", (req, res) => res.sendFile(path.join(__dirname, "/index.html")));

app.listen(port, hostname, () =>
  console.log(`express server running at http://${hostname}:${port}/`)
);

ブラウザで http://127.0.0.1:3000/ にアクセスしてみると，「 Nodeはおもしろいなぁ」というメッセージが表示されます．

この小さな例ではわからないかもしれませんが，プロジェクトが大きくなってきた時，パケージを利用するメリットが大きくなります．

Express 4.x - API Reference

expressには多くの機能があり，ほんの数行書くだけでその機能を作ることができます．仮にすべて自分で実装しようとすると複雑になってしまったり書く量が増えてしまったりと大変なことになります．

時と場合に合わせて適切にパッケージを利用しましょう．

gitignore

npm install express をしたあと，node_modulesというフォルダができていたことに気づいたかもしれません．これは，expressのソースコードなどが入っています．GItでプロジェクトを管理するとき，この node_modules は含めない方が良いです．なぜなら，パッケージは日々いろんな人が更新します．それらが更新されるごとに node_modules の中身も更新されます．この変更も gitで管理してしまうと，自分の変更した点がわかりづらくなったり，リポジトリが重たくなったりしてしまいます．なので，.gitignore というファイルを作成してgitの管理から外します．

.gitignore というファイルを作成し，以下の内容をコピーしてください．

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

gitignore/Node.gitignore at master · github/gitignore · GitHub

これで node_modules がGitの管理から外れました．

「別のPCでgit clone してきたとき node_modules が無いじゃないか」と思うかもしれません．しかしこれは心配する必要はなく，npm install というコマンドを打てば package.json にかかれているパッケージ群がインストールされます．

まとめ

nodeは非同期型のイベント駆動の JavaScript 環境

nodeにはnpmというパッケージマネージャがある．

ケースに合わせて適切にパッケージを利用しよう．

課外活動６

課外活動 Web

情報集収の方法

効率良く勉強するためには，正しい情報を自分にあった方法で仕入れる必要があります．私が数年間Webについて学ぶときに使った手法を紹介するので，自分に合った方法を探してみてください．

本による情報集収

自分の主観で読んで良かった本を選定しました．

技術書は一冊数千円するものがほとんどなので，図書館を活用するとよいです．

セキュリティを理解するために読んでおいた方が良い本

情報セキュリティ読本

セキュリティの基礎中の基礎とよばれることが書かれています． ページ数も非常に少なくきれいにまとまっているので，「セキュリティ？全く知らない😰」という人におすすめです．

情報セキュリティ読本―IT時代の危機管理入門

情報セキュリティ読本―IT時代の危機管理入門

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践

私は第１版しか読んでいないので，第１版の感想です．

どのような攻撃手法があり，どのようにすることによって防ぐことができるのかを実践を交えて理解することができます． またブラウザの保護機能の紹介もあり，何を気をつけると安全なウェブアプリケーションを作ることができるのかを知ることができます．

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践

通信について理解するための本

マスタリングTCP/IP

マスタリングTCP/IP 入門編 第5版

マスタリングTCP/IP 入門編 第5版

通信の基礎中の基礎であるTCP/IPのことが書かれています．

Real World HTTP

ウェブ技術の基礎となるHTTPという技術がどのようなものであるのかを変遷とともに学ぶことができます．

Real World HTTP ―歴史とコードに学ぶインターネットとウェブ技術

Real World HTTP ―歴史とコードに学ぶインターネットとウェブ技術

ハイパフォーマンス ブラウザネットワーキング

どのようにするとハイパフォーマンスなウェブを実現することができるのかということについて書かれています． ワイヤレスネットワークやHTTPの歴史などにも触れられているので，ウェブに関連する技術について広くしることができます．

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

デザインを考えるときに読んでおいた方が良い本

ノンデザイナーズ・デザインブック

デザイナーでない人がどのようにデザインを考えると良いか基本から書かれています．

配置や色合いを少し工夫をするだけで，自分の作るものの印象が変わったり読みやすくなったりするので，一度読んで意識を変えてみることをおすすめします．

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

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

ウェブに限らず読んでおいた方が良い本

リーダブルコード

どのようなコードを書けば良いのか．どのようなコメントを書けばいいのかなどということが書かれています．

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

ベタープログラマ

プログラマとして生きていくことを考えたとき，どのようにふるまい，どのように考えると良いのかということについて書かれています．

ベタープログラマ ―優れたプログラマになるための38の考え方とテクニック

ベタープログラマ ―優れたプログラマになるための38の考え方とテクニック

Team Geek

どのようにチームのメンバーと接するとよいのかということなどが書かれています．

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

ウェブによる情報集収

HTMLやCSS，JavaScriptなどのフロントエンドを取り巻く環境は，年々変化し続けます．これらの最新技術の情報集収は，ウェブ上で行うことをおすすめします．

MDN

Mozillaが管理するウェブ技術に関するドキュメントが多く載っているウェブサイトです．

大体のことは，このウェブサイトで調べれば解決します．

developer.mozilla.org

GitHub

複数の書き方で迷ったとき，他の人がどのような書き方をしているのかを見ることができます． そのフレームワーク/言語がどのような問題を抱えているのか，どのような方向で進んでいくのかという議論も見ることができます．

github.com

Stack Overflow

海外の開発者向け技術軽情報共有サイトです． 情報量が多いです．

stackoverflow.com

Qiita

玉石混交ですが，有益な情報が掲載されていることも多々あります． 日本語で技術系の調べものをするとき，役立ちます．

qiita.com

teratail

僕は使ったことが無いのでわかりませんが，初心者に優しいプログラミング質問サイトというイメージがあります．

teratail.com

つながりによる情報集収

勉強会

勉強会などに参加すると，現在トレンドである技術が学べることがあります．また，一緒に勉強する仲間もつくることができるのでおすすめです．

勉強会に行ったことが無いと言う人は，ひとまずTwitterアカウントとFaceBook アカウントをつくりましょう．多くの場合，連絡先を交換するとなるとこの２つのどちらかです．

connpass

connpass.com

ATND

atnd.org

TECK PLAY

techplay.jp

Doorkeeper

www.doorkeeper.jp

まとめ

学ぶことによって情報の仕入先を変更すると，効率よく学ぶことができます．

課外活動５

課外活動 Web

今日は，DOMについて説明します．

DOMとは

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。 DOM の紹介 | MDN

具体的な例で説明すると，HTMLをJavaScriptで操作するときDOMというものを利用します．

html におけるid

DOM操作をするとき，どのタグ（オブジェクト/ノード）に対して操作を行うのかを特定する必要があります． 特定をするための材料として，htmlタグにidを付加することができます．

付け方は，classと同じようにタグの属性として付けます．

<div id="app"></div>

id はclassとは違い，ドキュメント(HTMLファイル)内で一意でなくてはなりません． つまり，同じHTML内には 同じ id を指定してはいけません．

JavaScript によるDOM操作

DOM操作方法の一つとして，Document.getElementById()とinnerHTMLを利用する方法があります．

Document.getElementById() | MDN

element.innerHTML | MDN

HTMLで以下のコードがあったとします．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>DOM操作</title>
  </head>
  <body>
    <div id="message"></div>
  </body>
</html>

<div id="message"></div>にテキストを追加するには以下のようなJavaScriptのコードでできます．

document.getElementById("message").innerHTML = "JavaScriptからHTMLを操作しています"

アプリケーション作成

最後に，いままでやってきたことの復習です．ウェブ上で動作する時計を作成します．

プログラム実装

JavaScriptで時間は，new Date() でDateオブジェクトの作成ができます．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>時計</title>
  </head>
  <body>
    <div id="clock"></div>
    <script>
    // Date オブジェクトの作成
    const time = new Date();
    // 時間，分，秒の取得
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    // clockに対して操作する．
    document.getElementById("clock").innerHTML = `${hours}:${minutes}:${seconds}`;
    </script>
  </body>
</html>

「 」で囲われた部分は，テンプレート文字列と呼ばれ文字列として扱われます． ただし${}` で囲われた部分に変数を書いた場合，その変数が展開されます．

結果はこのようになります．

f:id:Polyomino:20190128214518p:plain

しかし，このままだとJavaScriptのコードが一度しか実行されないため，時間が進みません．なので，１秒毎に更新されるようJavaScriptを書き換えます．

毎秒実行するには，setIntervalを使います．setInterval を利用するときに関数であったほうが扱いやすいので，描画内容をアップデートする関数を作ります．

    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();

update関数ができたので，setIntervalの引数として渡します．

    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = time.getMinutes();
      const seconds = time.getSeconds();
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();
    // 1000 ミリ秒（=1秒）ごとにupdateを実行
    setInterval(update, 1000);

これで，毎秒更新される時計が実装されました．

見た目を整える

JavaScript

時間がひと桁であった場合，表示される時間もひと桁です．少し気になるので，ひと桁であった場合0を追加して調整します．

      const minutes = `0${time.getMinutes()}`.slice(-2);
      const seconds = `0${time.getSeconds()}`.slice(-2);

f:id:Polyomino:20190128214626p:plain

2 秒であった場合，02として後ろから2文字文切り出します．16秒であった場合も016となって後ろから2文字分切り出されるので12となります．

CSS

このままだと文字が小さく見にくいので，文字を大きくします．

CSSでidに対するセレクタもあり，<div id="app"></div>に対して適用する場合，#app と書きます．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>時計</title>
    <style>
      #clock {
        font-size: 10rem;
      }
    </style>
  </head>
  <body>
    <div id="clock"></div>
    <script>
    const update = () => {
      // Date オブジェクトの作成
      const time = new Date();
      const hours = time.getHours();
      const minutes = `0${time.getMinutes()}`.slice(-2);
      const seconds = `0${time.getSeconds()}`.slice(-2);
      document.getElementById(
        "clock"
      ).innerHTML = `${hours}:${minutes}:${seconds}`;
    };
    // 初回ロード時実行
    update();
    // 1000 ミリ秒（=1秒）ごとにupdateを実行
    setInterval(update, 1000);
    </script>
  </body>
</html>

f:id:Polyomino:20190128214728p:plain

だいぶ見やすくなりました．しかし，左上にあるので中央に移動させます．

      body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
      #clock {
        font-size: 10rem;
      }

中央に移動させることができました．

f:id:Polyomino:20190128214759p:plain

最終的なコードはGitHubにあります．

https://github.com/iPolyomino/szm/blob/master/clock.html

プレビュー https://ipolyomino.github.io/szm/clock.html

まとめ

プログラムからHTML，XMLを操作することができる．このとき用いられるものがDOM