読者です 読者をやめる 読者になる 読者になる

morolicious開発日記

MojoliciousとBootstrapで作られているレスポンシブなエロサイト「morolicious」の開発記録を綴りっています

新しいmorolicious(ver5以降?)でNginxの後ろでhttpsを検知するに必要な設定

Nginxの後ろでSSL通信を検知する

Nginxの設定は基本的には Mojolicious::Guides::Cookbookにあるものでいいのだけど、Nginxをリバースプロキシとして使っていて、バックエンドのアプリ側でSSL通信か否かを判定する場合には

proxy_set_header X-Forwarded-Proto $scheme;

この設定がないと $app->req->is_secure; が偽を返す。

うちも以前は

        set $mode 0;
        if ($scheme = "https"){
            set $mode 1;
        }
        proxy_set_header X-Forwarded-HTTPS $mode;

みたいな設定をしていたのだけど、mojoliciousのバージョンを上げたらうごかなかった。

なんとなく全体的な設定

upstream morolicio.us {
    server 127.0.0.1:8102;
}

server {
    listen       80;
    listen       443 ssl;
    server_name  morolicio.us;

    # SSL Config
    ...

    location / {
        proxy_pass http://morolicio.us;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

やっぱりエロいサイトのサーバ立ち上げるならポートにもこだわりたいですね。ぱいおつ最高。

動画閲覧ページで複数動画がある場合、類似動画の「もっとみる」で表示が崩れるバグ修正

動画閲覧ページ(/video/xxx )で複数動画がある場合は、小サムネイルで切り替えができるようになっていますが、この切替を行った後に類似動画の「もっと見る」をクリックすると表示が崩れるバグを修正しました。

Linodeが大幅アップデートしたのでNginxのworker_processesでも増やす事にする

moroliciousをホスティング中のLinodeSSD化&RAM増&コア数増という事で、ちょっと設定をイジることに。

今くらいのトラヒックなら全く問題ないのだけれど、Nginxのworker_processesは増やしておこうかな、と。

設定はこの辺りを参考に

moroliciousの最近のアクセス傾向

一時期の1/10程に

セッション数57,473を叩きだした日から下降の一途を辿っている感じです。パンダの影響なのか、はたまた別の理由なのかはさだかではありません。

google様のご機嫌次第な昨今、トラフィックを稼ぐサービスを作るのはなかなか難しいですね。

f:id:pinktx:20140418193606p:plain

機能改善に時間が取れないのですが、ボチボチ作業を始めたいと思ってます。

moroliciousと明石市の騒動に関して

【悲報】 明石市立天文科学館の公式ツイッターがやらかしてると話題にwwwwwwwwww

こんなスレがいつの間にか。ちょうど大雪の日だったようで、暇を持て余していたのでしょうか。男(とは限りませんが)ならごく正常な事ですね。

もともとはこちらのツイートから発生したようです。

https://twitter.com/kariudyoshi/status/432015951718924288

業務用PCとか言われているけど、twitterアカウント管理しているだけかもしれないので個人のマシンかもしれません。業務中とも限らないし。というか、tweetした時間的には勤務時間外?

もともとソーシャルからの流入はわずかだけど、この日だけは別だったようです。

f:id:pinktx:20140329084047p:plain

moroliciousのtwitterログインに関して

twitterのアプリ認証しても read権限 のみなので 勝手にtweetしたり出来ません。 ログイン時の認証にのみ使用しています。

件の騒動では twitterにログイン状態のブラウザ

  1. 動画ページにある公式ツイートボタン
  2. ブラウザでtwitterの投稿ページが開かれる
  3. ツイート!

のような感じでしょうか。誤爆こわい ((((;゚Д゚))))ガクガクブルブル

何度も言いますがmoroliciousでは勝手に ツイートとかしません がアカウント作る時に心配な方はユーザーIDとパスワードで作成して下さいね。

最後に

もっと #panpanpenis を流行らせてね!エロtweet誤爆に注意!

Twitter Bootstrapに最適なwebフォントアイコン Font Awesomeを使ってみた

webフォントアイコン

Bootstarp ver2.3.2まではアイコンをCSSスプライトで表示しています。Retina等高解像度のディスプレイで表示すると若干ぼんやりしてしまう難点があります。

webフォントを使えば通常のテキスト同様、ズームしてもキレイに表示されると思うので使ってみました。

Twitter Bootstrapに最適なFont Awesome

今回使用してみたものは Font Awesome というものです。

TwitterBootstarpに最適化されているようで、class="icon-xxxx" と指定して使えます。Bootstarp既存のiconも置き換えられます。既に構築済みのHTMLを修正する必要がないのでとても楽です。

※Bootstrap ver3以降はwebフォントを使用しているますね。

Androidもphoneとtabletの見分け方があるらしい

とあるユーザー様からAndroidのタブレットで見ると表示件数がおかしいとの指摘を受けました。実はiPhoneiPadはUserAgentに含まれるので判別して切り分けていたのですが、androidはphoneとtabletを同じ扱いにしていました。

どうやらandoroidoでも "mobile" を検出することで、携帯かタブレットか判別できる様子。

早速使ってみます。

参考

PHP で、ユーザーエージェント(iPhone・Android・タブレット・携帯・PC)によってページを振り分ける | モノリオ