ODDBRAIN.JP | The splash Ideas

ピン留めされた投稿

gerol's avatar

ようこそ

とあるサイトからとにかくしんどいサイト開発やら運営やらをやらされた、早く隠居したい2人組のサイトです。印籠会という団体名で活動しています。今は、ウェブ上で蔵書を管理することのできるアプリケーションを開発中です。遅々として開発は進まないけどがんばるぞい!

最近の投稿

gerol's avatar

12月度印籠会を開催しました

Mycoplasma Diagnosis

年の瀬も迫った最後の週ですが、みなさんどのようにお過ごしでしょうか。
かくいうgerolは免疫力が低下し流行りものを追いまくった様な風邪の引きっぷりを見せています。ホント勘弁して欲しいです。
 ただの風邪の時は葛根湯と市販薬(もお金かかるなぁとしぶしぶ)買って飲んでしのいでました。治ってきたかなって時に猛烈な咳に襲われて、普段の風邪と違うと思い病院行って、治りかけの時に肺炎の診断を受けました。もう治りそうだから抗生物質はいいかなと咳の対処療法薬だけもらってようやく治ったーと思ったら今度は服が擦れても不快なほどの寒気と頭痛に襲われて、ぶり返したのかわからずとりあえず一晩おいて再度病院へ。「こんなにはっきり自分の症状言えるならインフルじゃないかもねー」という医者の言葉に反し、インフルと判明しました。これで1週間は休めるからしっかり回復するよね。という期待を見事に打ち砕くように、数日前からまた急性の体調不良に・・・

長々と近況の報告をしました。話を戻しましょう。

そんな中、2週間(お仕事の都合で)遅れて印籠会を開催しましたので、ご報告をいたします。
今月はほとんど進展がありませんでした。ほとんど体調回復に時間取られてました。

#今月完了した項目
・ドキュメント(仕様書)のフォーマット作成 ドキュメントも本格的に書いていかないと
・AmazonAPI(PPAP PAAPI)の申請 落ちました

…以っ上!(厚切りジェイソン風)

微妙に完成図的なものも作りましたけどちょっとだけなんで完了した項目には含まれないですね。

#来月まで集中的に行うこと
1. githubのreadme.mdの記述
2. 仕様書の作成
3. モックの作成
4. 画面遷移図の作成

とりあえず仕様書のフォーマットが決まったので二人の相違を埋めていく方向で今月はやっていこうかと思います。
その上でモックとか終わらせておこうかと思ってます。

#副次的に行うこと
サイトの記事作成
– 編集のボリューム増やしたい

これどんどんやってかないとAmazonがうんと言わないんで…

#仕様書について
今月作成した仕様書の今あるものを複製して記述する
完成のページごとに仕様書ファイルを作成する
仕様書自体のグレードアップが必要?

仕様書自体のバージョンもちょいちょいあげて見やすくしていこうかと思います。

#ドキュメント(仕様書?)の公開日
3月までには完成させたい

前回イベントに合わせて作成と言っていたのですが、今回それを伸ばしたので3月にしました。

#イベント参加
「技術書典」という技術書・同人誌専門イベントに参加することにしました。
https://techbookfest.org/event/tbf02

技術書典

なんとしても、このイベントまでにはベータ版をローンチできるよう頑張りたいと思います。

というわけで長々と話をしましたが、やることはすっぱりとやっていきたいと思います!gerolでした。

gerol's avatar

11月度印籠会を開催しました

古株

毎月中旬ごろになると、印籠会を開いて進捗報告と、軌道修正を行ないます。今月11月は12日(土)に実施しました。
このところ進捗状況が著しく悪化していますが、とりあえず今月はこのサイトを作成して記事をぼんぼこ追加していったので、0ではなかったと信じたいです。

#いまさら過ぎる内容も含む次回までの作業
・画面遷移の一覧作成
・完成画面イメージ図作成
・ドキュメントのフォーマット作成 ドキュメントも本格的に書いていかないと
・AmazonAPI(PPAP PAAPI)の申請
・以上の作業工程を記録しサイトの記事を追加する

