Hirotacas Log

現在、合同会社フィヨルド様にてリモートインターンをやっています。

macOSでDebian IsoイメージのファイルからCDを作成する方法

ディスクの作成は Finder から行えます。

準備: DVDドライブがついてないMacは外部DVDドライブを接続する。

1.Finder 上にある ディスクイメージを 右クリック(またはcontrolを押しながらクリック)し「ディスクイメージ “ディスクイメージの名前"をディスクに書き込む」を選択

gyazo.com

2.空のディスクを挿入し「ディスクを作成」をクリック

ディスクの作成が開始され、完了後に自動的に Mac から排出されます

Linux(Debian)

VirtualBoxDebian を インストールする。

Macのバージョン macOS Sierra 10.12.4 VirtualBox バージョン 5.1.18 r114002 (Qt5.6.2)
debian-8.7.1-amd64-netinst

  1. VirtualBoxDebianの仮想環境を構築する。

    • 名前: Debian
    • モリーのサイズ: 1024MB
    • 仮想ハードディスク容量: 8GB
    • ハードディスクのファイルタイプ: VDI (他の仮想ソフトで使用しない場合)
    • 物理ハードディスクにあるストレージのサイズ: 可変サイズ
  2. Debianをインストールする。

    • 言語の選択: 日本語
    • 場所の選択: 日本
    • 場所の選択: 日本
    • キーボードの選択: 各キーボードレイアウトに合わせる。今回は日本語
    • ホスト名: debian
    • ドメイン名: 各自のドメイン名に設定する。今回は local
    • rootのパスワード: 各自パスワードを設定する。
    • rootのパスワード: 各自パスワードを設定する。
    • ユーザーとパスワードのセットアップ: 各自設定する。
    • 新しいユーザーの本名: hirotaka
    • アカウントのユーザー名は hiro
    • ここでセットアップしたユーザーはrootとは別の管理者権限のない作業ユーザー。
    • ディスクのパーティショニング: 今回はディスク全体を使う。
    • システムを止めずにディスクの追加、論理ボリュームの拡張、暗号化を行う場合はLVM,暗号化LVMを選択する。
    • ティショニングするドライブを選択する。
    • パーティショニングの構成: 今回は全てのファイルを1つのパーティションにする。
    • homeなどを分離する場合は要件にあったものを選択。
    • Debianアーカイブミラー: 日本(現在住んでいる国 or 最も近い場所)
    • 国内のDebianアーカイブミラー: 今回は ftp.jp.debian.org
    • HTTPプロキシの情報: 今回は必要ないので空白
    • 利用したパッケージの統計値を開発者に匿名で提出するか選びます。
  3. ソフトウェアのインストール

パッケージ管理システム(apt)の基本操作

  1. ===追加===

    ‘’‘新しいソフトウェアのインストール’‘'(root権限が必要)

    # apt-get install ''パッケージ名''

    ‘’‘ソースパッケージのダウンロード’‘’

    # apt-get source ''パッケージ名''

    ‘’‘ソースパッケージをコンパイルする為に必要なパッケージのインストール’‘'(root権限が必要)

    # apt-get build-dep ''パッケージ名''

  2. === 更新 ===

    ‘’‘リポジトリの更新’‘'(root権限が必要)

    # apt-get update

    ‘’‘インストール済みのソフトウェアの更新’‘'(root権限が必要)

    # apt-get upgrade

    ‘’‘ディストリビューションのアップグレード’‘'(root権限が必要)

    # apt-get dist-upgrade

  3. === 検索・情報表示 ===

    ‘’‘パッケージの検索’‘’

    # apt-cache search ''検索キーワード''

    ‘’‘特定パッケージの情報表示’‘’

    # apt-cache show ''パッケージ名''

  4. === 削除 ===

    ‘’‘特定パッケージの削除’‘'(root権限が必要)

    # apt-get remove ''パッケージ名''

    ‘’‘特定パッケージの設定ファイルを含めた削除’‘'(root権限が必要)

    # apt-get purge ''パッケージ名''

    ‘’‘不要なパッケージの自動削除(依存されていないライブラリ等)’‘'(root権限が必要)

    # apt-get autoremove

