Homebrew で Apache, MySQL, Phpbrew, rbenv, nodebrew, pyenv をお手柔らかにお願いします

即効性の回答を提供するのでは無く、何故それを使用するに至ったのか、それを使ってどうだったか、という方面に重きを置いています。(キリッ!
なので、藁をもすがる思いで辿り着いた方には非常に申し訳無く思います。
いや…その…自分がやりたいのは「環境構築」ではなく、「そこから先」なんですがねぇ…ヤレヤレですわ…いやーフロントエンドマターなのか、アーキテクトマターなのか何ともですが、いずれにせよ、この辺を事も無げにできる方々ってスゴイ、と。

補足)個人用チートシート(もどき)

…と言えば良いのだろうか…忘れがちな(覚える気の無い)コマンド・スクリプトをひとまとめにしておく様な…
クラウドの各種様々なモノを使って備忘録的なモノを作っても、「見るだけだから」的な事が多く、両端を選択して(マウスで操作しないとはいえ)コマンドやスクリプトをコピペする行為が面倒なので…
その様な面から言うと、コレは作業時のログなどを「貼り付ける」ためには全く役に立たない…その様な作業には nvALT を使用している。
逆にマウスを操作しないと扱えないシロモノになってしまったが。

仕組み、モロモロは下記。

  • HTMLファイル的なモノ…強いて言えば Blosxom のデータ形式…1行目がタイトル、2行目以降が本文…的なモノをひとまとめに表示するPHPスクリプト…
  • …だったが、Finder で QuickLook すると文字化けするので、最低限の HTML の形式を整えた… title タグがタイトルの表示用文字列、 body タグを本文に変更
  • 縦長でもシングルページで行き来するのに不便が生じない様に Javascript でスムーススクロール
  • クリックで文字列の選択が可能
  • 軽い Skeleton を使用
  • ファイル名は 999.HOGE.html で、数値部分の 999 が表示順、文字列部分の HOGE がスムーススクロール用の name アンカータグ
  • せめて Jade 程度はと思い使ってみたが、何とも面倒な気がしたので使わず、生の HTML で
  • Markdown は細かな記述ができないので不採用…
  • 面倒だが、 Apache を立ち上げるなり、 php -S localhost:8000 の様にビルトインウェブサーバーにする必要あり

例えば、下記の様なHTMLタグを埋め込むと、埋め込まれた文字列をマウスクリックする事で自動で「選択」される…「コピー」はされない。

<b class="codeSelect">ここがマウスクリックで自動的に選択されるよ選択されるだけだよ</b>

および、左メニューバーは下記の様な HTML を生成して…

  :
<h1 id="menu_contents">contents</h1>
<ul>
  <li><a href="#0002-SQL">SQL</a></li>
  <li><a href="#0003-homebrew">Homebrew</a></li>
   :
</ul>
  :

右側本文は下記の様に、タイトルをクリックする事でトップに戻る & スムーススクロールで、を実現している。

  :
<h1 id="0002-SQL"><a href="#menu_contents">SQL</a></h1>
<table>
<tr><td>コンソール起動</a></td><td>
<dl>
<dt>Rootユーザで起動</dt>
  :

この仕組み、以前は一つのHTMLファイルを使っていたのだが、便利な様な不便な様なモヤモヤした状態だったので、今回改めて書き直した。
でもまーこんなのドヤリングする程のモンでもねーしフツーみんなこーゆコトするし…と思うので、各スクリプトをどこかにアップする事は特に考えていない。

ディレクトリ構成

return to toc

テキストデータも画像データも同一ディレクトリ( ./data/ )に格納。
jQuery はネットに繋がらない環境下でも不自由無く動く様にローカルを参照している。

.
├── asset/
│   ├── index.css
│   ├── index.js
│   ├── jquery-1.12.4.min.js
│   ├── normalize.min.css
│   └── skeleton.css
├── data/
│   ├── 001.SQL.html
│   ├── 002.foo.html
│   ├── 002.foo.001.jpg
│   ├── 003.var.html
│   :
└── index.php

