2018-03-28

ウェブカツ！！の HTML・CSS部初級を勉強した

ウェブカツ！！の HTML・CSS部初級を全て学習したので学んだ内容をメモ。

ウェブカツ!! - 初心者向けオンラインプログラミング学習サイト -

要素の「ボックス」について

HTML要素は「ボックス」と呼ばれる領域を生成する。
ボックスは content, padding, border, margin から構成される。

content: 要素の本体
padding: ボックスの内側
margin: ボックスの外側
border: margin と padding の境界

ボックスはブロックレベル要素とインライン要素に大別できる。
それぞれの要素は以下の違いを持つ。

ブロックレベル要素
　横幅一杯のボックスを生成する。
インライン要素
　内部にブロックレベル要素は入れられない。
また、上下の margin を設定できない。

position

css の position プロパティは 4種類存在する。

static
　デフォルトの設定値
absolute
　top, right, left, bottom で絶対的な位置を指定
relative
　top, right, left, bottom でボックス位置から相対的な場所に配置
fixed
　absolute と一緒だが、スクロールしても画面から消えない

overflow:hidden による float 解除方法

親要素に overflow:hidden を付けると、子要素の float が解除される。

2018-03-23

ssh の config ファイル作成（個人用メモ）

ssh の config ファイルを作成するスクリプトを作った。

cd ~
if [ ! -d ~/.ssh ]; then
    echo "~/.ssh ディレクトリを作成しました"
    mkdir ~/.ssh
fi

if [ ! -f ~/.ssh/config ]; then
    echo "config ファイルを作成しました。適宜内容を編集してください"
    touch ~/.ssh/config
    chmod 700 ~/.ssh/config
    echo "Host hostname" >> ~/.ssh/config;
    echo "  User username" >> ~/.ssh/config;
    echo "  HostName hostname" >> ~/.ssh/config;
    echo "  IdentityFile ~/.ssh/path-to-id_rsa" >> ~/.ssh/config;
    echo "" >> ~/.ssh/config;
fi

echo '以下コマンドで ssh ファイルを生成してください。';
echo 'ssh-keygen -t rsa -b 4096 -C "your_email@example.com"';

参考サイト

お前らのSSH Keysの作り方は間違っている - Qiita
~/.ssh/configについて - Qiita

2018-03-20

Rails を Linux 環境にインストールするまで

Mint Linux 18.3 の PC にインストール。

準備

以下のコマンドを実行していく。
途中、 rbenv install 等でエラーを吐く場合は、エラーメッセージを確認しつつ足りないパッケージを調べながら進める。
gccのエラーについての対処は知らない点が多かったのでこちらにまとめた。

cd ~
# rbenv インストール
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH=$HOME/.rbenv/bin:$PATH' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
source ~/.bashrc

# ruby-build インストール
mkdir -p ~/.rbenv/plugins
cd ~/.rbenv/plugins
git clone git://github.com/sstephenson/ruby-build.git

source ~/.bashrc

# rbenv で ruby をインストール & 環境全体で利用する ruby のバージョンを設定
rbenv install 2.5.0
rbenv global 2.5.0

# bundler と rails をインストール
rbenv exec gem install bundler
rbenv exec gem install rails

# rails new を実行する際に必要な sqlite3 を導入
sudo apt-get install libsqlite3-dev
rbenv exec gem install sqlite3

プロジェクトの作成

あとは以下のコマンドでプロジェクトを作成できれば成功。

rbenv exec rails new myapp

2018-03-20

gcc: error した時の対処法

rbenv とかでたまに gcc 関連のエラーが出るので対処法まとめ。

gcc: error: unrecognized command line option '-V' は無視

-V オプションは古い gcc でのみサポートされているオプションで、 gcc のバージョンが古いかどうかを判断するために利用されている可能性が高いので、それほど重要ではない。

cannot find ****.o: No such file or directory と出た場合

****.o が見つからないそうなので、インストールする。
どのパッケージに含まれているかを調べるためには apt-file を利用する。

sudo apt-file search ****.o