Webアプリケーションを動かすのに必要なパッケージをインストールして設定する。

   1. sudo ワンショットでユーザーがスーパーユーザーの特権レベルを利用出来る。
   2. SSH  暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコル。
   3. SSL インターネット上で通信を暗号化する。第三者によるデータの盗聴や改ざんなどを防ぐ。
   4. MySQL 人気があるデータベース。
  1. === sudo ===

    rootユーザーでログイン

    # apt-get install sudo

    • sudoを使えるユーザーを登録する

    # adduser "ユーザー名" sudo

    rootユーザーをログアウト後、特権のない別のユーザーでログイン

    $ sudo apt-get install vim

  2. === SSH ===

    $ sudo apt-get install ssh

    環境設定 > ネットワーク > ホストオンリーネットワーク で 固定したいIPのゲートウェイを追加。

    f:id:developer-hiro-east9-hey-world:20170411030115p:plain

    f:id:developer-hiro-east9-hey-world:20170411030237p:plain

    f:id:developer-hiro-east9-hey-world:20170411030432p:plain

    とりあえず今回はdefaultの192.168.56.1を設定。

    次にVM(インストールしたDebian)にホストオンリーネットワークを設定。

    f:id:developer-hiro-east9-hey-world:20170411031015p:plain

    f:id:developer-hiro-east9-hey-world:20170411031052p:plain

    • Debianのネットワーク設定

    /etc/network/interfacesにホストオンリーネットワークのゲートウェイと静的IPアドレスを追加

    $ sudo vim /etc/network/interfaces

    auto eth1
    iface eth1 inet static
    address 192.168.56.101
    netmask 255.255.255.0
    gateway 192.168.56.1

    MacのterminalからDebianのアカウントにログイン

    $ ssh debianのusername@192.168.56.101(設定した静的IPアドレス) #Macのterminal

    f:id:developer-hiro-east9-hey-world:20170411053619p:plain

    • rootでのSSHログインを禁止。

    $ sudo vim /etc/ssh/sshd_config

    PermitRootLogin without-password (パスワードではログイン禁止)になっているので
    PermitRootLogin no に編集する。(SSHでのログインも禁止)

    # /etc/init.d/sshd restartSSHの設定を反映します。

    Macからrootでログインすると「Permission denied, please try again.」というアラートが表示され、rootでのSSHログインができなければOKです。

    f:id:developer-hiro-east9-hey-world:20170413191213p:plain

    • パスワードでのログインを禁止、Port番号を変えてMac(クライアント)からSSHでログインできるようにする。

    Debian(サーバー)に ~/.ssh フォルダをパーミッション付きで作成

    $ pwd # Debianの現在のパス

    /home/user

    $ sudo mkdir -m 700 .ssh

    Mac(クライアント)にSSH Keyを作成する。

    $ ssh-keygen -t rsa -f debian_rsa # Mac(クライアント)

     ~/.ssh/ 以下に公開鍵 秘密鍵が作成される。

    debian_rsa #秘密鍵 debian_rsa.pub #公開鍵

    Debian(サーバー)にMacで先ほど作ったdebian_rsa.pub(公開鍵)をscpを使って送ります。

    Mac(クライアント)terminalから

    $ pwd #Macの現在のパス

    /Users/“ユーザ名”/.ssh

    $ scp ./id_rsa.pub username@192.168.56.101(設定した静的IPアドレス):/home/"サーバー側のユーザ名"/.ssh/authorized_keys

    実際にDebianに送れたか確認。

    $ ls -la ~/.ssh # authorized_keysがあればOK

    authorized_keys ファイルのパーミッションは 0600 に変更

    $ sudo chmod 600 authorized_keys

    AuthorizedKeyを有効にしてパスワード認証を禁止する。

    $ sudo vim /etc/ssh/sshd_config

    #PasswordAuthentication yes
    PasswordAuthentication no (パスワード認証の設定をコメントアウトして禁止する。)

    SSHの設定を反映します。

    sudo /etc/init.d/ssh restart

    パスワード認証ログインを禁止したのでPermission denied (publickey).になる。

    f:id:developer-hiro-east9-hey-world:20170414075347p:plain

    デフォルトのPort 22を変更、AuthorizedKeyを有効にしてSSH認証ログインのみにする。

    $ sudo vim /etc/ssh/sshd_config

    #AuthorizedKeysFile %h/.ssh/authorized_keys
    AuthorizedKeysFile %h/.ssh/authorized_keys (コメントアウトする。)

    Port 22
    Port 2288 (defaultポートを変更する。2288は適当)

    SSHの設定を反映します。

    sudo /etc/init.d/ssh restart

    ポートを変更したのでdefaultポート(22)ではログインできない。

    f:id:developer-hiro-east9-hey-world:20170414074034p:plain

    Mac(クライアント)から初回のみ-iオプションで秘密鍵を指定する。

    $ ssh -i ~/.ssh/debian_rsa username@192.168.56.101(設定した静的IPアドレス) -p 2288

    macOS SierraではSSHキーを覚えてくれないのでちょっとした設定が必要 ~/.ssh/config を作る。

    vim ~/.ssh/config

             # Debianサーバー   
             Host debian   
                HostName 192.168.56.101   
                User hiro   
                IdentityFile ~/.ssh/debian_rsa   
                Port 2288   
                TCPKeepAlive yes   
                IdentitiesOnly yes 
    

    $ ssh debian でログインできる。

    f:id:developer-hiro-east9-hey-world:20170414083600p:plain

  3. === SSL ===