何かもっと前にやっておけばスムーズにコトがすすんだんじゃないかとも思うのですが、いかんせんgerolが完成イメージを上げないから進まんと言われ続けているので何とかPhotoshopかなんかでモックを作らないとなぁといったところです。
APIに関してはすでに5回くらい申請してますけど、なしのつぶてっていうか箸にも棒にもっていうか云々… そろそろもう一回申請してみようかなと考えてるところです。そうしないと先に進まないですしね。

仕様に関してgerol-9mang間ですでに相違があるのでドキュメントを作成して意思の統一を図るべく、とりあえずフォーマットの作成を9mangに頼んであります。ワタシ仕様書見タコトナイ。
こんな調子で2月にベータ版とドキュメントの公開ができるんでしょうか。全く以て先行きがわたしには見えていないのですが、何とかしたいと思います。Let’s Death March! gerolでした。

後書き:やっぱりMarkdownで書きたいなあこれ。HTML書きづらいっす。

gerol's avatar

Levainにハマっています

Yamazaki BC Levain

特に好きだったわけでもないのに無性にはまってしまうことってあると思います。

今回は、というか、8月のヤマザキナビスコがRITZを生産終了するという話が出て、これ食べられなくなるならと食べだしたら口が寂しくなるたびに欲しくなるものになっていました。
丁度入れ替わりの時期に旧RITZ, 新RITZ, Levainで食べ比べをしました。正直味の違いには鈍いほうだと思いますが、これを「同じような味」だと評する人がいるなら声を大にして味音痴と教えてあげたいです。どう考えてもインドネシア産の新RITZは味が違います。良くも悪くも大味というか、外国のお菓子特有の甘ったるさが口についてとてもおいしいとは思えませんでした。
それに対し、YBC(これ山崎ビスケットカンパニーの略です)が生産を行なっているLevainの方は、レシピをほとんど引き継いでいるのか多少の味や触感の違いはありましたが「同じような味」といっても差支えないのではないかと思いました。 あ、別に煽ってるわけじゃないですよ。

それ以降、何かと買い足してはおかし棚に入っていることが多くなっています。この3種の中で一番おいしかったのは旧RITZでしたけどね。

過去には、ボンタンアメとか、メロンパンとか、フィリックスガムとか、大体甘いものにハマってることが多いです。

同じヤマザキナビスコが作っていたOREOの方はもう食べそこなったので新しいのも食べてないですね。あと中国産ってところにすごい抵抗を感じます。偏見ですけどね。過去にマクドナルドとファミマで中国産の腐肉が使われていた事件とか、どうにもいい印象がないんですよね。ちょっと違うけど参考リンク→日本マクドナルド社長、期限切れ肉問題で陳謝 売上高は計画比15~20%減 | HuffingtonPost

そんなわけで、今欲しいものランキングで言えば、MBPのEscがついてるやつの次くらいにLevainですね。心底どうでもいい話でした。

gerol's avatar

政治を語るつもりはないけど… 臨時福祉給付金ってなんだ

臨時福祉給付金サイト

9月ごろ、gerolの元へ臨時福祉給付金の手続きについての封書が届きました。
中を確認すると、住民税が非課税の人を対象に3000円を給付する政策の一環のようでした。

6月末に退職して、それまでの給与も雀の涙ほどしかなかったので、住民税が課税されていなかったgerolも対照群の中に入っていたようです。
ですが、いろいろと書類を用意し、申請するのは面倒だったのでそのままにしておきました。
そもそもたかだか3000円の為にやるほどのことでもないなあと思ったので。

そしたら先日手続きがされていません!という、おしらせの手紙が届きました。正直何も言わずに所得税等を還付するなりしてくれた方がありがたいですし、何より3000円とこれら封書等々の諸経費、どう考えても釣り合いません。バラマキもいいところだなあと思います。

ちなみに公式サイトはGoogleの広告もして告知をしているようです。なんだかもったいないなぁと思います… いや、「臨時福祉給付金」で検索したら上に[広告]…って出てきてむーん。ってなったんです。いや、そのワードで検索掛けたらもう広告踏まないで直接サイトみるでしょうに。公式サイトがSEOランク1(~10)位じゃないとかいよいよ作りの悪さが疑われますよ。

