【Ruby】レンサバ契約中のプランのせい！？ロリポップで起きた現象

ロリポップでRuby作業していたところ、ちょっとした問題が起きました。

魅力的なgemを見つけた時、以下のコマンドを使うはずです。

gem install gem名

これが使えなかったとしたら、どう思いますか。そしてそれが解決不能だったなら...?

昨日起きた問題

sinatraを

github.com

からgit cloneして頑張ろうとしたところで、

-bash-4.1$ gem install sinatra
/usr/bin/gem:8:in `require': no such file to load -- rubygems (LoadError)
        from /usr/bin/gem:8

rubygemが使えない。

仕方がないのでrubygems自体をインストールしてみよう。しかしここで、

-bash-4.1$ ruby setup.rb
./lib/rubygems.rb:9:in `require': no such file to load -- rbconfig (LoadError)
        from ./lib/rubygems.rb:9
        from setup.rb:33:in `require'
        from setup.rb:33

rbconfigがない

stackoverflow.com

FFS!!

これも詰んだξな。せっかくsinatra習得のチャンスだと思ったのに;-(

昨日出した下記の記事

notwodaily.hatenablog.com

と合わせて、実はここでwebサービス開発が難しいのではないか、と思ってしまった次第です。もっとお高いプランなら、他のコマンドも使えるのでしょうか（そんなことは、どこにも記載ないんですけどね:-O）？

それとも、レンサバとしてはそこまでオススメでもなかったとか..?まぁ使ったことなかったから、こういうことが起きるまでは分からないんですけどね。体験レポートを書けることくらいはメリットとして挙げておきましょうｗ

というのは冗談で、wordpressやEC-CUBEを一緒に使えることは間違いなくプラスなので、その辺にメリットを感じるのであれば契約してみるのも良いと思います。

で、結局どうするのか？

こうなったら、たぶん他のフレームワークでも同様に詰んでしまうことが想像できます。だから、フレームワーク使わずに作るしかありません。普段なら絶対やらないことですけど、今回作ろうとしているフォームは幸い規模が小さいのできっとなんとかなるでしょう。

教訓

何事もそうですが事前に説明をよく見ても分からないことはあります。実際に使ってみて始めてわかる体験って、今までに知らず知らずのうちに何度もしてきた気がします。不運な事故に見舞われても立ち上がる方法を考えておくことは必要不可欠といえるでしょう。何かにチャレンジした時に不測の事態なんてのは付き物なので、そこでくじけないこと（自分にも言える）！

【PHP】【注意！企画倒れ記事です！役立ちません！】ロリポップでサイト開発する方法

ロリポップ上でサイト開発するには、そのサイトの種類にもよりますがEC-CUBEを用いる方法やWordPressを用いる方法、直接FTP経由でファイルを置く方法等あります。今回は申し込みフォーム開発ということでサーバに入って開発する方法を選択しました。

外部リンク多めですがすべてをここに書き出すと記事がとんでもない長さになるので仕方ありません(；´∀｀)

先に言っておくこと

私自身、普段はruby使いのためrails等を使いたいのですが、ロリポップではrailsは対応していませんとのこと。

lolipop.jp

ruby使いたいならこっちかな？この辺はまだ詳しくないです。。

sqale.jp

ロリポップでも頑張って自分で無理くり入れることもできそうだけど、サポート外のことで後で何か起こっても困るので今回は使わないことにします。代わりに、ロリポップではPHPが使えるので、使用経験のある言語ってことでPHPを使ってみます。

そこで、せっかくならやっぱりフレームワークに頼りたいよねってことで、今回はCakePHP。なぜか？私自身の経験のためにです。そもそも今回作るのは簡単な申し込みフォーム数ページ分なので何を使っても大した差はないのですが。

SSH設定/Teratermインストール

下記でSSH設定をしてから、

lolipop.jp

Teratermをインストールします。これはググってインストールページを見つけてください。

接続設定は

lolipop.jp

を見ればわかります。

アクセス後はこんな感じ(見られたくないサーバ名等は消しています)。

環境をチェック

無事アクセス出来たところで、自分が使っているOSを確認したところ、64bit linuxでした。

-bash-4.1$ uname -m
x86_64

他には、使える言語とバージョンの例としては

こんな感じ。

CakePHPを入れてみよう

archiveをダウンロードして解凍って書いてあるんですが、CakePHPのインストール方法にどう見てもコマンドでやれと書いてあるので、そっちに従うことにします。

CakePHP installation

ここの

Create a CakePHP Project

のコマンドまで成功したら、次。

lolipop.jp

ここの作成した『cake』フォルダにファイルをアップロードするまでが完了した状態なので、生成されたファイルの置き場所(ディレクトリ名)を確認して、気に入らなければ今のうちに変更しましょう。

※サイトに表示されるルートディレクトリは/webなのでこのディレクトリ以下に配置してください。

その後、当然ながらブラウザ上のFTPのディレクトリにもファイルが反映されます(ブラウザの表示に反映されるまで少し時間差があるみたいで、一応URLを直叩きすれば作られていることはわかります)。

そして実際にアクセスしてみましょう。

FTPの画面的にはこうなるはずです。

この状態で、サイトの初期状態にアクセスしてみましょう。

http://ロリポップで取得したドメイン/プロジェクトのディレクトリのパス/

では入れます。下記の様な表示が出れば1段階はクリアでしょう。 

ついでに、CakePHPのバージョン確認してみましょう。

cat ./vendor/cakephp/cakephp/VERSION.txt

とすると、最後の行に、私の場合は3.3.7と出ました。

3系統確定。

CakePHPのDB接続設定をしよう！

次は、データベース接続の設定をするから先に進みます。

まだデータベース接続設定をしていないため、上記画像で

Database

の欄がCakePHP is NOT able to connect to the databaseと表示されていることでしょう。これを修正します。

上記の方法でインストールした人は、ファイル名の違いに注意してください。

app/config/database.php.default

ではなく

config/app.default.php

です。ファイル名変更は、指示通りdatabase.phpにすれば良いでしょう。

次は『core.php』の設定値を変更するですが、

app/config/core.php

ではなく

config/app.php

です。

内部の設定はsaltよりも下記をいじりましょう。

    /**
     * Connection information used by the ORM to connect
     * to your application's datastores.
     * Do not use periods in database name - it may lead to error.
     * See https://github.com/cakephp/cakephp/issues/6471 for details.
     * Drivers include Mysql Postgres Sqlite Sqlserver
     * See vendor\cakephp\cakephp\src\Database\Driver for complete list
     */
    'Datasources' => [
        'default' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => 'localhost',
            /**
             * CakePHP will use the default DB port based on the driver selected             * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
             * the following line and set the port accordingly
             */
            //'port' => 'non_standard_port_number',
            'username' => 'my_app',
            'password' => 'secret',
            'database' => 'my_app',
            ...

この設定も、app/config/core.php同様にdatabase設定を合わせます。

更にエラー内容でfind grepした結果、対象箇所は

-bash-4.1$ ls -l ./vendor/robmorgan/phinx/docs/configuration.rst
-rw-r--r-- 1 XXXXXX(伏せたつもり) LolipopUser 8546 Mar  7  2016 ./vendor/robmorgan/phinx/docs/configuration.rst

の194行目付近(私の場合)にある、下記の設定が問題だったことが発覚。 

    environments:
        default_migration_table: phinxlog
        default_database: development
        production:
            adapter: mysql
            name: production_db
            user: root
            pass: ''
            unix_socket: /var/run/mysql/mysql.sock   ←ココ！！！
            charset: utf8

このうちunix_socketのパスの通りに、mysql.sockを配置すれば設定は完了となります。

ところが散々findしてみた結果、mysql.sock的なファイルがサーバ上のどこにもないことがわかりました。そのせいか、手元でmysqlコマンドを打っても

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

などと出る始末。これは参りました。

最悪手元のは動かなくてもMySQLAdminで動くからまあいいやということで、該当するディレクトリをひとまず準備して、そこにmysqlを置いてみましょう。

-bash-4.1$ ls -l /var/
total 8
drwx--x--x 3 XXXXXXX(伏せたつもり) LolipopUser 4096 Nov  5 08:37 run
drwx--x--x 3 XXXXXXX(伏せたつもり) LolipopUser 4096 Nov  5 08:37 spool

見て分かる通り、/var/libからありません。しかも、./var/以下には、権限の問題で自分のユーザでは書き込みが出来ません。これを手詰まりと言います。

今までの苦労はなんだったのでしょうか？

というわけで、やるだけやった結果何も出来ませんでしたという落ちでした。

誤解のないように言っておくと、自分でサーバを設置したりWindows上で開発する場合はmysql.sockを用意すれば普通にこの続きをやってうまくいきます。参考になれば幸いです。

一方私は手元に何も残りませんが、しかし何も作れない、というのは流石に許されないため、次は別のフレームワークで試してみます。

CSSデザイン比較その2 - float/position

引き続きCSSの比較。今回はちょっと変わって、要素の左右寄せの話。

有名なサイトでChromeで要素を検証、とかするとよくfloat: leftとかclear: bothとか目にすると思います。

floatは画像の左右にテキスト回り込みをさせたり、サイドバーを配置するのに使えますね。

しかしfloatなしでも似たような配置が出来ますよってことでposition: absoluteを活用した例を載せます。positionとfloatの比較って感じですかね。

表示結果

left

right

clear

---

no float

left

right

code

HTML

<body>
  <b>before left</b>
  <div class="left">
    left
  </div>
  <b>after left</b>
  <div class="right">
    right
  </div>
  <b>after right</b>
  <div class="clear">clear</div>
  <b>after clear</b>
  <hr />
  <h1>no float</h1>
  <div class="relative">
    <div class="absolute_left">
      left
    </div>
    <div class="absolute_right">
      right
    </div>
  </div>
</body>

CSS

.left {
  float: left;
  width: 200px;
  height: 30px;
  background: rgb(200, 100, 50);
}
.right {
  float: right;
  width: 200px;
  height: 30px;
  background: rgb(100, 50, 200);
}
.clear {
  display: block;
  clear: both;
}
.relative {
  position: relative;
}
.absolute_left {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 200px;
  height: 30px;
  background: rgb(200, 100, 50);
}
.absolute_right {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  height: 30px;
  background: rgb(100, 50, 200);
}

と、このようにfloatで左右に寄せてclearして、といった表示崩れの置きやすい方法を用いなくても回り込みは可能ですよ、という話でした。

回り込みというより単に左側に画像、その右側にテキスト、などしたい場合はdl, dd, dtを用いて並べることも可能です。見た目的にはそちらのほうが綺麗にできることが多い。

総括

positionを用いたやり方のfloatでやる場合に比べてのメリットは、例えばサイドバー等で予めwidth指定されてメイン要素が入り込めない位置にもright, leftをネガティブ(-値を指定)にすれば好きに配置出来る点です(position: absoluteなんだから当たり前か)。

どちらもBOXモデルを理解していないと使いこなせないのは一緒で、バグの温床になりやすいので多用するのではなく、ここぞというときにだけ使うのが良いです。

CSSデザイン比較その1 - box-shadow

これは、デザイン追加時に「あれどうなるんだっけ？」って思う微妙なデザインを分かりやすく、視覚的に比較する(微妙に韻を踏んでる)シリーズです。

いちいち使い方とか結果をググるのも面倒だし、他で使われてるのを見ても効果が分かりづらかったりしますからね。

そこでどんなのを紹介するかというと、オプションがわかりづらいもの。ここではbox-shadowの結果について。

表示結果

box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9);

box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9);

box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9);

box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9);

box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9);

box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;

box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;

box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9) inset;

box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9) inset;

box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9) inset;

code

HTML

<body>
  <div class="test-box">
    <div class="box-shadow1">
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow2">
      box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow3">
      box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow4">
      box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow5">
      box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9);
    </div>
    <div class="box-shadow6">
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
        <div class="box-shadow7">
      box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
    <div class="box-shadow8">
      box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
    <div class="box-shadow9">
      box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9) inset;
    </div>
    <div class="box-shadow10">
      box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9) inset;
    </div>
  </div>
</body>

CSS

.test-box * {
  width: 500px;
  height: 40px;
  margin: 35px;
}
.box-shadow1 {
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow2 {
  box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow3 {
  box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow4 {
  box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9);
}
.box-shadow5 {
  box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9);
}
.box-shadow6 {
  padding: 8px;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow7 {
  padding: 8px;
  box-shadow: 1px 5px 5px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow8 {
  padding: 8px;
  box-shadow: 5px 1px 5px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow9 {
  padding: 8px;
  box-shadow: 5px 5px 1px 5px rgba(0, 0, 10, 0.9) inset;
}
.box-shadow10 {
  padding: 8px;
  box-shadow: 5px 5px 5px 1px rgba(0, 0, 10, 0.9) inset;
}

ひと目で分かるように、中のテキストは実際に当てたデザイン通りにしています。

こうやって各パラメータ変更時の結果を載せておけば、具体的にどこを変えると表示がどう変わるのかが視覚的に分かりやすいです。自分でサイトを作るときにも使える知識なので、そんなときに是非。

夜に聴いてると落ち着く曲

特に作業したい時にはオススメ。

と言いつつも、ループして聞いてると眠くなる曲もある気がします。

---

ANGEL (SARAH BRIGHTMAN)

www.youtube.com

似た名前の嘆きの天使の方はメタル色強いのに。幅広い曲をカバー出来るサラ・ブライトマンならでは。

Sunlight (Kyte)

www.youtube.com

Radio Protector (65 days of static)

www.youtube.com

Only If (Enya)

www.youtube.com

Enyaはこれに限らずほとんどすべての曲が作業用になる気がする。

Xtal (Aphex Twin)

www.youtube.com

これも。

Tour De France (Kraftwork)

www.youtube.com

厳密にはTour De Franceはアルバムの名前だけど、これは通しで1つの曲として聴くつもりでいいかもしれません。

アニメの曲も混ぜます。

Innocent Days (黒石ひとみ)

www.youtube.com

Alone (黒石ひとみ)

www.youtube.com

コードギアスより。

A Secret of the Moon (黒石ひとみ、 中川幸太郎)

www.youtube.com

プラネテスより。

Agape (岡崎律子)

www.youtube.com

円盤皇女ワるきゅーレより。

ゲームの曲も混ぜます。

www.youtube.com

クロノトリガー全般

www.youtube.com

聞いてて眠くなるとかよく寝落ちする、という日が続くならそもそもその人は慢性的に疲れているんだろうから、作業せずに睡眠に集中した方が良いです。

気分がハイになりたいときに聴く曲

邦楽と洋楽ごちゃまぜです。知ってる曲の中から。

選定基準は、なんとなく聴いてると一緒にシャウトしたくなっちゃう点。

※あくまで主観です。

---

Tough Boy (Tomcat)

www.youtube.com

ロンリースターズ (B'z)

www.youtube.com

F (マキシマムザホルモン)

www.youtube.com

邦楽ここまで。正直、どちらかと言うとシャウトするか歌詞がそれっぽい曲がそうかな～という感じです。

Given Up (LinkinPark)

www.youtube.com

Monster (Skillet)

www.youtube.com

Stargazers (Nightwish)

www.youtube.com

Emerald Sword (Rhapsody Of file)

www.youtube.com

The Pretender (Foo Fighters)

www.youtube.com

洋楽も負けてません。適当にpickupしただけでも結構あります。メタルバンドにもなってくるとそういう曲多いので、探してみるといいかも。Nightwishはターヤが抜けてから若干方向性変わったので、少し違うかもしれません。

周りに響かない程度に、大音量で聴くと気分爽快！！

【Rails】ファッキン黒魔術

どうも。

Rubiestには少なからずブラック・マジシャンが存在するするようです。所謂メタプログラミングのことです。CとかJavaとか、別の言語出身の人だとこのRubyという魔の言語を用いたコードを読むとき、必ずと言っていいほど1度はこの「黒魔術」に悩まされることだと思います。で、チームで開発しているにも関わらずそれを当たり前のように書く奴や書いた後コメントやドキュメント等で一切フォローしない人ってやっぱりいます。糞すぎる。

コードをgrepすりゃ見つかる、なんて考えだとRubyではドツボにはまるかもしれません。期限が近くて切羽詰まっているときにこんなコードに出くわすと、確実に殺意の波動に目覚めます。アホをdisるためにも、アーンド、多少なりともコードを改善するために長々と書きます。

---

何が問題？

grepしづらい

つまり、影響範囲が絞りにくいことです。当然、特定に時間がかかります。

今探しているメソッドが実は動的に作っているかもしれないって気づいたところで、でもどの部分が動的に、どこで作られているのかを知る必要がありますね？しかもその糞メソッドは1つとは限りません。さあすべて影響範囲内から探し出せる自信がありますか？

メソッド変更時にリスクがでかい

grepしづらいことに通じます。影響範囲が絞りづらいので、大規模な修正中に漏れが出やすいです。大規模サイトの修正担当箇所にこんな爆弾が埋まってたら発狂もんです。

これを避けるには

既存の黒魔術へ適切なコメントを振る。

既にあるものを修正するのはリスクがでかいため、なるべくいじらずに済ませたいもの。ただ今後見る人のためにコメントをそっと振っておいてやるのが上策かと。コメントは呼び出し元。これはevalで動的に定義してる、などと書く感じで。

使うなら場所を限定するか、特定の使い方に限る

例えば必ずmodelの頭に書く、とか動的に生成されるものはそうわかるメソッド名になっている、とか。後から見て理解しやすいようにフォローは必須です。

上級者以外に使わせない。

使うのが上手な人が書けばまだいいですが、テキトーな人がテキトーに書くとわけわかめです。間違いなく。本を出せるレベルの人が、非常に読みやすい使い方をお手本のようなレベルで書くのならまだ分かりますが...それと、もしチームでコーディングルールがあるなら、このことは書いてあったほうが助かります。

実装例

定義側

eval, class_eval, define_method, instance_variable_set

    # class_eval
    class Hoge
    end

    Hoge.class_eval {def fuga; "hogefuga"; end}
    Hoge.new.fuga # ==> "hogefuga"

    # eval
    var0 = 10
    var1 = 15
    var2 = 20
    index = 1
    eval("var#{index}") # ==> 15

    # define_method
    class Foo
      ["pee", "poo", "paa"].each do |word|
        define_method(word.to_sym) { word }
      end
    end

    Foo.new.poo # ==> "poo"

    # instance_variable_set
    class Bar
      def out
        @test
      end
    end
    bar = Bar.new
    bar.out # ==> nil
    bar.instance_variable_set(:@test, 5)
    bar.out # ==> 5

ザ・諸悪の根源。書いたら○されても文句は言えない。見かけたら討伐したい。

呼び出し側

send

    class Baz
      def method_1
        "method_1"
      end

      def method_2
        "method_2"
      end
    end
    # というclassに対してsend
    Baz.new.send(:method_1) # ==> "method_1"

まだましです。メソッド名が直後にわかるのですから。

これが全てじゃないです。ここでは非常に簡単な例を書きました。でも、初めて見た人は戦慄するのではないでしょうか。実際、この時点でかなり探しづらいです。

書き方次第でいくらでも上等な料理にハチミツをぶちまけることが出来ます。

考えるべきこと

便利だから使う、も大事ですが単に便利だからあ～じゃなくて便利だし使うことによるデメリットをメリットが上回っているとか、開発そのものに支障が出ないかをよく考えて問題ないなら使う。そうすれば、別の人がそのコードを触っても大した苦労はしないはずです。

結論、オナニーは1人でやれ

チーム開発で頻繁にこんなNBCを、さも当たり前のように用いる奴は余程の乱交マニアかオナニー依存症の糞野郎だと思ってますが、対策を練れば今後そいつの頭にカラシニコフ銃を突きつける必要はなくなります。

仮にどうしても使いたくなったとしても、一歩下がって考えてみます。すると本当にそんな危険物を取り扱う必要があるのか、検討してみたらそんなことなかったりします。仮にメソッド定義が増えて多少ファイルが長くなったとしてもそこまで悪影響するでしょうか？同じようなメソッドが数十個数百個単位で並ぶことって通常ありえますか？個人的にはNO。それでもDRYは守れるでしょ。Fat Model？純粋にModule分割すれば済む話(それもRails4からconcern使える)。黒魔術じゃないと駄目って、作ろうとしている物が元からそういうテーマのコードならまだしも、一般のシステムにこんなものを採用しなければならないなんて、そもそも設計からしておかしいに決まってます。

それでもどうしても使いたければ、迷惑だから1人でおとなしくローカルで勝手に何か作ってればいいんじゃないかな？

他の言語ではこんな危険なことをしなくても間に合っています。Rubyだとなまじ自由度が高すぎるからこその弊害というべきか。

誰かが書いてるのを見たらこっそりIOCCC(言語は違うけどな！)でも勧めてみたらどうでしょう？

今回の件にかかわらず独りよがりなコードを書いたり無駄に高度な「こんな書き方あんだぞ(ドヤア)」って見せびらかすような真似はただただ面倒で嫌われるだけなので、やらないこと推奨。如何に見やすいコードを書けるかそして分かりやすい設計にするかって超絶大事です。

ところで、後で思い返してみたらJavaにもリフレクションっていう機能があったことを思い出しましたが、まぁ同じことですね。使わないにこしたことはないです。