$ sudo apt-get install openssl

インターネットなどのコンピュータネットワークにおいてセキュリティを要求される通信を行うためのプロトコルである。主な機能として、通信相手の認証、通信内容の暗号化、改竄の検出を提供する。

itpro.nikkeibp.co.jp

使い方など詳しいことは次の記事でNginxと一緒にまとめます。

  1. === MySQL ===

MySQL :: Download MySQL APT Repository

f:id:developer-hiro-east9-hey-world:20170421095214p:plain

f:id:developer-hiro-east9-hey-world:20170421095248p:plain

$ mkdir ~/src srcフォルダを作成

$ cd ~/src 今作ったsrcフォルダに移動

$ wget https://dev.mysql.com/get/mysql-apt-config_0.8.4-1_all.deb wgetで先ほどコピーしてきたURLからdebパッケージをダウンロードする。

$ sudo dpkg -i mysql-apt-config_0.8.4-1_all.deb ダウンロードしたdebパッケージをdpkgでインストールする.。

f:id:developer-hiro-east9-hey-world:20170421100429p:plain

f:id:developer-hiro-east9-hey-world:20170421100446p:plain

f:id:developer-hiro-east9-hey-world:20170421100506p:plain

$ sudo apt-get update リポジトリをアップデート

$ sudo apt-get install mysql-server 最新のMysqlをインストール

MySQLのrootパスワードを設定します。

f:id:developer-hiro-east9-hey-world:20170421101642p:plain

  • MySQLサーバの起動、再起動と停止

$ sudo /etc/init.d/mysql start 開始

$ sudo /etc/init.d/mysql stop 終了

$ sudo /etc/init.d/mysql restart 再起動

$ sudo /etc/init.d/mysql stop 終了

  • MySQLの設定、確認

$ mysqladmin -u root password 'new-password' 管理者パスワードの変更

$ netstat -atn MySQLサーバは3306番ポートを利用します。netstatコマンドを実行して、 3306番ポートが開かれているか確認できます。

$ mysqladmin -u root -p ping MySQLサーバの動作は、mysqladminコマンドを使っても確認することが できます。

  • MySQLクライアントの操作

