リンクチェックって、手間ですよね。ほんと、手間ですよね。Movable TypeなどのCMS使っていればリンク生成はほとんど自動なので気にしなくていいのですが、通常のWEB制作だとリンクつけるのも手動なので、人為的ミスが発生しがちです。

前職でご一緒させていただいた jamadamさん謹製の「WWW-Crawler-Mojo」というツールがあります。このツールの機能の一つとして、リンクチェック機能が存在します。これ、本当に便利です。なにが便利って、スクリプトを走らせたら、あとは再帰的にリンクを辿ってくれすので、細かい設定などは気にせずに待てばいいだけ。ページ数少なくてもそこそこ時間がかかる(一つ一つリンクチェック)ので、その間は他の作業をして待っていましょう。

70c37cfc6be307b2cea536873d0cdc1b5252789c.jpg

今回はWindows環境でやります。まずは、Perlが使えないといけないので、ActivePerlかStrawberryPerlをインストールします。今回はStrawberryPerlにしました。

windows-strawberryperl.png

StrawberryPerlのインストールは、インストーラ版ならダブルクリックでヒョイヒョイとインストールしていきます。通常のWindowsアプリを同じ感覚です。インストールが終わると、WindowsのメニューにPerl(command line)が表示されます。クリックして起動しましょう。

cpanがいくつか必要なので、コマンドを打ってインストールします。

cpan WWW::Crawler::Mojo

終わったらこちらも。

cpan IO::Socket::SSL

これで利用できる環境が整いました。

次は、以下のコマンドを打ちます。

perl ./example/checkbot.pl https://hogehoge/

checkbot.pl は、以下のzipを解凍してできたフォルダ内(WWW-Crawler-Mojo-master)にあります。

ダウンロードURL WWW-Crawler-Mojo

実行されると、標準出力で結果がツラツラと表示されていきます。とはいえ、標準出力だとあとが辛いので、ファイルに出力するようにしましょう。

perl ./example/checkbot.pl https://hogehoge > fugafuga.txt

出力の例はこんな感じ。すべてのリンクの結果が帰ってきます。