apt-file でパッケージ一覧が表示されるので、それっぽいパッケージ名をググりながら、いずれかをインストールする。

とりあえず現状は上記の事柄を意識しつつエラー文章を読んでいけば何とかなってます。

2018-01-22

Yeoman でカスタムジェネレータを作る

yeoman について

アプリケーションの構成（ファイルやディレクトリ）をコマンド一発で作るツール。

簡単なジェネレーターを作る

以下のようなジェネレータを作る。
ジェネレータ名： sample
コマンド：
１）yo sample
２）yo sample:files

実行例は以下の通り。

# myappディレクトリを作成し、index.html, index.js, index.css を作成するコマンド
$ yo sample myapp

# 作成できたか確認
$ tree myapp
myapp
└── public
    ├── css
    │   └── index.css
    ├── index.html
    └── js
        └── index.js

# home.html, home.js, home.css を作成するコマンド
$ yo sample:files home

# 作成できたか確認
$ tree .
.
└── public
    ├── css
    │   ├── home.css
    │   └── index.css
    ├── home.html
    ├── index.html
    └── js
        ├── home.js
        └── index.js

yeomanのインストール

始めに、yeoman の動作可能を準備する。
yeoman は node.js で動作するため、最初に node.js を以下からインストール。

https://nodejs.org/ja/

node.js を準備できたら必要なパッケージをインストールする。

npm install -g yo generator-generator

yo は yeoman ジェネレータを実行するツールで、generator-generator はジェネレータの雛形を作成するツール。

ジェネレータの雛形作成

準備が整ったので、早速ジェネレータを作成する。

# generator-sample のディレクトリを作成
mkdir generator-sample
cd generator-sample
# generator-generator で雛形作成、いくつか質問されるので、適宜入力する。
yo generator

generator-sample の雛形が完成するので、ディレクトリ構成を確認してみます。

generator-sample/
├── LICENSE
├── README.md
├── __tests__
│   └── app.js
├── generators
│   └── app
│       ├── index.js
│       └── templates
├── node_modules
│   └── (大量のディレクトリ) 
├── package-lock.json
└── package.json

雛形のうち、特に重要なのは generator/ ディレクトリ配下です。

ジェネレータは yo コマンドで呼び出された際、 generators/ 配下のディレクトリ名に基づいて動作します。
例えば "yo sample" コマンドを実行すると、 generator-sample/generators/app/index.js が実行されます。

ただし、app ディレクトリはデフォルトジェネレータと呼ばれる特殊なケースです。
普通は "yo sample:" とする事で、 generator-sample/generators//index.js が実行されます。

メインジェネレータを実装する

では雛形が完成したので、早速ジェネレータを作ります。
まず、generator-sample/generators/app/index.js を以下のように修正します。

'use strict';
const Generator = require('yeoman-generator');
const makeDir = require('make-dir');
const path = require('path');

module.exports = class extends Generator {

  constructor(args, opts){
    super(args, opts);
    // (1) コマンドライン引数を取得する
    this.argument('projectname', {type:String, required: true});
  };

  writing() {
    // (2) ディレクトリを作成する
    const root = this.options.projectname;
    makeDir.sync(root);
    makeDir.sync(root + '/public');
    makeDir.sync(root + '/public/js');
    makeDir.sync(root + '/public/css');


    // (3) テンプレートを作成する
    const name = "index";

    this.fs.copyTpl(
      this.templatePath('template.html'),
      this.destinationPath(root + '/public/' + name + '.html'),
      {name:name}
    );
    this.fs.copyTpl(
      this.templatePath('template.js'),
      this.destinationPath(root + '/public/js/' + name + '.js'),
      {name:name}
    );
    this.fs.copyTpl(
      this.templatePath('template.css'),
      this.destinationPath(root + '/public/css/' + name + '.css'),
      {name:name}
    );

    // (4) .yo-rc.json をプロジェクトのルートフォルダに作成する
    this.destinationRoot(path.join(this.destinationRoot(), '/' + root));
    this.config.save();
  }
};

順にコードを説明します。

(1) では、コマンドライン引数を取得します。
例えば "yo sample myapp" とすると、引数 projectname には "myapp" が代入されます。