$ mysql -u root -p MySQLサーバに接続してコマンドラインで操作をする

  • データベースへの接続、操作

$ mysql -u root -p MySQLサーバに接続してコマンドラインで操作をする

mysql> SHOW DATABASES; データベースの確認。

mysql> USE '接続するデータベース'; データベースに接続する。

mysql> SELECT DATABASE(); 現在接続しているデータベースの確認。

  • データベースの作成

mysql> CREATE DATABASE ’作成するデータベース’;

  • データベースの削除

mysql> DROP DATABASE ’削除するデータベース’;

  • データベースユーザーの作成

mysql> CREATE USER 'ユーザ名'@'ホスト' IDENTIFIED BY 'パスワード’;

  • 作成したユーザーに権限を設定する。

mysql> GRANT ALL ON 権限を許可するデータベース.* TO 'ユーザ名'@ 'ホスト' IDENTIFIED BY 'パスワード';

  • データベースユーザーパスワードの変更

mysql> SET PASSWORD FOR ユーザ名@ホスト=pass word('新しいパスワード');

  • データベースユーザーの削除

mysql> DROP USER ユーザ名@ホスト 

  • テーブルの作成

mysql> CREATE TABLE テーブル名 (列1, 列2, 列3,.....); 

世界最大の怖い話サイト

kowabana.jp

まず、莫大な量の怖い話、怖い漫画があります。

kowabana.jp

また、他にもオーパーツやUFO,宇宙人などの話もあります。

これがまた面白くて仕事の合間に読んだりもしています。

iPhone アプリもあるよ。

怖話の改善案をまとめようと思います。

まず怖話とは?

世界最大の怖い話サイト

kowabana.jp

まず、莫大な量の怖い話、怖い漫画があります。

kowabana.jp

また、他にもオーパーツやUFO,宇宙人などの話もあります。

これがまた面白くて仕事の合間に読んだりもしています。

iPhone アプリもあるよ。

自分でも出来そうなところからまとめます。

改善案(PC、スマホのブラウザで使用した場合)

  1. ナビバーをもっとシンプルにまとめると尚良いと思います。 確かにiPhoneなどの端末ではスクロールはしやすいかもしれませんが PCでの操作になるとスクロールのメリットがあまり感じないかもしれないです。 f:id:developer-hiro-east9-hey-world:20161028220732p:plain

  2. トップに戻るスクロールアップボタンは下にスクロールされ始めてから表示した方が良いと思います。 f:id:developer-hiro-east9-hey-world:20161028182154p:plain f:id:developer-hiro-east9-hey-world:20161028182201p:plain iPhoneなどスマホは情報表示が狭いためファーストインプレッション時は非表示の方が良いと感じました。

  3. ある程度怖話の操作に慣れてくると、他人が書いたコメントを直感的に見たい場合が多くなりました。

  4. 既に怖いを選択している場合は、取消すボタンに変更した方が良いと感じます。 f:id:developer-hiro-east9-hey-world:20161028184929p:plain

  5. 怖話を使って見て、自分の好きな話を探すのに時間を費やしました。
    マイページにあなたにオススメの話一覧などの機能があれば便利だと思いました。

改善策

  1. ハンバーガーメニューにしてしまうとユーザビリティが落ちてしまうので内容をカテゴライズしたあとjQueryを利用し下記のようなサイトのナビバーを実装したいです。 liginc.co.jp

  2. 以前作ったサイトでスクロールダウンのボタンも入っていますが、fadeIn(),fadeOut()などの簡単なjavascript(CoffeeSctipt)で実装できます。 f:id:developer-hiro-east9-hey-world:20161028184031g:plain

  3. コメント領域をクリックすると、ページ内ジャンプで話のコメント一覧に飛ばせそうです。

  4. ボタンのテキストをフラグを立てて選別します。
  5. 過去のコメントや購読している読者、投稿した話などからお勧めを割り出せるように勉強します。

感想など

