概要

はてなブログを始める前に有料か無料かを選ぶことですが、筆者がはてなブログPro - はてなブログに載っている情報をもとに判断する時のポイントを書いてみました。

メリット

デメリットは、毎月数百円かかることだけ。なので、簡単にメリットとなる項目を書きます。

独自のブログを作れる(ブログの自由度が増す)
余計な表示を消せる
容量を気にしないで作れる

大きく分けてこのあたりでしょう。

判断材料

実際には上記リンクにあるような有料会員のみの特典というのは、全てが役立つするわけでもありません。特にこれは絶対有料じゃないとできない、というものを説明します。

独自ドメイン

これはさすがに有料じゃないとだめです。どうしてもURLのドメインにhttp://blog.hatena.ne.jp/をつけたくないなら、

キーワード自動リンクオフ

これも有料じゃないと消せませんね。しかし記事の文中、そこらじゅうの文字リンクがつくわけでもありませんし、初心者向けの記事を書くときは逆に自分でリンクを貼らなくても勝手にリンクが貼られることで逆に手間が省けるという考え方もできます。ということで、これはメリットとしては小さいですね。

記事URL引き継ぎ

これは、引き継ぎ元の記事数が多いときに有効です。1, 2記事程度であれば無料で始めてから文字をコピペするとかすれば対応できます。文字の装飾は面倒ですが...

逆に、以下は大してメリットと感じない程度の項目を書きます。

複数ブログ

これはあまり要らないかなと。。そもそも3つもブログを持ったところで更新が大変過ぎます。むしろ無料の3ついっぱいまでを書こうとしましたが、どう考えても多い..今2つを運営していますが、それでも手間です。よほど書くことが多すぎてしかもジャンルがあまりに別々になりすぎるなら、必要かもしれません。あとでそうなってから有料に切り替えたっていいです。

広告非表示

広告については、ブログを一切マネタイズしないんだ！という決意のある人には必要だと思います。しかし筆者のようにアドセンスを貼る、などどこかのアフィリエイトリンクを貼る、という人の場合には結局、広告で多少汚れることにはなります。そういう人は広告を表示しないことよりも、表示の仕方(位置、大きさ)を意識するほうが良いです。そこは課題です。

ブログメンバー

ブログを複数人で共有するのなら、その記事を書きたい人にアカウントを教えてあげればいいだけです。

ヘッダとフッタを非表示

デザインCSSで

#globalheader-container, #footer {
    display: none;
}

と入力すれば消せるので不要です。

消したあとの空白が気になる場合もCSSで調整すればいいです。

写真アップロード容量追加

これは全く気になりませんでした。毎日記事を書いてそこに複数の画像をアップしていくとしても、容量overすることはまずないでしょう。よほど容量の大きい画像を大量にアップし続けることでもない限り。

そしてそんなに画像だらけにするのであれば、外部のpinterestやinstagramを利用して外部リンクをつければ済む話。そっちにも文字は書けるし。文字が多すぎるなら、載せきれない画像だけ外部へ分けて文字だけはてぶの記事とするか、もしくはそもそも記事をシリーズ化して複数回に分ければいい話です。画像が多ければ質が高い、見やすいかというとそうでもないですし。工夫次第でどうとでもなります。

アクセス解析

Google Analyticsを入れましょう:)

まとめると

ということで、一通りの有料の項目について自分なりの考えをまとめました。どうしたらいいかは人によるとはいえ、この考え方は大抵の人に当てはまると考えています。もし有料にするのであれば先にアドセンスを貼ってある程度の収入が見込めるようになってから切り替えてもOK。

今までいくつかの質の高いなと思う記事を読んできましたが、これははてなブログっぽくないか？と思ってよくよくURLのドメインを見てみると、普通に無料会員のままだったりすることもあります。無料会員だから記事の質が下がることはありません。無料会員でもCSSの心得があれば自分で外観を整えることも出来ます。

なんにせよ調べて自分の頭で考えてどうするかを決めるのが一番大事ということですね。

2016-11-07

【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を一緒に使えることは間違いなくプラスなので、その辺にメリットを感じるのであれば契約してみるのも良いと思います。

で、結局どうするのか？

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

教訓

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

2016-11-05

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

ロリポップ PHP

先に言っておくこと
SSH設定/Teratermインストール
環境をチェック
CakePHPを入れてみよう
- Create a CakePHP Project
CakePHPのDB接続設定をしよう！
- Database

ロリポップ上でサイト開発するには、そのサイトの種類にもよりますが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を用意すれば普通にこの続きをやってうまくいきます。参考になれば幸いです。

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

2016-11-03

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

CSS HTML

表示結果
no float
code
- HTML
- CSS
総括

引き続き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モデルを理解していないと使いこなせないのは一緒で、バグの温床になりやすいので多用するのではなく、ここぞというときにだけ使うのが良いです。

2016-11-02

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

CSS HTML

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

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

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

表示結果
code
- HTML
- CSS

表示結果

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;
}

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

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