index.php

return to toc

<?php
  define('DATA_DIR', './data/');
  define('DATA_PATTERN', DATA_DIR.'*.html');

  $CONTENTS = array();
  $files = glob(DATA_PATTERN);
  asort($files);
  foreach ($files as $value) {
    $filename = substr($value, strlen(DATA_DIR));
    $tmp = explode('.', $filename);
    $ancher = sprintf('%04d-%s', (int)$tmp[0], $tmp[1]);

    $data = file_get_contents($value);
    $title = $body = '';

    $match = array();
    preg_match("/<title>(.*?)<\/title>/", $data, $match);
    $title = $match[1];

    $match = array();
    preg_match("/<body>(.*?)<\/body>/s", $data, $match);
    $body = $match[1];

    $CONTENTS[] = array(
        'title' => $title,
        'ancher' => $ancher,
        'body' => trim($body)
      );
    }
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>個人的めも</title>
  <link rel="stylesheet" href="asset/normalize.min.css" />
  <link rel="stylesheet" href="asset/skeleton.css" />
  <link rel="stylesheet" href="asset/index.css" />
  <script src="asset/jquery-1.12.4.min.js"></script>
  <script src="asset/index.js"></script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="three columns left_menu">
      <h1 id="menu_contents">contents</h1>
      <ul>
        <?php foreach ($CONTENTS as $value) : ?>
          <li><a href="#<?php echo $value['ancher']; ?>"><?php echo $value['title']; ?></a></li>
        <?php endforeach; ?>
      </ul>
    </div>
    <div class="nine columns right_body">
      <?php foreach ($CONTENTS as $value) : ?>
        <h1 id="<?php echo $value['ancher']; ?>"><a href="#menu_contents"><?php echo $value['title']; ?></a></h1>
        <?php echo $value['body']; ?>
      <?php endforeach; ?>
    </div>
  </div>
</body>
</html>

asset/index.js

return to toc

