第二回目のデザイン変更開始

このブログのデザインは、ついこの前変更したばかりと思っていたが、早いもので、前回の変更して以降、約2年の歳月が経過していた。
この間、幾つかの不具合を黙認し続けてきたが、やはり修正しようと思い立った。だが、修正にも労力を要するので、同じ修正なら、併せてデザインも変更することにした。GoogleのサービスであるBloggerは、ネット上にたくさんある「テンプレート」をダウンロードしてきて、自分のブログに適用させれば、あっという間にデザインが変更される。

テンプレート決定

早速、ネット上で検索し物色していると、「Memento Creative」という最高にフェミニンなデザインのテンプレートに出会った。Wild Lifeというタイトルには全く似つかわしくないデザインであるが、逆に野生感溢れる雄々しいデザインで、イケてるテンプレートは中々存在しない。必要なことは、インパクトがあり、スッキリとしたデザインで、必要な機能が組み込まれ、SEO対策もそれなりに施してあればよいのだ。

海外テンプレート問題

だが、ネット上で見つかるイケてるテンプレートは、ほぼ海外製であり、異なる文化での使用を前提としていて、日本語又は日本の日付表示文化に対応していない。
これを修正するためには、多くの場合、テンプレート上のJavaScriptを修正することとなるが、そのコードの場所を特定し、解析し、該当コードを修正していく作業は、素人には困難を極める作業だ。

機能修正

概要表示部分の修正

まず、表示されるWebページから、問題となる箇所のタグを確認し、そのタグのID又はClassを確認し、その付近のJavaScript関数の呼び出しを確認し、その関数の呼び出しもとを探し、その関数を解析し、問題となる箇所を特定、修正する。
このテンプレートで言えば、7416行で呼び出している「createSummaryAndThumb」という関数を修正するのだが、呼び出し元が難読化されているので、まずはこれを復元し、置き換える必要がある。
そして、投稿概要の出力において、アルファベット文化を元に設計されている、半角スペース60個分、要は60個の単語を出力されることとなっている部分を、「。」三つ分で出力するように変更し、ついでに、h2以降のタイトルは省略するように改変する。
続いて、月日年の順に表示される日付を、年月日の順に改変する。
なお、ここの修正に関しては、わざわざコードが難読化されていた部分なので、詳細な説明は省略させてもらう。

スライダーの表示崩れ問題の修正

トップページを表示した場合は、ローディング画面が表示され問題ないが、ラベルを指定して表示(URLに「/search/label/ラベル名」を追加した場合)させる際には、スライダーが表示されるにもかかわらず、ローディング画面が表示されないため、スライダー画像の崩れが見られ、みっともない。
これを回避するために、6174行以降で、純粋なトップ画面の時だけローディング画面を表示するようにされている部分を修正する。この修正は、Blogger特有のXMLタグの修正だ。
(修正前)

<b:if cond="data:blog.url == data:blog.homepageUrl">
 <div class="site-loader">
  <div class="spinner">
   <div class="dot1">
    <div class="dot2">
    </div>
   </div>
  </div>
 </div>
</b:if>

(修正後)

<b:if cond="data:blog.pageType != "item"">
 <b:if cond="data:blog.pageType != "static_page"">
  <div class="site-loader">
   <div class="spinner">
    <div class="dot1">
     <div class="dot2">
     </div>
    </div>
   </div>
  </div>
 </b:if>
</b:if>

スマホのページナビ問題の修正

ページナビがスマートフォンで表示した場合に機能しない問題があるので、7197行の「pageNavi」JavaScript関数を修正する。
コードは一行に纏められているので分かりにくいが、そのうち、次の部分を改変する。
(修正前)

f = encodeURIComponent(f);
if (m.indexOf(f) != -1) {
 n = d
}

(修正後)

f = encodeURIComponent(f);
mblf = f.replace(/%3A/g, ":");
if (m.indexOf(f) != -1 || m.indexOf(mblf) != -1) {
 n = d
}

デザイン修正

基本的な事項は、ダウンロードしたテンプレートのフォルダ内にある「Documentation」を読めば大体わかると思う。
後は、自分の好みに合わせて、CSS等をいじって細かな設定をしていけばよい。

終わりに

テンプレートをダウンロードしてきて、修正し、適用するだけだが、約一週間、延べ4日くらいの時間を要した。結構な労力だったが、過去になく完璧な仕上がりだ。

最近になって、やっとPCを買い替え、OSもVistaからWindows10に変わった。

  C:\hoge\hoge>cd test
  C:\hoge\hoge\test>

ドライブも変わる場合は「cd/d」コマンドで。

  C:\hoge\hoge>cd/d D:\hoge\hoge\test
  D:\hoge\hoge\test>

コマンドプロンプトで作業する際に「移動する」とサラッと説明されている場合があるが、例えば、Opensshでssh接続する際は、そのプログラムがどこにあるかを「path」コマンドでシステムに事前に教えてあげるということだ。
その後に、sshコマンドでssh接続を行う。

  path C:\Program Files (x86)\OpenSSH\bin
  ssh user@domain.sakura.ne.jp

Cygwinについて