(2) では、代入されたコマンドライン引数 projectname と同名のディレクトリを makeDir.sync(root) で作成しています。
さらに、その配下に "public", "public/js", "public/css" ディレクトリを作成しています。

(3) では、 this.fs.copyTpl コマンドでテンプレートファイル template.html を ejs形式で展開してコピーします。
現段階では、テンプレートファイルが存在しないため、 app/ 配下に templates ディレクトリを作成し、以下ファイルを配置して下さい。

<!-- generator-sample/generators/app/templates/templates.html -->
<!DOCTYPE html>
<html>
  <head>
    <title><%= name %></title>
    <meta charset='UTF-8'>
    <script src='./js/<%= name %>.js'></script>
    <link rel='stylesheet' href='./css/<%= name %>.css'></script>
  </head>

  <body>
    <h2><%= name %></h2>
  </body>
</html>

// generator-sample/generators/app/templates/templates.js
// <%= name %>.js

/* generator-sample/generators/app/templates/templates.css */
/* <%= name %>.css */

(4) では、 .yo-rc.json をプロジェクトのルートに作成しています。
.yo-rc.json はプロジェクトのルートを yeoman に記憶させるためのファイルです。
このファイルを作成しておけば、例えば public フォルダ内で "yo sample:files home としても正しい場所にファイルが作成されます。

これでメインジェネレーター機能は完成です。

最後に generator-sample/ に移動し、以下コマンドを実行して下さい。

$ npm link

これで generator-sample がローカルインストールされました。
ちなみに解除する場合は以下のコマンドで解除できます。

$ npm -g unlink generator-sample

では、任意のディレクトリに移動し、yo コマンドを確認して見て下さい。プロジェクト構成が "yo generate sample" と打つだけで作成されるはずです。

サブジェネレータを実装する

では次に "yo sample:files" を作成します。

まず、generators/files ディレクトリを作成し index.js を以下の内容で作成しましょう。

// generator-sample/generators/files/index.js
'use strict';
const Generator = require('yeoman-generator');

module.exports = class extends Generator {

  constructor(args, opts){
    super(args, opts);
    this.argument('filename', {type:String, required: true});
  };

  writing() {
    const name = this.options.filename;

    this.fs.copyTpl(
      this.templatePath('template.html'),
      this.destinationPath('public/' + name + '.html'),
      {name:name}
    );

    this.fs.copyTpl(
      this.templatePath('template.js'),
      this.destinationPath('public/js/' + name + '.js'),
      {name:name}
    );

    this.fs.copyTpl(
      this.templatePath('template.css'),
      this.destinationPath('public/css/' + name + '.css'),
      {name:name}
    );

  }

ディレクトリを作成する以外は app/index.js と一緒の内容ですので解説は省略します。
では、 templates/ ディレクトリを作成し、テンプレートを以下内容で作成しましょう。

<!-- generator-sample/generators/files/templates/templates.html -->
<!DOCTYPE html>
<html>
  <head>
    <title><%= name %></title>
    <meta charset='UTF-8'>
    <script src='./js/<%= name %>.js'></script>
    <link rel='stylesheet' href='./css/<%= name %>.css'></script>
  </head>

  <body>
    <h2><%= name %></h2>
  </body>
</html>

// generator-sample/generators/files/templates/templates.js
// <%= name %>.js

/* generator-sample/generators/files/templates/templates.css */
/* <%= name %>.css */

完成

これでジェネレーター完成です。

# myappディレクトリを作成し、index.html, index.js, index.css を作成
$ yo sample myapp

# 作成できたか確認
$ tree myapp
myapp
└── public
    ├── css
    │   └── index.css
    ├── index.html
    └── js
        └── index.js

# home.html, home.js, home.css を作成
$ yo sample:files home

# 作成できたか確認
$ tree .
.
└── public
    ├── css
    │   ├── home.css
    │   └── index.css
    ├── home.html
    ├── index.html
    └── js
        ├── home.js
        └── index.js

jshitaの日記

勉強したことを書いていきます。