$(function() {
  $('a[href^=\\#]').click(function() {
    var speed = 900;
    var href= $(this).attr('href');
    var target = $(href == '#' || href == '' ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
  $('.codeSelect').click(function(){
    var range = document.createRange();
    range.selectNodeContents(this);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  });
});

asset/index.css

return to toc

実際には Stylus より生成している。
だからと言って Gulp まで動員する必要性を感じなかったので、都度コマンドラインからコンパイルしている。

# 開発時、ソースマップ込み
$ stylus --watch --sourcemap-inline index.stylus
# 本番時
$ stylus --watch --compress index.stylus

下記、 Stylus が生成した CSS をコチラで適宜インデントを追加している。

body, html { margin-bottom: 300px; font-size: 12px; background: #f0f0f0; color: #606060; }
h1, h2, h3, h4, h5, h6 { color: #707070; }
  h1 { margin-top: 2.0em; }
a { text-decoration: none; }
  a:hover { color: #808080; }
table, tr, td { margin: 0; padding: 0; vertical-align: top; border-spacing: 0; border-collapse: collapse; }
  tr:hover { background: rgba(135, 206, 248, 0.1); -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
    table td:first-child { text-align: right; padding-right: 1.0em; white-space: nowrap; }
ul, ol { margin-bottom: 0; margin-left: 0.5em; padding-bottom: 0; }
li { margin-bottom: 0; padding-bottom: 0; text-indent: -0.5em; }
dl { margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; margin-left: 0.5em; }
  dl dd { margin-left: 1.0em; }
code { margin: 0; padding: 0; font-family: Consolas, 'Courier New', Courier, Monaco, monospace; white-space: normal; border: none; }
b.codeSelect { font-family: Consolas, 'Courier New', Courier, Monaco, monospace; color: #808080; }
span.anyvalue { color: #a0a0a0; }
pre { margin-top: 0; padding-top: 0; margin-left: 0.5em; line-height: 1.4em; font-family: Consolas, 'Courier New', Courier, Monaco, monospace; }

/* left side menu */
.left_menu { padding-right: 1.0em; padding-bottom: 3.0em; text-align: right; border-right: 1px solid #87cef8; }
  .left_menu h1 { font-size: 2.0em; }
    .left_menu ul { list-style-type: none; }
      .left_menu ul li { font-size: 14px; }

/* right side body */
.right_body { margin-top: 2.0em; }
  .right_body h1 { font-size: 2.0em; }
  .right_body h2 { margin-top: 1.0em; margin-bottom: 0.5em; padding-top: 0; padding-bottom: 0; font-size: 1.4em; }
  .right_body h3 { margin-top: 1.0em; margin-bottom: 0.5em; padding-top: 0; padding-bottom: 0; font-size: 1.2em; }
  .right_body table tr td p { margin-bottom: 0; }
  .right_body .goto_top { text-align: right; }
  .right_body .goto_top a { color: #808080; }
    .right_body .goto_top a:hover { color: #87cef8; }

本文例

return to toc

要は HTML5 で。
下記、ファイル名は 001.SQL.html で、添付画像と比較して途中を大幅に省略している。
また、前述した様に title タグが画面上に表示されるタイトル、 body タグが画面上に表示される本文になる。

ちなみに、

<b class="codeSelect">mysql -u <span class="anyvalue">USER</span> -p <span class="anyvalue">PASSWORD</span></b>

と、上記の例だと USERPASSWORD は、その時々によって入力値が変わるので、 CSS で微妙に色を変更している。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>SQL</title>
</head>
<body>

<table>
  <tr><td>コンソール起動</a></td><td>
    <dl>
      <dt>Rootユーザで起動</dt>
      <dd>$ <b class="codeSelect">mysql -u root</b></dd>
      <dt>USERユーザで起動</dt>
      <dd>$ <b class="codeSelect">mysql -u <span class="anyvalue">USER</span> -p <span class="anyvalue">PASSWORD</span></b></dd>
    </dl>
  </td></tr>
  <tr><td>一連の動作</a></td><td>
    <dl>
      <dt>ユーザ作成</dt>
      <dd>
        &gt; <b class="codeSelect">GRANT ALL PRIVILEGES ON *.* TO `<span class="anyvalue">USER</span>`@`<span class="anyvalue">localhost</span>` IDENTIFIED BY '<span class="anyvalue">PASSWORD</span>';</b><br />
        &gt; <b class="codeSelect">FLUSH PRIVILEGES;</b>
      </dd>
      <dd>パスワードは16文字まで</dd>
      <dt>データベース作成</dt>
      <dd>
        &gt; <b class="codeSelect">CREATE DATABASE `<span class="anyvalue">DATABASE</span>` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;</b><br />
        &gt; <b class="codeSelect">FLUSH PRIVILEGES;</b>
      </dd>
      <dt>権限付与</dt>
      <dd>
        &gt; <b class="codeSelect">GRANT ALL ON `<span class="anyvalue">DATABASE</span>`.* to `<span class="anyvalue">USER</span>`@`<span class="anyvalue">localhost</span>`;</b><br />
        &gt; <b class="codeSelect">FLUSH PRIVILEGES;</b>
      </dd>
    </dl>
  </td></tr>
</table>

</body>
</html>

Menu of this post

  1. 1. はじめに…
  2. 2. Homebrew で Apache, MySQL, Phpbrew, rbenv, nodebrew, pyenv をお手柔らかにお願いします
  3. 3. ついでに VirtualBox, Vagrant で PHP 5.3, MySQL 5.0 もお手柔らかにお願いします
  4. 4. お手柔らかにお願いしてのモロモロ
  5. 5. 補足)個人用チートシート(もどき)