332: 404 occured! at https://www.hogehoge.jp/item.php <= https://www.hogehoge.jp/sitemap.html

  • 番号(332:)
  • ステータス(404 occured!)
  • リンクが切れている <= リンク元(at https://www.hogehoge.jp/item.php <= https://www.hogehoge.jp/sitemap.html)

基本的には、ステータスコードを検索をかけて、一つ一つ確認していくようになります。コマンド叩けば自動でここまでやってくれるので、だいぶラクちんです。

CIツールを使うともっと楽なのかもですが、企業ウェブサイトや小さなECサイトくらいだと、やはりCIの導入は敷居が高いです。リンクチェックだけなら、もっと気軽にできたほうがいいですしね。

参考URL

  1. WWW-Crawler-Mojo

証跡(しょうせき)や、証跡管理という言葉があるのを、恥ずかしながら今更知った。

Wikipediaではその言葉はなく、エビデンス をGoogleさんがサジェストするようです。ほかのウェブサイトでは、こんな風に説明されています。

後々の証拠となるような痕跡(こんせき)。

コトバンクさんの「証跡」より、引用。

ITのシステムは、バグや不具合について、「何が原因だったか」を探ることが本当に多いです。ログの解析を中心とし、さまざまな角度から原因の特定を行います。そして、再発しない為の策を考え、実行するのが日常です。

2bbf30bb1026b8b5fc60e2f287eef50f28cf8f21.jpg

証跡管理ツールというのもあるようですし、なじみがあるのはバグトラッキングツール。RedmineやBacklog、Githubなんかでも管理できるようになってきています。情報は増えますが、情報がないところから探すのは本当に苦労が多いので、常にロギングするような仕組みの方が事故防止・再発防止が出来ると思います。

再発防止が出来ないとなかなか厳しい状況になっていくので、しっかりと対策が出来るようにならないとです。

Moable Type(以下、MT)は、Content Management System(CMS)です。10年以上前から利用され、ずっと進化し続けているツールでもあります。初期の頃はブログツールとして爆発的に利用されました。
WordPressはMTをインスパイアして誕生し、今ではとても人気のあるCMSになりました。

そんなMTを未経験の方がどのように勉強していけばよいか、というのをざっくり書いていきます。
ステップに分けていくので、ご自身にあったところを参考にしていただければ。

全く触ったことない!WEB制作とか未経験!

誰でも最初にはみんな初心者です。最初からデキる人なんて誰もいません。
最初から自転車に乗れる人なんていないので、みんな転んだりふらふらしてこいだりしているのです。

まず最初は、MTを触ってみましょう。

無料で触れるMTといえば、movabletype.net
クラウドサービス版のMTです。まずはこちらを会員登録して、ゴニョゴニョ触ってみましょう。
MTファミリーの中でも一番末っ子で、多少の差はありますが気にしなくてOKです。

WPでいうところの、wordpress.com みたいなものです。

レンタルサーバを借りて、自動インストール(MTOS)

特定のレンタルサーバでは、CMSツールやWEBアプリケーションの自動インストールを提供しているところがあります。コレを利用すると、インフラやネットワーク、サーバ周りの難しい話を回避できます。MTだけでなく、Wpやxoops、DrupalやPukiWikiなども自動インストールできるかもしれません。
レンタルサーバ選びはなかなか難しいかもですが、GMOペパボさん系列の安いのでも良いですし、xserverさんとかでも良いです。AWSだとAMIを使うとMTがインストールされた環境を利用することができます。詳しくは、Movable Type for AWS をどうぞ。
個人的なおすすめは、xserverさんかも。なんとなく借りてずっとそのまま使っているので(笑)

デザインしよう

MTを触ったことがあり、自分でデザインしたい場合はこちら。
デザインツールはなんでもよいので、自分のデザインをしましょう。ブログだったり、友だちの会社のホームページだったり、ファンクラブだったり。MTは様々な要件に対応可能です。
デザインはWEB制作と変わりません。やることはいわゆるWEBデザイナーさんのお仕事です。

  1. グラフィックツールでデザインする(Photoshop、イラレなど)
  2. HTML/CSS/Javascriptなどでコーディングする(デザインデータなくて、ここからなんて場合もあるかも)
  3. ブラウザで表示を確認

この辺もWPと変わりませんね。コレを行うことで、テンプレート作成のための素材ができます。

テンプレートを作ろう

MTもWPも、テンプレートを作ります。テンプレートに記述された内容を元に、閲覧者への表示をサーバが返しています。簡単に言うと、テンプレートがあるから表示することができるんだよ、という感じです。
そして、このテンプレートが作れればもうMT未経験は卒業です。勉強方法は、2通りあります。

①書籍・インターネット上の情報で勉強

MTは書籍がたくさん出ており、勉強するのに困らないツールです。初心者向けから、上級者向け、プラグイン制作者向けなど、幅広い書籍が出ています。ただ、書籍は好みがあったり、たくさんありすぎてわからない!ということも多いので、MT使っている人におすすめ書籍を聞いたり、MTコミュニティの人に聞いてみるといいと思います。
ちなみに自分のおすすめはMT4ですが、Movable Type 4 新しいWebサイトの黄金則-MTで実現するCMSサイト構築のすべて です。

当時はフューチャーフォン全盛で、PCとフューチャーフォン向けのサイト制作が書かれていた書籍が必要で、こちらを愛読していました。

インターネットでの情報収集からの勉強は、どちらかというとポイントポイントでの勉強です。体系的に学習するならば、書籍を一冊通してやるほうが圧倒的に有益です。体系的に知識を得たあとに、ポイントを調べていくと、効率的に体得することが可能です。

MTは、インターネット上の情報がとても多いです。MTタグと呼ばれる表示用のタグは、オンラインのリファレンスですぐに調べることができます。本当に便利です。ニッチなタグの場合は英語でしれっと説明が書いてあって、読んでもよくわからないところがあるのは愛嬌です。

②MTに同梱されているテーマで勉強

MTには、標準で幾つかのテーマが付属しています。WPでもテーマがありますね、というかWPのテーマはとてもおおく、高品質なものも多いですね。
テンプレートファイルは、ウェブサイトまたはブログにそれぞれ読み込むことができます。そのテンプレートファイル(いくつか種類があります)の中身を見ると、HTMLとMTタグが混在していることがわかります。

図にもあるとおり、見慣れたHTMLタグの他に、見慣れない <$mt:BlogName encode_html="1"$> というのがありますね。mt: となっているものがMTタグです。コレを使うことで、DBに保存されたデータを呼び出すことができます。
<$mt:BlogName encode_html="1"$> はブログの名前を表示するMTタグです。タグの名前からもなんとなく推測できそうです。

最後に

今時なWEB制作ならば、WPが多いと思います。でも、案件によってはMTを使うこともあります。仕事の幅を広げるためにも、ぜひ使ってみましょう。

いまだにGL01Pを利用しています、とても快適です。

今はもうない?無制限使い放題プランなので、通信容量制限がある新しいプランに乗り換えるのはなさそうです。かえるなら端末はそのままで、格安SIMで無制限にするかどうかくらいです。

そんなeMobileのGL01Pですが、つながりにくくなったことがあったので、備忘録としてのこします。

今回は、二つの事象があったので、それぞれの解決策を。同じ事象にあわれた方は、ぜひお試しください。

通信方法がWPA2からWPAに変わってた

mt-20160825141414.jpg

GL01Pの側面には、ボタンがいくつか存在します。ハードウェアボタン、いいですよね。

右側側面の上の方にあるWPSというボタンですが、これは長押しすると通信方法の切り替えをします。何かの拍子にボタンが長押しさせることがあるのかもしれませんが、この切り替えでつながるかお試しください。
自分は、WPA2だったのが、WPAに変わっていました。

ちなみに事象としては、Wifi につながるけど、ネットにつながらない、です。

DNSがパツパツ?

ネットワークに詳しくないのでなんともですが、回避策を。DNSサーバを7.7.7.7 に変えるとつががるようになります。GoogleさんのDNSサーバで名前解決する、というやりかたです。

eMobileのデフォルトになっているDNSサーバが、格安スマホとかの問題で混み合ってしまっているかどうかはわかりませんが、なんとなくそんな感じがします。

ちなみにこの作業は、Wifi でつないでいる状態で、ブラウザのアドレスバーに、192.168.0.100(または192.168.0.1)と打ち込むと端末の管理画面に接続します。

契約時のパスワードを使って端末の設定画面から変更します。ぼちぼちの難易度です。いくつか紹介しているサイトがあるので、そちらを参考にすればできるはずです。

一つだけ注意点ですが、iPhoneのブラウザから端末の設定変更をしにいく場合は、スマホ画面ではなくPC画面では設定変更してください。自分はログインできなくて、PC画面に切り替えたらできました。

PC画面への切り替えは、設定変更画面の下の方にリンクがあります。

まだまだ公衆無線LANの普及が進んでいないので個人で端末を持っていますが、東京オリンピックの頃には都内はきっと整備されてるはず。

CMSツールとして人気のMovable Typeには、AWS AMIがあります。これは、MTに最適なチューニングがされたインスタンスをすぐに手に入れることができる、とても素晴らしいソリューションです。WordPressだと、AMIMOTOのような超高速WordPressと同じような仕組みです。

ライセンス料は、AWSの方で月額として支払います。イニシャルが少なくすむのでいいですね。

さて、Plackを使ったpsgiで動作するMTは、今までのMTとは異なり、管理画面をキャッシュします。fastCGIもキャッシュするので、この辺りの管理画面高速化してる方には馴染みがあるかもしれません。

参考

しかし、大半の方は馴染みがないでしょう...。

psgiで動作させていると、プラグインのインストールやプラグイン設定が反映されないことがあります。これは、管理画面高速化のためのキャッシュの影響で、キャッシュをクリアすれば解消されます。

キャッシュのクリアは、とても簡単です。でも、管理画面のどこにも書いてません。

MT for AWSの管理画面キャッシュのクリア方法

  1. システム管理者権限でMTの管理画面にログイン
  2. システムダッシュボードに遷移
  3. 左メニューの設定をクリック
  4. 全般設定画面が表示されるので、何もしないでそのまま「変更を保存」ボタンをクリック
これで完了です。もしデータベースのスキーマ変更が必要なプラグインをインストールしていたら、アップデート画面が表示されるはずです。
2016-09-09-mt-psgi-plugin.jpg図:管理画面:設定>全般

MTは、すでに10年以上前からあるアプリケーションです。現在も開発が続けられており、MTユーザーグループも活発に活動しています。

Perlベースなので、技術的に枯れていることで、セキュリティにも比較的強い構成になっており、現在はまた人気が上がってきています。
古いバージョンのMTを使われている方は、ぜひ最新版にアップデートして、使い勝手の向上を実感してみてください。

会社に余ってたHHKBを引っ張り出して、パソコンにつないでみた。そう、USBのやつ。最新のはBluetoothなんだよね。

いろいろと評判には上がるけど、テンキーに慣れるとテンキーなしは厳しいなー、なんて思いつつ、余っていたのでお試して。

いやぁ、慣れないうちはなかなか厳しかったです。。。今までのキーバインドじゃないし、使っていたショートカットもなくなるし。Windows10でアプリ起動をショートカットにできたんだけど、これがまだできなくてツラいです。せっかく覚えたのに。

ちなみに、Windows10では、タスクバーに登録してあるアプリを Win+数字 で起動できます。数字は左から数えた番号です。使えるけど、なんて雑な仕様なのかと。いや、順番変えられるし、いいんですけどね。

mt-20160908094421.jpg

まだまだ慣れませんが、このキーボード、音がいいんです。なんというか、カタカタ カタカタ するんです。ほんと、カタカナな感じの音。カタカタ カタカタ カタカタ。

たたきやすいので、ミスタイプもしづらいし、キーが少ないから打ち間違いもすくない。そして、ものすごいコンパクト。机の上がスッキリしました。有線でも問題ないかな。

Ctrlキーが、shiftキーの上にあるので、Photoshopとか使うときは、ちょっと慣れに時間がかかるかも。自分はしょっちゅうshiftキーを押しながらコピーしようとして、なんもペーストできない!?というミスを繰り返していました...。

1万円超えるキーボード、HHKBですが、これはなかなかお勧めです。文章や文書を書く方には、とてもよいキーボードです。

最近ちょいちょい行くようになった虎ノ門ヒルズ。3年前くらいにデビューした高層ビルです。ドラえもんならぬ、トラエモンがいるので、ぜひ会いに行ってみてください。

さて、打ち合わせの空き時間とか、打ち合わせ後の打ち合わせ(謎)で、話し合いをするときにカフェに行くことが多いですよね。

すぐ話し合うことで、鮮度の高い情報で判断できるし、職場とは違う雰囲気がいい感じだったりします。

虎ノ門ヒルズには、toranomon koffee というカフェがあるのですが、なぜcoffee ではなく koffee となっているかはおいといて、ドリップコーヒーがメニューにあります。

ドリップコーヒーだと、夏場のアイスコーヒーの大量摂取と違って、あまりダルくならないのがいいんです。よくあるアイスコーヒーは三杯目でもう...。

mt-20160902151329.jpg

お店の雰囲気もよく、ドリップしてくれる人の対応も丁寧でよいです。価格は安くはないですが、ヒルズ価格なんだと思います。

しいていえば、イスが硬めの木のイスで、あまり座り心地はよくないです。打ち合わせ利用なので、それが良かったりもするんですが、のんびりしたい方には、向いてないかもしれません。

虎ノ門ヒルズに行ったときには、ぜひ立ち寄ってみてくださいね。


システムが絡む制作をしていると、URLが同じでも条件によって表示を変更する動的なページの制作をすることがあります。動的なサイトだとよくありますね。

ECでも例えば売り切れの時は「SOLD OUT」を表示して、カートボタンを非表示にする。そのかわり、「商品リクエスト」ボタンを表示するとか「在庫が入ったら通知する」みたいなボタンを出したりします。これは、その時の状態(在庫)によって、表示を変えています。

ページ制作側は、一つのページに要素を全部入れちゃうこともあれば、別ページとして制作する場合もあります。

今回は非常にニッチなケースですが、これでルーチン化できたのでいいかなというものをご紹介します。

2016-09-06-blog-ogp.jpg

要件

  1. 同じページだけど、条件によって表示が異なる
  2. 表示が違うものは別ページとして制作している
  3. 制作したページをファイルとしてゲットしたい(wget)

そもそもなんでそのまま渡さないの?

制作したものをそのまま渡せばいいのですが、今回は以下の要件があり、そのまま渡せませんでした。

  • PHPやSSIなどのインクルードファイルは、インクルードファイルではなく、ページで読み込んだ状態のページデータがほしい

ということで、wgetしなければならないとなりました(アドバイスくれた方、感謝です)。

実現方法

  1. PHPでファイル一覧を取得し、リンクをはった表示をするスクリプトを用意する
  2. wgetコマンドを叩く

1. PHPでファイル一覧を取得し、リンクをはった表示をするスクリプトを用意する

参考サイトにスクリプトがあるので、今回はこちらを利用させていただきます。本当に感謝です。

このソースコードを、filelist.phpなどの名前で保存して、一覧を取得したいディレクトリに置きます。

参考サイト ディレクトリ内ファイル一覧表示

<?php
$DIR = "./"; //一覧表示するディレクトリ
function printfile($dir) {
$opendir = opendir($dir);
while($file = readdir($opendir)) {
if($file === "." or $file === "..") {
continue;
}
$file = $dir . "/" . $file;
if(is_dir($file)) {
printfile($file);
continue;
}
if(preg_match("/\.s?html$/", $file) and filesize($file) > 100) {
$filename = preg_replace("/^[\.\/]+/", "", $file);
echo "<a href=\"$file\">$filename</a><br>\n";
}
}
closedir($opendir);
}
?>

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FileList</title>
</head>
<body>

<?php
printfile($DIR); //ファイル一覧表示
?>

</body>
</html>

filelist.php にブラウザでアクセスして、ファイル一覧とリンクが付いているかを確認します。なお、コードの見ると、HTMLかSHTMLのみ一覧化するように拡張子の判別処理が入っています。他の拡張子の一覧を取得するならば、そのあたりをカスタマイズするとよさそうです。

2. wgetコマンドを叩く

wget コマンドは、WindowsにもMacにも標準で入っていないっぽいです。自分はWindows使いなので、Cygwinを入れてコマンドをたたいています。Windowsな方は、ぜひCygwin を入れましょう。

こんな感じのコマンドで実行します。

$ wget --http-user=Basic認証ユーザー名 --http-passwd=Basic認証パスワード -r -l8 https://ホスト名/filelist.php

開発中のデータなので、Basic認証がかかっていました。認証用のユーザーIDとパスワードをオプションで設定します。再帰的に取得するならば、-r は欠かせません。-l で階層の深さを指定しましょう。

今までまともにwgetコマンドを触っていませんでしたが、これ便利ですね。サーバ移行とかするときに、静的なページだけであれば、これだけで以降用のデータが作れちゃいそうです。

参考URL 【 wget 】 ファイルをダウンロードする

URLにパラメータを付けて、リダイレクトした後もそのパラメータを引き継ぎたい、という場合の対処法です。覚えておくととても便利。

もしプログラム側でリダイレクトをしていると、プログラム内にパラメータを受けなくてはならず、適切に処理をしないとセキュリティの対象となってしまいます。GETパラメータは、ユーザーの任意の入力を受け付けるので、サニタイズしていないと大変まずいです。しっかりサニタイズしましょう。

今回のこの方法が使えるのであれば、プログラム側では処理をしないため、対応する部分が一つ減るし管理も減ります。地味ですがとても重要。

2016-09-06-qsa-blog-ogp.jpg

条件

  1. リダイレクト元に、URLパラメータがある(クエリー・ストリング)
  2. リダイレクトの処理は、.htaccess で行っている

解決策

RewriteRule のフラグに、QSA を付与する。

RewriteEngine on
RewriteRule ^hogehoge.html$ https://www.fugafuga.com/index.html [R=301,QSA,L]

参考

https://blog.fkoji.com/2008/07172155.html

ディレクトリの差分をとる|diff コマンド

案件や保守をやっていると、「差分」をとることが日常的にあります。

方法としてはいくつかあるのですが、使ってよかったdiffコマンドについてのメモ。

diff -rq directoryA directoryB

r・・・ディレクトリ内を再帰的に処理
q・・・差分内容は表示せず、差分の「概要を表示

まずは上のコマンドで概要を掴んで、その後に結果に対してアプローチしていく感じ。

差分を取る方法いろいろ

案件をやっていて、差分をとる・確認する方法を確立したいと思っていますが、なかなかまだできていない。個人的にはできているけれど、広範囲には横展できていない。

  1. gitやbitbucketなどのバージョン管理ツール
    主流はこちらではないでしょうか。ソースコードのみならず、画像ファイルも並べて比較できちゃいますし、デザイナーの方にも便利です。
  2. Windows限定だが、WinMergeで差分確認
    個人的には昔から使い慣れている方法。ローカルで処理するから速いし、グラフィカル。使い慣れれると、なかなか手放せません。
  3. サーバコマンドでdiffを使う(上述の方法)
    バージョン管理もしてなく、ローカルにファイルを落とすのに時間もかかるので、お手軽に出来るのがこれ。もちろん比較するものが同一サーバ上にあることが条件です。

参考URL

https://hydrocul.github.io/wiki/commands/diff.html