Linux(Debian)
VirtualBox に Debian を インストールする。
Macのバージョン macOS Sierra 10.12.4 VirtualBox バージョン 5.1.18 r114002 (Qt5.6.2)
debian-8.7.1-amd64-netinst
VirtualBoxにDebianの仮想環境を構築する。
-
- 言語の選択: 日本語
- 場所の選択: 日本
- 場所の選択: 日本
- キーボードの選択: 各キーボードレイアウトに合わせる。今回は日本語
- ホスト名: debian
- ドメイン名: 各自のドメイン名に設定する。今回は local
- rootのパスワード: 各自パスワードを設定する。
- rootのパスワード: 各自パスワードを設定する。
- ユーザーとパスワードのセットアップ: 各自設定する。
- 新しいユーザーの本名: hirotaka
- アカウントのユーザー名は hiro
- ここでセットアップしたユーザーはrootとは別の管理者権限のない作業ユーザー。
- ディスクのパーティショニング: 今回はディスク全体を使う。
- システムを止めずにディスクの追加、論理ボリュームの拡張、暗号化を行う場合はLVM,暗号化LVMを選択する。
- ティショニングするドライブを選択する。
- パーティショニングの構成: 今回は全てのファイルを１つのパーティションにする。
- homeなどを分離する場合は要件にあったものを選択。
- Debianアーカイブミラー: 日本（現在住んでいる国 or 最も近い場所）
- 国内のDebianアーカイブミラー: 今回は ftp.jp.debian.org
- HTTPプロキシの情報: 今回は必要ないので空白
- 利用したパッケージの統計値を開発者に匿名で提出するか選びます。
- ソフトウェアのインストール。
パッケージ管理システム(apt)の基本操作
===追加===
‘’‘新しいソフトウェアのインストール’‘'（root権限が必要）
# apt-get install ''パッケージ名''‘’‘ソースパッケージのダウンロード’‘’
# apt-get source ''パッケージ名''‘’‘ソースパッケージをコンパイルする為に必要なパッケージのインストール’‘'（root権限が必要）
# apt-get build-dep ''パッケージ名''=== 更新 ===
‘’‘リポジトリの更新’‘'（root権限が必要）
# apt-get update‘’‘インストール済みのソフトウェアの更新’‘'（root権限が必要）
# apt-get upgrade‘’‘ディストリビューションのアップグレード’‘'（root権限が必要）
# apt-get dist-upgrade=== 検索・情報表示 ===
‘’‘パッケージの検索’‘’
# apt-cache search ''検索キーワード''‘’‘特定パッケージの情報表示’‘’
# apt-cache show ''パッケージ名''=== 削除 ===
‘’‘特定パッケージの削除’‘'（root権限が必要）
# apt-get remove ''パッケージ名''‘’‘特定パッケージの設定ファイルを含めた削除’‘'（root権限が必要）
# apt-get purge ''パッケージ名''‘’‘不要なパッケージの自動削除(依存されていないライブラリ等)’‘'（root権限が必要）
# apt-get autoremove
Webアプリケーションを動かすのに必要なパッケージをインストールして設定する。
1. sudo ワンショットでユーザーがスーパーユーザーの特権レベルを利用出来る。 2. SSH 暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコル。 3. SSL インターネット上で通信を暗号化する。第三者によるデータの盗聴や改ざんなどを防ぐ。 4. MySQL 人気があるデータベース。
=== sudo ===
—rootユーザーでログイン—
- sudoをインストール
# apt-get install sudo- sudoを使えるユーザーを登録する
# adduser "ユーザー名" sudo—rootユーザーをログアウト後、特権のない別のユーザーでログイン—
$ sudo apt-get install vim=== SSH ===
$ sudo apt-get install ssh- virtualboxの設定
環境設定 > ネットワーク > ホストオンリーネットワーク で 固定したいIPのゲートウェイを追加。
とりあえず今回はdefaultの192.168.56.1を設定。
次にVM(インストールしたDebian)にホストオンリーネットワークを設定。
- Debianのネットワーク設定
/etc/network/interfacesにホストオンリーネットワークのゲートウェイと静的IPアドレスを追加
$ sudo vim /etc/network/interfacesauto eth1
iface eth1 inet static
address 192.168.56.101
netmask 255.255.255.0
gateway 192.168.56.1MacのterminalからDebianのアカウントにログイン
$ ssh debianのusername@192.168.56.101(設定した静的IPアドレス)#Macのterminal
- rootでのSSHログインを禁止。
$ sudo vim /etc/ssh/sshd_configPermitRootLogin without-password (パスワードではログイン禁止)になっているので
PermitRootLogin no に編集する。（SSHでのログインも禁止）# /etc/init.d/sshd restartでSSHの設定を反映します。Macからrootでログインすると「Permission denied, please try again.」というアラートが表示され、rootでのSSHログインができなければOKです。
Debian(サーバー)に ~/.ssh フォルダをパーミッション付きで作成
$ pwd# Debianの現在のパス/home/user
$ sudo mkdir -m 700 .ssh$ ssh-keygen -t rsa -f debian_rsa# Mac（クライアント）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があればOKauthorized_keys ファイルのパーミッションは 0600 に変更
$ sudo chmod 600 authorized_keysAuthorizedKeyを有効にしてパスワード認証を禁止する。
$ sudo vim /etc/ssh/sshd_config#PasswordAuthentication yes
PasswordAuthentication no (パスワード認証の設定をコメントアウトして禁止する。)SSHの設定を反映します。
sudo /etc/init.d/ssh restartパスワード認証ログインを禁止したのでPermission denied (publickey).になる。
デフォルトの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)ではログインできない。
Mac(クライアント)から初回のみ-iオプションで秘密鍵を指定する。
$ ssh -i ~/.ssh/debian_rsa username@192.168.56.101(設定した静的IPアドレス) -p 2288macOS 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でログインできる。
=== SSL ===
$ sudo apt-get install openssl
- SSLとは
インターネットなどのコンピュータネットワークにおいてセキュリティを要求される通信を行うためのプロトコルである。主な機能として、通信相手の認証、通信内容の暗号化、改竄の検出を提供する。
使い方など詳しいことは次の記事でNginxと一緒にまとめます。
- === MySQL ===
MySQL :: Download MySQL APT Repository
$ mkdir ~/srcsrcフォルダを作成
$ cd ~/src今作ったsrcフォルダに移動
$ wget https://dev.mysql.com/get/mysql-apt-config_0.8.4-1_all.debwgetで先ほどコピーしてきたURLからdebパッケージをダウンロードする。
$ sudo dpkg -i mysql-apt-config_0.8.4-1_all.debダウンロードしたdebパッケージをdpkgでインストールする.。
$ sudo apt-get updateリポジトリをアップデート
$ sudo apt-get install mysql-server最新のMysqlをインストールMySQLのrootパスワードを設定します。
- 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 -atnMySQLサーバは3306番ポートを利用します。netstatコマンドを実行して、 3306番ポートが開かれているか確認できます。
$ mysqladmin -u root -p pingMySQLサーバの動作は、mysqladminコマンドを使っても確認することが できます。
- MySQLクライアントの操作
$ mysql -u root -pMySQLサーバに接続してコマンドラインで操作をする
- データベースへの接続、操作
$ mysql -u root -pMySQLサーバに接続してコマンドラインで操作をする
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,.....);
世界最大の怖い話サイト
まず、莫大な量の怖い話、怖い漫画があります。
また、他にもオーパーツやUFO,宇宙人などの話もあります。
これがまた面白くて仕事の合間に読んだりもしています。
iPhone アプリもあるよ。
怖話の改善案をまとめようと思います。
まず怖話とは？
世界最大の怖い話サイト
まず、莫大な量の怖い話、怖い漫画があります。
また、他にもオーパーツやUFO,宇宙人などの話もあります。
これがまた面白くて仕事の合間に読んだりもしています。
iPhone アプリもあるよ。
自分でも出来そうなところからまとめます。
改善案(PC、スマホのブラウザで使用した場合)
ナビバーをもっとシンプルにまとめると尚良いと思います。 確かにiPhoneなどの端末ではスクロールはしやすいかもしれませんが PCでの操作になるとスクロールのメリットがあまり感じないかもしれないです。
トップに戻るスクロールアップボタンは下にスクロールされ始めてから表示した方が良いと思います。
iPhoneなどスマホは情報表示が狭いためファーストインプレッション時は非表示の方が良いと感じました。ある程度怖話の操作に慣れてくると、他人が書いたコメントを直感的に見たい場合が多くなりました。
既に怖いを選択している場合は、取消すボタンに変更した方が良いと感じます。
怖話を使って見て、自分の好きな話を探すのに時間を費やしました。
マイページにあなたにオススメの話一覧などの機能があれば便利だと思いました。
改善策
ハンバーガーメニューにしてしまうとユーザビリティが落ちてしまうので内容をカテゴライズしたあとjQueryを利用し下記のようなサイトのナビバーを実装したいです。 liginc.co.jp
以前作ったサイトでスクロールダウンのボタンも入っていますが、fadeIn(),fadeOut()などの簡単なjavascript(CoffeeSctipt)で実装できます。
コメント領域をクリックすると、ページ内ジャンプで話のコメント一覧に飛ばせそうです。
- ボタンのテキストをフラグを立てて選別します。
- 過去のコメントや購読している読者、投稿した話などからお勧めを割り出せるように勉強します。
感想など
SNSとの連携、ログイン機能(deviceでのomniauthかな)、特にネタバレ注意など「凄っ!!」と感じる機能が充実しており
全体的に細かな個所まで仕上がっていると感じました。
また、怖話のハロウィンverも見てみたい。
PS.東京のハロウィンは凄そう。ニュースでしか見たことないけれど。
怖話を使ってみた感想。
ユーザー視点から怖話を使ってみた感想を書こうと思います。
まず怖話とは？
世界最大の怖い話サイト
まず、莫大な量の怖い話、怖い漫画があります。
また、他にもオーパーツやUFO,宇宙人などの話もあります。
これがまた面白くて仕事の合間に読んだりもしています。
iPhone アプリもあるよ。
使ってみた感想。
操作も非常に簡単で、Twitter,Facebook,Gooleアカウントでログイン出来るので気軽に始める事が出来ました。
クオリティーの高い怖話、怖話漫画も多く時間を忘れて話に夢中になりました。
自分の一押し。 kowabana.jp
投稿するのも簡単
自分も話を投稿しようとしましたが、自分の知っている話は既にありそうなので地元の心霊スポットを投稿しました。
投稿するのも簡単でログイン後、投稿したい内容の以下の投稿のボタンから出来ます。
マイページ機能があり自分の情報、メッセージを一目で確認できる。
簡単な操作で気に入った話にコメントや「怖い」をつけたり、お気に入りの作者を見つけたら購読も出来る。
一言で感想をまとめると
膨大な情報量にも関わらず、必要な情報は一目で確認できるし、シンプルで使いやすくユーザビリティに優れていると感じました。
話のクオリティー、使い勝手の良さから 次々と怖い話に集中でき、気づけば日付が過ぎていた。コワイーーーー
これから怖話でしたい事。
いつか怖話オブザイヤーに受賞できる話を書いてみたい。
オーパーツを見つけたら、まずは怖話に投稿する。
近所の人が宇宙人じゃないかと噂があるので、正体を探って怖話に投稿したいと思いま.... おっと、誰か来たようだ。
次回から技術面で改善できる場所を探りたいと思います。
CSSの基本を理解する。
「フロントサイドも出来るようになりたい。」
とずっと心の中で思い続けていました。
Rails TutorialでもデザインのベースはBootstrapでしたが CSS(SCSS)で ハマる。ハマる。
何か独自のWebサービスを作ろうと思っても まず「デザインができない。」
フロントサイドはもっぱらBootstrapに頼りっきりで
作ったアプリはなんかこう 全部似てる
だからと言ってBootstrapも上手くカスタム出来ない。
そしてまたこう思う訳です。
「フロントサイドも出来るようになりたい。」
そして今日、CSSの勉強を通じてなるほどと思った事などをまとめようと思います。
まず、私はCSSでWebサイトのレイアウト組み＋装飾の基本プロセスがまるでわかっていなかった。
paddingやmargin、floatなど使い方は知っているが、どのタイミングで使うのが正しいのか?
そもそもレイアウトってどうやって組んでるの？
とか色々な疑問が少しずつ消化出来た。
以下まとめ↓
サイトレイアウトの基本プロセス
- CSSの初期化
- レイアウトのベースを設定
- レイアウトを組む
- メイン
- サイドバー
- フッター
- ヘッダーも作ってみる。
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;
}
これでブラウザでウィンドウ幅を広げても中央に表示される。
２カラムのレイアウトに決定。
#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のアウトラインの復習。
アウトラインを正しく書けばフィードも上手くいく。
アウトラインはセクション(区切り)で分類する。 つまりページ内の文章で章・節・項などにまとめられるところを明確に分類する。
セクションを表すタグは４種類。
article aside nav section
article
主に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)