こういうのを作る側から考えた時、どういったところへ広告を打つことが一番効果的なんだろうかと考えたりしますが、何だかんだテレビやYoutubeのみたいなPush型の広告が一番知られやすいのかなぁと思うのですが、ウザがられるからダメかなと。あ、でも官公庁系の広告なんてウザくて当然みたいな雰囲気もあるからいいのかもしれませんね。お堅くてというか面白みのない広報が基本なんで。こういう官公庁系専門のデザイン会社とかってないのでしょうか。あったらぜひ教えてください。

あと、サイトの作りが微妙にウェブアクセシビリティが低い気がするのですが気のせいでしょうか。文字の読み上げにも対応してなさそうですし、大きさも変えられませんし、色覚弱者対策も取られていませんし… IEやEdgeには何とか対応しているようですが多くの方が見るサイトであれば当然対応していなければならないので当たり前っちゃ当たり前ですよね。そもそもこの程度の分量、厚生労働省のサイト内でもよかったのではと思いますが、そこは大人の事情とか広報の云々があるのでしょうから何とも言えませんね。

ドメインルートと/rinji/が同じ内容指しているのもどうなんでしょう。もうわけがわかりません。このサイトを作ったのは誰だぁ!(海原雄山

参考サイト:
臨時福祉給付金 トップページ
簡素な給付措置(臨時福祉給付金) | 厚生労働省

gerol's avatar

新規サイトを構築しました。

とある繋がりからイラストの掲載とブログの投稿をするサイトを作ることになり、かねてから勉強用のサーバでちまちまと作っていました。今日それを本番公開するために、(同じサーバ内でですが)構築しましたので手順をここにまとめたいと思います。
実績はgerolの個人サイトになりますが、技術的な手順くらいはこっちでまとめようかと思います。ちなみに、一般的なLAMP + WPです。

#ドメインを取得する
お名前.comでこれまでドメインを取っていたので、今回もここからとりました。正直、前年末に情報漏えいをやらかしていて、その対応の塩っぽさ(というか、お粗末さ)に辟易しているのですが、日本の巨大レジストラなので仕方ないかなと思っています。ほかのレジストラとかリセラー使っても大体GMO(系)なんで。
お名前.com
最初この情報(どこのレジストラ使っているか)隠そうかと思いましたが、ドメインのWhois見ればわかるので書くことにしました。

#DNSを設定する
新規サイトと言ってもサーバは同じ勉強用サーバを使うのでDNSは同じIPを指定します。wwwなしで公開する予定なのでとりあえずこれだけ設定します。今のサーバは存在しないサブドメインにアクセスすると404に飛びます。www有を転送させた方がいいのでよくないなぁとは思いますが、confの設定はあとでもいいので構築を完了させるのを先にします。
DNS

example.com A 3600 xxx.xxx.xxx.xxx

#configファイルを作成する
ドメインが変わるのでhttpd.confに書かず、新しくファイルを作成します。!nologとかua_denyとかはどっかみてあぁ…このロボット来てほしくないなぁと思ったものを設定していたかと思います。
/etc/httpd/conf.d/example.com.conf

<VirtualHost *:80>
  ServerAdmin  admin@example.com
  ServerName   example.com
  DocumentRoot "/var/www/html/s2/example"
  CustomLog    logs/example.com-access_log env=!nolog
  ErrorLog     logs/example.com-error_log
  <Directory "/var/www/html/s2/example">
      AllowOverride All
    <RequireAll>
      Require all granted
    <RequireNone>
      Require env ua_deny
    </RequireNone>
    </RequireAll>
  </Directory>
</VirtualHost>

#テストで作成していたファイルを本番ディレクトリにコピーする
上の例でいうところの/s2/exampleですね。丸っとコピペします。ただし、スクラッチ用に作成した静的ファイルはこの時点で削除します。あと、.htaccessも一旦削除した方がいいかもですね。

#本番WP用のDBとユーザを作成する。
これはタイトル通りです。わたしはPHPMyAdminが嫌いなので違うやつ使ってます。あれ重いしゴチャゴチャしてるんで必要最小限だけあればいい時に使うには不向きなんですよね。

#WPのインストール
DNSがそろそろ効いてくる頃なので、example.comにアクセスしてWPのインストールを実行します。実行したらinstall.phpは削除した方がいいんでしたっけ。たしか

#パーマリンク等設定を行なう
パーマリンク、ユーザ、プラグインの設定をこの段階で行います。

パーマリンクの変更を保存して新しい.htaccessを作成します。トップページ以外が404になる問題が発生しましたが、過去に行ったトラブルシューティングを見直して解決できました。今回はAllowOverride Allの記述忘れです。大元がNoneなので、記述しないと.htaccessが使えないのです。こういうときメモっていると安心できますね。Goodjob過去の自分。

ユーザは管理者のほかに、投稿だけできるユーザを作成してそちらを使ってもらうことにします。今回のサイトは作って終わりではなくgerolが管理して、依頼者は投稿だけできるようにします。勉強だからお金はもらわないけどポートフォリオに書くくらいの内容にはなったから良しとしています。Let’s 転職↓

プラグインも、テストサイトの段階で入れておけば有効化するだけでとりあえず動きます。設定が必要なやつは適宜コピペする感じで。All In One WP Security的なやつとかCrazy Born的なやつは毎回入れてるんでそれの設定とかですかね。

#GoogleAdsenseの登録
せっかくサイト作るならこれやった方がいいかなあという勝手な要望だけでなく、依頼者の「パッと見まとめサイト的な感じで」っていう、ちゃんとした要望もあって追加しました。どこにでも入れるとゴチャゴチャするので、ブログ的なページにのみ入れることにしました。gerolは性的な広告とかギャンブルの広告が出るのは嫌いなので出ないように設定しています。

#GoogleAnalyticsの設定
Google依存はよくないと思いつつ便利なのでつい使ってしまいます。プラグインのGoogle Analytics Dashboard for WPを使って簡単にできるのもまた楽でいいですね。
GoogleAnalytics側でフィルタは少し工夫する必要があるようです。以下の3つを除外します。
・トラッキングIDをホスト名に含むもの(SPAM対策)
・ホスト名がnot setのもの(SPAM対策)
・自分からのアクセス(IPアドレスの除外)
WPのプラグインでAnalyticsのものがあるのでそれを追加しようと思ったらどうにもパーミッションがうまくいかないなぁと思っていろいろ弄っていたのに、リロードしたらなんかうまくいって若干イラッとしているgerolです。

#faviconが出ない件について
Chromeだけでないみたいですが、キャッシュ削除すれば出るようなのであとで検証します。というか、作成し直しになったので見えなくても問題にならないというね。ロゴ考えるの難しいんだよなぁ…
追記:でました、でました。

#Twitterのタイムラインが出ない件について
更新しているChromeでは出ないけど、Firefoxでは表示されたので、いったん閉じてから再確認します。
追記:でました、でました。

#キャッシュの有効化とかgzip圧縮とか
Preview Post:サイトのレスポンス高速化 Part.2
ここでやったように.htaccessに追記しました。jQuery関連のasyncとかやってみたんですけど、不具合が出たのでやめました。

#表示に必要な最低限のページを追加する
動的なCMSなのでどうしてもDBごとコピーしない限り、ここは手動でやらないといけないんですよね。DBコピーはちょっと怖かったので手動で追加しました。というか、どこか問題あったらこの時点でわかるので手動のほうがいいかもしれません。

#全体の動作確認
追加で入れたいなぁと思う機能とかもありますが、いったんうまく動いているか確認して問題なさそうなのでこれで公開完了とします。

#最後に
GoogleにIndexしてもらいましょう。
Google Search Console

#所感
サイト作りって結構しんどい所があったりもするのですが、事前にできているとこんなにスムーズに進むんだなぁと結構感心しています。仕事でも最初からこうやってできていればヘイト溜めずにやれたんだろうなぁと思ったりもしますけど、そうそううまくいかないから仕事なんでしょうね。割り切ってできないから体悪くするんだよ。
SEOの対策なんかはまだ全く手を付けてないのでこれから色々とやっていこうかと思います。彼がどれだけコンテンツを増やしてくれるかは未知数ですが、どれだけ人が集まるのか気になるところです。

以上、gerolでした。

gerol's avatar

プラグインなしでページネーションをする時の問題と解決

ページネーションをとりあえず置きたい時、どっかからコードをお借りして貼り付けるのが定石かと思いますが、それをやった時2ページ目以降が1ページ目と同じ表示になる問題が発生しました。

プラグインに切り替えて表示させてみましたが、どうもループの書き方の問題のようでした。

CSSはメモし忘れたのですが、どこかからお借りしたものの残りだったかと思います。
phpのコードはここからお借りしました。

基本的なループが書きおわっている前提で見てください。

functions.php

function pagination($pages = '', $range = 4){
  $showitems = ($range * 2)+1;  

  global $paged;
  if(empty($paged)) $paged = 1;

  if($pages == ''){
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages){
      $pages = 1;
    }
  }   
 
  if(1 != $pages){
    echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
    if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";

    for($i=1; $i <= $pages; $i++){
      if(1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
        echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
      }
    }

  if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>";
  if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
    echo "</div>\n";
  }
}