Cygwinは、見た目がコマンドプロンプトと似ている。
Windowsではフォルダやファイルのパーミッション（アクセス権限）の設定が行えないので、コマンドプロンプトでパーミッションを設定するコマンド「chmod」を打ち込んでも機能しない。
しかし、Cygwinを使えば、この問題を解消できるようである。
VCCWを使うにあたっては、ssh接続を使ったほうが良いようなので、作業はコマンドプロンプトではなく、Cygwinを使ったほうが問題が起きにくい。
なお、「vagrant up」のコマンドを行う際は、Cygwinを管理者権限で立ち上げなければ、処理は正常に終了しない。管理者権限で立ち上げるには、Cygwinのアイコンを右クリックし「その他」から「管理者として実行」を選べばよい。
なお、Cygwinでは、CドライブやDドライブなどは、全て「cygdrive」にぶら下がっていることとなっているようなので、注意してほしい。

ssh接続（公開鍵のリモート設置）について

紹介した連載におけるローカルとリモートのssh接続においては、リモートサーバーをエックスサーバーとして説明されているが、俺はさくらのレンタルサーバーであったため、公開鍵のリモート設置の方法が異なった。
作業は全て、Cygwinで行う。Vagrantを立ち上げ、仮想環境にssh接続し、仮想環境の立場で秘密鍵と公開鍵を作成し、それらのパーミッションを書き換え、リモートサーバーに公開鍵を名前を変えてコピーし、リモートサーバーの公開鍵のパーミッションを書き換える。
実際のコマンドは次のとおりだ。

  # VCCWのフォルダへ移動
  cd /cygdrive/D/hoge/hoge/vccw/

  # Vagrantを立ち上げる
  vagrant up

  # 仮想環境にssh接続
  vagrant ssh -t rsa

  # 鍵を生成
  ssh-keygen

  # パーミッション書き換え等
  chgrp -R Users ~/.ssh
  chmod 700 ~/.ssh
  chmod 600 ~/.ssh/id_rsa
  chmod 600 ~/.ssh/id_rsa.pub

  # リモートサーバーに公開鍵をコピー
  scp ~/.ssh/id_rsa.pub ユーザー名@初期ドメイン.sakura.ne.jp:~/.ssh/authorized_keys

  # リモートサーバーにssh接続
  ssh ユーザー名@初期ドメイン.sakura.ne.jp
  # パスワードを入力

  # リモートの公開鍵のパーミッション書き換え
  cd vagrant
  chmod 400 ~/.ssh/authorized_keys

  # 終了処理
  logout
  vagrant halt

ローカルサーバーが重い

  #
  # Virtual Machine Settings
  #
  memory: 1024
  cpus: 1

ここで、「cpus」を増加させたいところだが、Windowsではいじらない方がよさそうである。

もう一つは、WindowsがNFSに対応していないことが原因で時間を要していることを解決する方策で、NFSに対応できるようプラグインを導入し、VagrantfileにNFS関係の設定を書き込んでいく。
まずは、プラグインをインストールする。

  vagrant plugin install vagrant-hostsupdater

  #元の記載
  config.vm.synced_folder ".", "/vagrant",:mount_options => ['dmode=755', 'fmode=644']
  config.vm.synced_folder _conf['sync_folder'], _conf['document_root'], :create => "true", :mount_options => ['dmode=755', 'fmode=644']

  #次のとおり書き換え
  config.vm.synced_folder ".", "/vagrant", type: "nfs"
  config.vm.synced_folder _conf['sync_folder'], _conf['document_root'], type: "nfs"

最後に

さて、VCCWの一番のメリットは、wordmoveによるデータベースの同期である。頻度が低ければ、それ以外にVCCWでなければならない理由は特に見当たらない。
これだけ苦労してWindowsでVCCWを使うかどうかは、検討したほうが良いだろう。

今日、かねてからの懸案であった「漢塾」のサイトをリニューアルオープンを完了させた。
このサイトの構築には非常に苦労した(詳細は漢塾サイトの「漢塾ホームページリニューアル奮闘記」参照)が、このほか、最近「萩城下町マラソン」、「山口県企業局」、「Wild Life」(このサイト)の３つのサイトを構築した。
ウェブサイトの構築は好きだが、収入を得ている訳でもなく、常に何らかのウェブサイト構築に関わる人生にいい加減飽きてきた。
今日をもって、ウェブクリエイターを退職することにする。

今回、思い立ってブログデザインをリニューアルすることにした。
ブログはGoogleの「Blogger」を利用している。「Blogger」のデザインテンプレートはフリーでネット上にあふれているが、レスポンシブデザインでセンスが良く、シンプルかつ、表示が崩れたりしないといった質の高いテンプレートを見つけるのは簡単ではなかった。
最終的には「BLOGMAG」というテンプレートをカスタマイズして使用。
これに伴って、「Wild Life」のロゴもデザインしてみた。
山や川、海、といった活動フィールドを表す山と水、そしてフライフィッシングやカヤックフィッシング等の釣りも好きなので魚も加えたロゴマークにした。
アルファベットはスッキリしていて、かつ単調でもないフォントをベースに若干手を加えたもの。
我ながら案外気に入った。

最近、Bloggerでブログを更新してもFacebookへ反映されない。原因不明。
Facebookの「RSS Graffiti」ってアプリを使って再設定してみた。

友人がFacebookデビューしていた。俺もついでにデビューしてみた。
ついでに、前から気になっていたブログもBloggerで始めてみた。
Bloggerで書いたブログを、Facebookのノートに自動的に流し込むこともできるようなので、ここを参考に設定してみる。