SNSとの連携、ログイン機能(deviceでのomniauthかな)、特にネタバレ注意など「凄っ!!」と感じる機能が充実しており
全体的に細かな個所まで仕上がっていると感じました。

また、怖話のハロウィンverも見てみたい。

PS.東京のハロウィンは凄そう。ニュースでしか見たことないけれど。

怖話を使ってみた感想。

ユーザー視点から怖話を使ってみた感想を書こうと思います。

まず怖話とは?

世界最大の怖い話サイト

kowabana.jp

まず、莫大な量の怖い話、怖い漫画があります。

kowabana.jp

また、他にもオーパーツやUFO,宇宙人などの話もあります。

これがまた面白くて仕事の合間に読んだりもしています。

iPhone アプリもあるよ。

使ってみた感想。

操作も非常に簡単で、Twitter,Facebook,Gooleアカウントでログイン出来るので気軽に始める事が出来ました。

クオリティーの高い怖話、怖話漫画も多く時間を忘れて話に夢中になりました。

自分の一押し。 kowabana.jp

投稿するのも簡単

自分も話を投稿しようとしましたが、自分の知っている話は既にありそうなので地元の心霊スポットを投稿しました。

投稿するのも簡単でログイン後、投稿したい内容の以下の投稿のボタンから出来ます。

f:id:developer-hiro-east9-hey-world:20161026232855p:plain

マイページ機能があり自分の情報、メッセージを一目で確認できる。

f:id:developer-hiro-east9-hey-world:20161026233522p:plain

簡単な操作で気に入った話にコメントや「怖い」をつけたり、お気に入りの作者を見つけたら購読も出来る。

一言で感想をまとめると

膨大な情報量にも関わらず、必要な情報は一目で確認できるし、シンプルで使いやすくユーザビリティに優れていると感じました。

話のクオリティー、使い勝手の良さから 次々と怖い話に集中でき、気づけば日付が過ぎていた。コワイーーーー

これから怖話でしたい事。

いつか怖話オブザイヤーに受賞できる話を書いてみたい。

オーパーツを見つけたら、まずは怖話に投稿する。

近所の人が宇宙人じゃないかと噂があるので、正体を探って怖話に投稿したいと思いま.... おっと、誰か来たようだ。

次回から技術面で改善できる場所を探りたいと思います。

CSSの基本を理解する。

「フロントサイドも出来るようになりたい。」

とずっと心の中で思い続けていました。

Rails TutorialでもデザインのベースはBootstrapでしたが CSS(SCSS)で ハマる。ハマる。
何か独自のWebサービスを作ろうと思っても まず「デザインができない。」

フロントサイドはもっぱらBootstrapに頼りっきりで
作ったアプリはなんかこう 全部似てる
だからと言ってBootstrapも上手くカスタム出来ない。

そしてまたこう思う訳です。

「フロントサイドも出来るようになりたい。」

そして今日、CSSの勉強を通じてなるほどと思った事などをまとめようと思います。

まず、私はCSSでWebサイトのレイアウト組み+装飾の基本プロセスがまるでわかっていなかった。

paddingやmargin、floatなど使い方は知っているが、どのタイミングで使うのが正しいのか?
そもそもレイアウトってどうやって組んでるの?
とか色々な疑問が少しずつ消化出来た。

以下まとめ↓

サイトレイアウトの基本プロセス

  1. CSSの初期化
  2. レイアウトのベースを設定
  3. レイアウトを組む
    • メイン
    • サイドバー
    • フッター
  4. ヘッダーも作ってみる。

参考 www.webcreatorbox.com

1 CSSの初期化。

まずWebサイトは様々なブラウザで表示される。
そのため同じCSSを読み込んでも異なるブラウザごとに様々な装飾の違いが出てくる。
まず初めにそれをリセットする。