index.php

<?php if (function_exists("pagination")) {pagination($additional_loop->max_num_pages);} ?>

style.css

.pagination {
  padding: 20px 0;
  font-size: 1em;
  clear: both;
  line-height: 1em;
  overflow:hidden;
  position: relative;
  text-align: center;
}
.pagination-box {
  display: inline-block;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 10px 15px 10px 15px;
  text-decoration: none;
  width: auto;
  color: #fff; /* 文字色 */
  background: #47BEA0; /* 背景色 */
}
.pagination a:hover{
  color: #47BEA0; /* マウスホバー時の文字色 */
  background: #F9D635; /* マウスホバー時の背景色 */
}
.pagination .current{
  padding: 10px 15px 10px 15px;
  background: #F9D635; /* 現在のページの文字色 */
  color: #47BEA0; /* 現在のページの背景色 */
}
@media only screen and (max-width: 413px) {
  .pagination {
    font-size: 12px;
    line-height: 12px;
  }
  .pagination span, .pagination a {
    padding: 8px 10px 8px 10px;
  }
  .pagination .current{
    padding: 8px 10px 8px 10px;
  }
}

問題は、ループのクエリにページの番号がうまく伝わらない(?)といいますか、2ページ目であることをきちんと処理できていないのが原因なので、WP_Queryにそれを含めます。
この解決法はここから引っ張ってきました。
index.php

