WEBサービスを作ったので使用した技術などをメモ

# はじめに

![main.png](https://qiita-image-store.s3.amazonaws.com/0/64098/514c9f82-59a6-0517-c46a-cf6f11c06f58.png)

[1kkan.com](http://1kkan.com)

久しぶりにサービス作りました。
漫画をタイトル事に分類して全巻表示するサービスです。

ISBN情報の提供が主目的だったのでテキストベースでいいかと思っていましたが、表紙ギャラリーなるものを作ってみたらなかなか壮観だったのでジャケ買いが捗りそうで自画自賛しています。

# ギャラリー

![capture1.png](https://qiita-image-store.s3.amazonaws.com/0/64098/94b9dd05-e236-78dc-a154-95722bd900d4.png)
![capture2.png](https://qiita-image-store.s3.amazonaws.com/0/64098/ba683c6e-04f0-f01e-95dc-aecace600e6a.png)
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/64098/9932d841-394c-9ce9-387b-bce6fa7a5367.png)

# 使用した技術・サービス

## 環境

* PHP 5.4
* FuelPHP 1.7 「[FuelPHPで最初にやることあれこれ - Qiita](http://qiita.com/goosys/items/afbb9e92c87eaf3c5318)」
* MySQL
* Less 「[FuelPHPでLESSを使う - Qiita](http://qiita.com/goosys/items/687c4811bc36c33dd775)」

## サービス連携

* AmazonAPI

## 本番環境

* Heroku
* ClearDB
* さくらのドメイン
* PointDNS (ネイキッドドメイン用？）

## 運用・宣伝

* GoogleAnalytics
* GoogleSearchConsole
* GoogleAdwords
* Amazonアソシエイトプログラム
* Twitter広告
* StartApp 「[コミックの全巻ISBNを表示します「1kkan.com」 開発者インタビュー](http://startapp.jp/2016/03/02/1kkan-com.html)」
* ツクログ 「[コミック全巻ISBN！1kkan.com
](http://creators.eightbit.jp/service/item2178.html)」

# ハマりポイント

今回は最終的にHerokuに上げることにしていたので、通常の開発以上にハマりポイントが多かったです。
この辺は後で詳しくまとめるとして、ハマりポイントと検索メモを置いておきます。

## composer

composerを使っておけば超便利です。

ハマりポイントとしては、PHPのバージョンをデフォルトのまま「```>=5.3.3```」とかにしておくと、Herokuに上げたときに超最新版（PHP7系とか）で環境構築されてしまうので、PHP7に対応していないFuelPHP1.7だと動きません。
そこで、きちんと5.4系を指定するためには、「```~5.4```」と指定する必要がありました。

あとは、
```composer install```後のフックを使って、必要な前処理を入れておけば便利です。
もし、```oil```コマンド自体をgit管理していなかった場合は、毎回DLするように```wget```で書いておくとよいです。
そうすると、```php oil r migrate```と書いておけば毎回デプロイ時にDBが最新版になります。
注意としては、２回目以降のデプロイでも```composer update```ではなく```composer install```が実行されるので、最初の１回だけでよいタスク（DBのcreateやseedの投入など）は含めれないです。（当たり前ですが）

あとは、使用するWEBサーバーの指定とかもできちゃうので、超便利です。
詳しくはこの辺りをどうぞ

* [HerokuへFuelPHPプロジェクトをデプロイ - Qiita](http://qiita.com/gigatune/items/2c98091badc36294b19f)
* [heroku Meets FuelPHP - Qiita](http://qiita.com/mikakane/items/a736112a8b68925d27a7)
* [FuelPhpをHerokuで動かす | tenpu開発ブログ](https://www.tenpu.me/blog/2014/10/14/heroku-for-fuelphp/)

## 静的ファイル

Herokuでは静的ファイルは扱えませんが、PHPではまだまだけっこうファイルにいろいろ出力する場合もあります。
FuelPHPでは、app以下にlogやcacheを作りますし、configファイルもやろうと思えば上書きできますので、こういう処理が入っているとHerokuに上げた後にハマります。

ログは、上のリンク（[heroku Meets FuelPHP - Qiita](http://qiita.com/mikakane/items/a736112a8b68925d27a7)）にもあるように、標準出力に出してしまうのがよいかもしれません。
cacheもRedisとかに切り替えてしまう方がよいかもしれません。
configにセーブするような処理がある場合は、どうしようもなりませんので諦めてDBなりRedisなりに入れるようにしましょう。

あとは、開発中には見落としがちですが、デプロイ後に必要となるファイルの置き場所も考えておかないとです。

* Basic認証用の.htpasswd （今回は使っていないですが）
* GoogleSearchConsoleのサイトオーナー識別用のファイル
* [sitemap.xml](http://1kkan.com/sitemap.xml)

サイトマップは、今回は動的に生成することにしました。
上二つは、簡単なテキストなのでcomposerのフックにこんな感じでいいと思います。

```json:composer.json
    "scripts": {
        "post-install-cmd": [
            "echo ${BASIC_AUTH_USERNAME}':'${BASIC_AUTH_CRYPTIC_PASSWORD} > .htpasswd".
            "echo 'google-site-verification: '${GOOGLE_SEARCH_CONSOLE_TAGFILE} > ${GOOGLE_SEARCH_CONSOLE_TAGFILE}"
```

## Less

Lessは課題です。
Railsではデプロイ後にアセットコンパイルしているので、本当はそっちの方がいいのですが、
まだうまい方法が見つからないので、とりあえずはローカルだけでLessパッケージをロードして、コンパイル済みのcssをgitで送っちゃうことにしてます。課題です。。

Less環境の作り方はこちら
[FuelPHPでLESSを使う - Qiita](http://qiita.com/goosys/items/687c4811bc36c33dd775)

## 本番環境Config

こちらもハマりやすいのでメモです。

まず、.gitignoreから「```fuel/app/config/production```」を除外しておきます。（Git管理に含めるようにする）

そして、Heroku環境で書き換えたい設定があるファイルのみ追加していきます。
本番用の固定値の設定はそのまま書いてしまって、APIキーやDBのURLやパスワードは環境変数から動的に生成できるようにしておきます。

DBのconfigはこんな感じです。
参考：[FuelPhpをHerokuで動かす | tenpu開発ブログ](https://www.tenpu.me/blog/2014/10/14/heroku-for-fuelphp/)

```php:fuel/app/config/production/db.config
<?php
$db         = parse_url(getenv('CLEARDB_DATABASE_URL'));
$redis      = parse_url(getenv('REDIS_URL'));
$db['path'] = preg_replace('/^\//','',$db['path']);

return array(
	'default' => array(
		'connection'  => array(
			'dsn'        => "mysql:host=${db['host']};dbname=${db['path']}",
			'username'   => $db['user'],
			'password'   => $db['pass']
		),
	),
	'redis' => array(
		'default' => array(
			'hostname'  => $redis['host'],
			'port'      => $redis['port'],
			'password'  => $redis['pass']
		),
	),
```

APIのキーなども同様に作っておきます。
作った環境変数はコマンドごと```README.md```に書いておくとそのまま流せるので便利です。

```markdown:README.md
### ENV

* ```heroku config:set AMAZON_API_KEY=""```
* ```heroku config:set AMAZON_API_SECRET=""```
* ```heroku config:set FUEL_ENV=""```
* ```heroku config:set URL="http://xxxxxx.herokuapp.com/"```
* ```heroku config:set BASIC_AUTH_USERNAME=""```
* ```heroku config:set BASIC_AUTH_CRYPTIC_PASSWORD=""```
* CLEARDB_DATABASE_URL
* REDIS_URL
```

## ネイキッドドメイン

これがよくわからなくてハマりました。

ドメインを取ったら、普通「～.com」とかで使うものじゃないの？？ 「www.～.com」ってかっこわるくない？？
とか、？？だらけでした。
普通にできると思ってたので何も考えずいつも通りさくらのドメインでとってたのですが、ずばり「さくらドメイン＋ネイキッドドメイン」を解説した記事がなかったので分からなすぎて泣く寸前でした。

これもあとでまとめますが、結果としては、「さくらのドメイン＋PointDNS」という組み合わせでできたっぽいです。
お金がかかるのかどうかは不明です（ﾄﾞｷﾄﾞｷ

# 感想

## できたものを眺めてニヤニヤする

発売月毎のページ（[2016/02の検索結果](http://1kkan.com/ikkan?publisheddate=2016/02#gallery)）とか、出版社毎のページ（[ジャンプ・コミックスの検索結果](http://1kkan.com/ikkan?publisher=%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97%E3%83%BB%E3%82%B3%E3%83%9F%E3%83%83%E3%82%AF%E3%82%B9#gallery)）とか、表紙画像を一覧してみたら結構壮観でした。
最新のジャンプなんか全然分からないので、眺めてるだけで大分楽しいです。あの作者が今こんなん書いてるのかーとか。

あと、好きめの絵だと全巻の表紙とかもうニヤニヤしかないです。

[夜桜四重奏～ヨザクラカルテット～ | 1kkan.com](http://1kkan.com/isbn/4063730425/%E5%A4%9C%E6%A1%9C%E5%9B%9B%E9%87%8D%E5%A5%8F~%E3%83%A8%E3%82%B6%E3%82%AF%E3%83%A9%E3%82%AB%E3%83%AB%E3%83%86%E3%83%83%E3%83%88~)
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/64098/5083554d-b854-cd7d-9dae-bcfa319868f1.png)


## データが増えてきたら動作が遅くなってガックリする

インデックス調整します。。

[FuelPHPでMySQLにインデックスを追加するタスク - Qiita](http://qiita.com/goosys/items/7b0b7609277871993c2a)

### (追記：2016/3/7) 調整しました。

開発環境で```profiler=>true```にして、どんなSQLが発行されているか全ページチェックしながらインデックスを調整しました。。。
上のリンクのようにタスク化しておくと運用後にインデックスだけ調整できるのでオススメです。


# 関係ないけど

「[漫画](http://qiita.com/search?q=+tag%3A%E6%BC%AB%E7%94%BB&sort=rel)」っていうタグが意外になかった。
新たに作ってしまったのでみんな使ってね。