/* CSSリセット */
html,body,div,span,object,iframe,h1,h2,h
3,h4,h5,h6,p,blockquote,
pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,
strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,
figure,footer,header,hgroup,menu,nav,section,summary,time,mark,
audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;font-weight:normal;}
body{line-height:1}article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}
ul{list-style:none}blockquote,q{quotes:none}blockquote:before,
blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;
font-size:100%;vertical-align:baseline;background:transparent}
del{text-decoration:line-through}abbr[title],dfn[title]
{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
margin:1em 0;padding:0}input,select{vertical-align:middle}

または、 Normalize.css をセットする。

2 レイアウトのベースのスタイルとなる背景とフォントを決める

body{
     background: #CCC
     font: 16px/20px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'メイリオ',Meiryo,Helvetica,Arial,Sans-Serif;
     color: #666;
}

3 レイアウトを組む(Noneレスポンシブ)

まず基本となるレイアウト幅を決め中央に表示する。

#wrapper{
     width: 960px;
     margin: 0 auto;
}

これでブラウザでウィンドウ幅を広げても中央に表示される。

2カラムのレイアウトに決定。

#main{
     width: 670px;
     float: left;
     margin-right: 30px;
}
 
#side{
     width: 260px;
     float: left;
}

footer:before{
    content: "";
    display: table;
    clear: both;
}

#wrapper(親要素)の幅は960pxなので2カラムの場合、子要素(#main)(#side)の幅を足して960pxにします。

フッターについて

float を使ってブロック要素を横並びにした場合は、きちんと解除してあげないとおかしな表示になってしまいます。
フッター要素の手前に擬似要素を作成し、そこに clear:both; を適用させて解除する方法を使っています。
footerに直接clear:both; を適応すると、マージンが効かなくなるなどの困ったことが起こるので注意が必要です。

4 ヘッダーも作ってみる。

header .logo{float: left;}
 
nav{
     float: right;
     margin-top: 35px;
     font-size: 125%;
}
     nav li{
          display: inline;
          margin-left: 30px;
     }
     nav a{
          color: #666;
          text-decoration: none;
     }
     nav a:hover{color: #69c;}

header{
     margin: 50px 0 15px;
     overflow: hidden;
}

先ほどとは別の方法でFloatを解除してみましょう。今回は要素を囲んでいる header に overflow: hidden; をプラスするだけなので簡単ですね!

基本的なCSSのレイアウトの組み方を学べてとても勉強になりました。

これからもう少し凝ったデザインが出来るようにCSSでアイコン作ったりしてみます。

HTMLのアウトラインの復習。

アウトラインを正しく書けばフィードも上手くいく。

アウトラインはセクション(区切り)で分類する。 つまりページ内の文章で章・節・項などにまとめられるところを明確に分類する。

セクションを表すタグは4種類。

article
aside
nav
section

article

主に1つのブログのエントリー、1つの新聞記事や雑誌の記事など、単体で完結するセクション。

aside

主に補足情報・広告など、内容との関係性はあるが、本筋から外れる内容を表すセクション。

nav

主にサイトの主要なナビゲーションを表すセクション。

section

上記のどれにも当てはまらないセクション。


復習をするまでarticleとsectionの違いに戸惑いを感じていました。 この学習を終えarticleとsectionの区切りを把握できました。 HTMLでマークアップを終え、サイトの全体像が見えたらある程度自信を持ってアウトラインを入れられました。

個人的によく忘れるターミナルコマンド

curl(Client for URLs)でダウンロードする。

curl http://example.com -o foo.html

-o オプションでダウンロード。

openコマンドで現在のディレクトリを開く。

open .
open hoge.pdf
open http://www.facebook.com

.で現在のディレクトリを開く。

Copy

cp foo /tmp

上記ではfooファイルを/tmpディレクトリにコピーしています。

cp foo bar

ファイル名を指定すればその名前でコピーされます。fooの複製barが出来ました。

cp -r foo /tmp

-rオプションを付ければディレクトリを丸ごとコピーできます。

作業の自動化

#!/bin/sh
echo hello

上記をecho-helloというファイル名で保存

#! はシバン

chmod u+x echo-hello

ユーザー実行権限(u+x)