<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
$query = new WP_Query( array( 'paged' => $paged ) );
?>

色とか形とか丸パクリもいいところですけど、動いたのであとで修正します。このサイトはいろいろなサイトのコードをより合わせて動いておりますのでそのうち全体の調整を行ないます。
デザインはYahoo!の開発しているPureというCSSテンプレートを使っております。残念なことにここ数年開発が止まっているようなのですが…
CSSテンプレートで有名どころと言えばTwitterが公開しているBootstrapですが、あれ重たいって評判なので手を出すのが怖かったのですよね。機能満載なのは魅力的ですけど。

gerol's avatar

サイトのレスポンス高速化 Part.2

Preview Post:サイトがなんか遅いっぽいので対策してみた

まだ行っていなかったCSS最適化、gzip圧縮を行なっていきます。HTTP/2はとりあえず後回しです。

#CSS最適化
最適化というよりは圧縮作業に近いですけど、もう更新する必要のない、テーマ的なCSSに関してはminifyをしていきます。自動化するほど数がなかったので以下のサイトを使いました。
CSS Minifier (スタイルシートの圧縮) | Syncer

入力すると勝手に圧縮してくれるんで楽ですねこれ。
~.min.cssという名前で保存して入れ替えました。

#gzip圧縮
これも前回のと同様一旦.htaccessで書いて問題無ければhttpd.confに書き直そうかと思います。というかほかにもやり方あるかと思いますが、面倒なのでまとめてできるこの方法使いました。どうせ人来ないんでCPUを多少食っても問題ないだろうという判断です。
コピペなんで元サイトを見てもらえればと思いますが、重要なのは1行目でgzip圧縮の宣言、5, 6行目で画像の圧縮は行わないことです。画像を圧縮しないのは基本的に不可逆なファイルだからですが、利用者に秘密で勝手に圧縮していた例もあるように、問題が発生する場合もあるようです。
.htaccess

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

