ホームページ制作

htaccessに記入したリダイレクトが、シンボリックリンクにしているフォルダに効かない時

常時SSLへ

ブラウザシェアで60%程度のシェアを持つGoogle Chromeが、Chrome(バージョン 62)において、https化してないホームページのフォーム入力時に「保護されていません」という警告が表示されるようになり、既にSSL化は必須と言える状況になっている。
そんな中、サイトのSSL化に移行する際に、いままで非SSL(http://〜)でアクセスしていたページをSSL(https://〜)に変更しても、過去のリンクやブックマークからのアクセスにより、非SSLにアクセスされてしまうことが考えられる。
続きを読む

WordPress高速化・軽量化のためDisable Emojisで不要なコードを減らす

WordPressの高速化にはコードのスリム化が有効

WordPressはアップデートのたびに安全で便利になっていますが、様々な機能と引き換えに出力されるHTMLも増える傾向にある。
WordPress 4.2から導入された絵文字対応もそのひとつ。絵文字を使用することができるようになったことと引き換えにデフォルトで以下スクリプトが挿入される。

続きを読む

WordPressで「お知らせ」に使うと便利なプラグインVK Link Target Controller

VK Link Target Controllerとは

WordPressを使ったサイトで、カスタム投稿タイプを利用してトップページに「お知らせ」「新着情報」「information」などのタイトル一覧を載せるケースは多い。
新しい記事の更新情報だったり、企業サイトだと展示会出展の情報など、トップページの記事タイトルをクリックすると記事が読めるので便利。
イベントや外部サイトについて書く場合、通常は詳細情報などを書いた記事の中にリンクを貼り、そこからジャンプするのが基本なのだが、特に説明は不要で指定のURLに飛んで欲しい時もある。
そんな時に便利なのがWordPressの無料プラグイン「VK Link Target Controller」

続きを読む

SWFからMP4等の動画形式に変換するフリーソフトならSwivelがおすすめ


Googleは以前からFlashを使わないことを進めており、最近のChromeにおいてはアラート表示するようになっている。
ここまでがFlashを外したがっている理由は、Flashの再生に使用されるAdobe Flash Playerの脆弱性がいつになっても解消せず攻撃・被害が無くならないから。このGoogleの流れに合わせるなら、すべてのWebサイトがFlashから移行する必要があると言える。

続きを読む

なぜ、ホームページをスマホ対応にすべきなのか

例えばネットショップの場合

商品を販売するホームページがスマホに対応していなければ、利用はパソコン経由に限られ(わざわざ指で拡大して商品を購入してくれる利用者は稀と考えるべき)顧客を逃し売り上げに影響する。つまり利益に直結する。
実際、その会社のホームページが古くプアであっても、ネットショップページだけは新しいものになっていることが多い。

例えば利用者が若年層の場合

今の小学生の多くは生まれた時からスマホが存在する時代。30代前半の人は家にパソコンが無いということも珍しくない。高齢者でもスマホの普及率が高くなっている中で、若者向けの商品やコンテンツを展開しているサイトにとってスマートフォン対応は必須といえる。
いまやインフラのひとつと言えそうなほど普及しているLINEがスマホに対応していなかったらと考えれば、スマホ対応の重要性は理解できるはず。
続きを読む

マッチングサイトにはオープンソースのOsclassがオススメ

マッチングサイトとは

海外では、自分の家や車を売ったり家庭教師やスキルを使って利用者を探したりする、マッチングサイトが広く普及している。
日本では家や車の売買をする場合、不動産屋、中古車ディーラーを使うのが一般的だが、自分で交渉すれば仲介費用が必要ないという合理的な個人売買というスタイルは日本でも徐々に増えて来ている。
既に多くの利用者を集めている『地元の掲示板 ジモティー』はマッチングサイトの代表例ともいえる。
実際、ジモティにアクセスすると、売ります・あげます、教室・スクール、イベント、里親募集、譲って・助けて、中古車、地元のお店、不動産、メンバー募集、アルバイト、正社員、と様々なジャンルで掲載されている。

オープンソースのOSClass

マッチングサイトが構築できるオープンソースにはどんなものが選択肢としてあるかを探す場合、海外ではAD Managementというジャンルを探すことになる。
続きを読む

favicon.icoやapple-touch-icon.pngを作りたい時のベストな方法

ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

Multi Favicon Generator
http://favicon.miugle.info/ ピクチャ 3Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

使い方も簡単。
512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
圧縮ファイルを解凍すると以下のファイルがある。

apple-touch-icon-57×57.png
touch-icon-iphone-retina.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png
favicon_sample.txt
favicon.ico
touch-icon-ipad-retina.png
touch-icon-ipad.png

favicon_sample.txt以外のファイルをサイトのルート(index.htmlやindex.phpがある階層)にアップ。
faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

具体的には、スタイルシートを呼び出している場所

<link rel="stylesheet" href="style.css" />

やtitleタグの場所

<title>○○のホームページ</title>

の前後に

<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

を追加する。

HTTPステータスコードについて

『HTTPステータスコード』はRFC2616等によって定められた3桁の数字からなるコードで、このコードを理解するとサイトの問題点を知ることができる場合がある。
例としてデジタルゲートが運営する某サイトの、ある日のレスポンスコードは以下の通り

コード 比率
Code 200 – OK 82.23% 3951
Code 206 – Partial Content 0.04% 2
Code 301 – Moved Permanently 0.06% 3
Code 302 – Found 8.12% 390
Code 304 – Not Modified 7.58% 364
Code 403 – Forbidden 0.23% 11
Code 404 – Not Found 0.87% 42
Code 500 – Internal Server Error 0.87% 42

表中の各コードに関する説明

Code 200 – OK 82.23% 3951
200 OK
ページが正しく表示された場合はこのステータスコードを返していることが多い。

Code 206 – Partial Content 0.04% 2
206 Partial Content
部分的GETリクエストを受けた場合に返される。

Code 301 – Moved Permanently 0.06% 3
301 Moved Permanently
Location: ヘッダに移動先のURLが示されている場合や、URLの末尾に/を付けずディレクトリにアクセスした場合に返される。

Code 302 – Found 8.12% 390
302 Found
以前はリクエストしたリソースが別のURLにあり、そのURLには存在していない場合のステータスコードであったが、今は302はFoundとして使われている。

Code 304 – Not Modified 7.58% 364
304 Not Modified
リソースが更新されていない場合に返される。

Code 403 – Forbidden 0.23% 11
403 Forbidden
アクセス拒否や処理出来ない場合に返される。

Code 404 – Not Found 0.87% 42
404 Not Found
アクセス権がない場合やリソースが見つからない場合に返される。

Code 500 – Internal Server Error 0.87% 42
500 Internal Server Error
CGIの文法エラー等、サーバ内部にエラーが発生した場合に返される。

例えば上記のデータにおいてCode 500やCode 403、Code 404が大量にある場合は、その原因を調べる必要がある。