cf, gzip圧縮でCSSやJSなどの転送量を減らす方法

ここで、Deflateができているか確認しました。
HTTP Compression Test Result
できてますね。よかったです。

あと、GoogleのSpeedTestをやると、毎回Youtubeの動画がスマホサイトだとはみ出すぞおい!って怒られるので何とかしました。っていうか、最初からそういう仕様にしていただければ問題ないはずなんですけどねGoogle=san。

HTML

<div class="youtube-video">
  <iframe src="https://www.youtube.com/embed/YmXToa2Uehk" frameborder="0"></iframe>
</div>

CSS

div.youtube-video{
  width:100%;
  padding:30px 0 56.25%;
  overflow:hidden;
  position:relative;
}
div.youtube-video iframe{
  width:100% !important;
  height:100% !important;
  bottom:0;
  position:absolute;
  top:0;
}

cf, YouTube動画の埋め込みサイズをレスポンシブ対応にする方法

ここまでやって、もう一度PageSpeed Insightsやったらかえってスコアが下がったのですがどうしてでしょう…
特にCSSの最適化はちょっと何言ってるかわかんないですってレベルで最適化できてないですね。

その後、画像の再度最適化を行なったり、いろいろ見直したところPC向けのスコアが88になりました。モバイルはまだ73だけど今のところこれくらいでいいんじゃないかなと思います。読み込み速度も2.9秒と3秒切りました。WP自身の見直しとかが必要かと思いますがそれはおいおい。てかGoogleのページ表示速度1秒以内ってかなり厳しくないっすか…?

gerol's avatar

サーバ代引き落としの季節

さくらVPS

このサーバはさくらのレンタルサーバ(VPS)にて運用しております。さくらにしたのはあんまり理由というほどのものはないのですが、ネームバリュー的なところが大きかったかと思います。
前職でもかなりの頻度で使ったことありましたしね。自分の勉強用にはお名前.comのVPSを借りてみてるのもあるのであえて違うのを選んだってのもあります。そっちは完全に値段で決めました。さくらより3000円も安いですからね。おまけに最初に手数料も取られないですし。でも、ドメイン自体はお名前.comでとってるんだし実験的要素以外に何も選択した理由が見つからないなぁ。サーバも特にスループットが早いとかそんなこともなさそうですし。

2015年5月に集まって始めた印籠会ですが、サーバを借りたのは同年のこの時期だったかと思います。今年も請求が来てどうしようかなぁ…となっているgerolです。サーバとかドメインとか低レイヤーに関してはわたしがまとめてやっているので、いくらかかったかだけ教えて折半する感じになってます。だいたい食事代になって返ってくるんですけどね(笑)

サーバ代の微々たる足しにでもなればとGoogleAdsenseもやってみてはいますが、そもそも閲覧者自体が少ないのでクリックされることはほぼないのが現状です。もっと有用な記事を増やさないといけないですね。

一年かかってようやくDBの枠組みが出来上がって、上のガワも大体出来上がったところまで来ました。これまだ借りなくてもローカルでよくない?という感も否めませんが、多分そうしたらもっと進んでいない気もします。ちなみに、目標としては来年の1月に一通りの機能を盛り込んだベータバージョンをローンチしたいと取り組んでいます。2月にあるイベントに参加できればいいなぁというところですね。そうなると来月の印籠会までに一部機能を作り始めていたいと考えているのですがどうにも進んでいないのが現状です。せめてユーザ登録機能だけでも…

いまさらではありますが、ようやっとCMSへの完全移行が完了しました。正直面倒くさかったです。やたら重たくなってしまったので何とかしないといけないと考えてちょこちょこと変更は要れていますが、先ほど激重になりコンソールに入ったらディスクI/Oの制限を掛けられていることに気づき、どこか下手こいている可能性に頭が重くなっています。「とりあえず再起動」という呪符で対応。多用できない対処療法です。

HTTP/2に対応、gzip圧縮、CSS最適化したらもうちょっと早くなるかなぁと思っているgerolでした。サーバ自体が重たいのも何とかしないとね。

gerol's avatar

サイトがなんか遅いっぽいので対策してみた

GTmetrixSpeedTest Image

もともとサーバのチューニングとか全くと高速化といったことは全くと言っていいほどしていないんですが、WordPressにしたことでめっきりスピードが落ちてしまったので出来るとこからかいつまんで対策をしていきました。
それより前に一時でもuptimeのLoadAverageが5を超える状態を何とかすべきでは…

やったこと一覧
・jsを非同期で読み込みさせる
・一部画像の圧縮
・Expiresの設定
・KEEP-ALIVEを有効にする
・opensslを1.0.2jにアップデート(HTTP/2に関連して)

#jsを非同期で読み込み
これは<script>タグに

defer async

を追加するだけで実現できます。あまり古いブラウザは対応していないでしょうが、そんなブラウザまでサイトを対応させるつもりはないので新しいので見てください(バッサリ)

#一部画像の圧縮
アバター画像を圧縮してみたのですが、まだ圧縮しろって怒られてます。9割くらい減ったと思うんですけどね。Twitterの画像とかGoogleAdsの画像を圧縮しろってのは無理な話なんでGoogleさん察してください。

#Expiresの設定
再読み込みの削減にはこの設定がいいらしいのでとりあえず.htaccess1にweeksで設定してみました。いろいろ弄る際はこれ切らないと面倒ですね。これまたGoogleの何やかんやがExpires短いじゃないか!と怒られましたがGoogleさん、察してください。 コメントアウトはそのうち使うかなぁと残してあるだけ。(シンプルでいろ的なルールには反しますけど)
.htaccess

#CACHE SETTING
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 weeks"
#ExpiresByType text/html "access plus 2 hours"
#ExpiresByType text/css "access plus 1 days"
#ExpiresByType image/gif "access plus 1 weeks"
#ExpiresByType image/jpeg "access plus 1 weeks"
#ExpiresByType image/jpg "access plus 1 weeks"
#ExpiresByType image/png "access plus 1 weeks"
#ExpiresByType image/x-icon "access plus 1 weeks"
#ExpiresByType text/javascript "access plus 1 days"
</IfModule>

cf, Apacheのmod_expiresというキャッシュモジュールを使ってWEBサイトを高速化しよう

#KEEP-ALIVEを有効にする
これも.htaccessにかくやつですね。本当はhttpd.confに書いてしまうのもいいのかもしれませんが、まずはこっちに書いて運用上問題なければってことで。
.htaccess

#KEEP ALIVE
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>

cf, WordPressのページスピードを1秒でも早くするためにやってみたこと

#opensslを1.0.2jにアップデート
HTTP/2を使えば早くなるかなぁと思ったのですが、それより前にサポート切れるopensslをアップデートしなければ!みたいな記事を見つけたので急きょそちらの作業をすることに。自分でmake installするのは毎回上手くインストールできるか不安です。案の定今回もちょいちょい躓きました。いろいろ見てたら参照サイトメモするの忘れてしまった。Qiitaだったのは覚えてるんだけど…
cf, 事前予告されていた OpenSSL のアップデートが公開されたので OpenSSL 1.0.2a を入れた件

パトラッシュ、HTTP/2入れる前に眠くなっちゃったよ。

とりあえずここまでやった成果としてGTmetrixのPageSpeed ScoreがD(68%)→C(70%)、PageLoad Timeが5.3s→3.5sになりました。2秒も早くなったら大したもんですよ(自画自賛) まあ、GoogleSpeedTestのスコアは6点くらいしか改善しなかったんですけどね。CSSの読み込みとかgzip圧縮とかまだまだやることありますね。Googleは1秒以内にページを表示させろとか言ってますけど、まだまだ先は遠そうです。

9mang's avatar

所信表明オンリーです。

はじめまして。9mangと申します。

いつの間にかちょっとかじったプログラム開発で一山当てようプロジェクトに加わってた正社員(幹部候補)です。

会社で得たtipsとか書いてくれと言われておりますが、正直所謂普通のSierのプログラムなんてレガシーもいいとこです。

なんで、そんなに書けることがあると思えないのですが、自分の備忘録みたいに書いていくのかしらとか。

とまぁ、取り急ぎ最初の所信表明まで。

次はいつぞや。それでは。