Web開発ノート

Webサイトをレベルアップさせてプロモーション効果のアップデート。独自のWebシステムを使った粘り強い面白さのあるサービスの充実化をご提案いたします。

WordPressを使う理由

CMSを独自開発するにはコストがかかります。
限られた予算や期間でオープンソース型のCMSを採用する場合、WordPressを選ぶと良いかもしれません。

今はサーバシステムやサーバに導入されるプログラムなど、毎日のように何かしら更新され、昨日までの事が明日は古くなる時代です。自転車もクルマもオイルメンテナンスしなければ故障するのと同じように、Webサイトも維持していかなければ、大きなトラブルを招く可能性があります。

それが例えどんなに良質なものであったとしても、使われていなければ錆びていき、世界中のネットワークの足を引っ張るコレステロールサイトとなってしまいます。

WordPressは世界で最も使われているため変化が激しく、新しさを維持する事ができます。多くの開発者が頭を寄せ合って情報交換しているため、検索すればいくらでも新しい情報が出てくる点も開発者にとっては心強いポイントでしょう。

ファイル構造を理解する

WordPressのファイルはインストール時には1534個もあります(バージョン4.9.8の場合)
使わない機能や何が目的なのかよくわからないようなファイルもタップリ。

では、index.html(またはphp)ペラ一枚しかないホームページにWordPressを導入するとしたら、どんなファイルが必要になるでしょうか?

WordPress全体の構造を理解してみましょう。

処理の流れと関数

WordPressはPHPファイルごとに役割が与えられています。問題が発生した場合、あるいは改良を加えたい場合、どのファイルを修正すれば良いのかを理解しておくと、いざという時になんとかなります。

ここでは、そのファイル別の記述方法をまとめています。

サーッと飛ばし読みすれば、だいたいの事は理解できますし、読み込めばより知識が深まります。

functions.phpの解説

WordPressをだいたい理解できてきた。PHPを使いこなしているわけではないけど、直接テンプレート内のPHPを書き換えたり、処理を自分になりに追記したりして、なんとかできるようになってきた。という方でも、functions.phpだけは触りたくないと思うのは正しい感情です。

functions.phpはWordPressの心臓・・というよりも、動脈に近い存在で、公開中のサイトだけでなく、管理画面にも影響があるファイルです。ここで1つでも間違えた記述をすると、管理画面でエラーが出たまま直す事ができなくなります。

ブラウザでエラーが出たまま管理画面が表示されなければ、完全にお手上げです。FTPなどでファイルをアップロードしなおすしかありません。

FTPってのが何なのかわかんないって人は、絶対にfunctions.phpを触ってはいけません。functions.phpさえエラーが出なければ、他のテンプレート用PHPでどんなにエラーが出ていても、管理画面からなんとか修正して復帰できます。

セキュリティ対策

WordPressはセキュリティの問題が不安だと言われていますが、実際はWordPressそのものがセキュリティに問題があるのではなく、Webの知識が全くなくホームページを作った事すらない人が、本を片手に何カ所かクリックするだけで導入できてしまうほど簡単である事に原因があります。

そのため、世界中に同じようなセキュリティ上の洞穴を開けたWordPressのサイトが大量に存在し、そのサイトを自動的に探し出して狙うプログラムが、ホームページのデータを改ざんして、ハッキングの中継地点として利用したりしています。

ここではWordPressを導入するなら最低でもやっておきたい対策を紹介して、セキュリティに関する知識を理解できるようにまとめてみました。

ローカルで開発(XAMPP)

WordPressはサーバにインストールして使うCMSです。設定や投稿、プラグイン導入などは全てサーバ上で行う事を想定して設計されています。

しかし、レイアウトを好みに変更したり、オリジナルの機能をつけたり、テンプレートを使わずに独自のデザインを適用したい場合などは、PHPを変更したり、書き加えたりする必要があり、WordPressを基盤として、ほとんど独自のプログラム開発に近い作業を行う事になります。

その場合、開発中のバグによりサイト全体が急に動かなくなったり、レイアウトが崩れたりするわけで、その解体ショーをWebサイトに訪れるお客様に自演しながら作るわけにはいきませんので、WordPressを開発用のPCなどにインストールし、ローカルで開発を進めてからサーバにデータをアップロードする事になります。

ここでは、WordPressをローカルで開発する場合に使える手段をいくつか紹介します。

ブロックエディタの活用

WordPress5.0から導入された悪名高きGutenberg(グーテンベルク)は、採用直後はWordPressのトップ画面に「無理してグーテンベルクを使わなくてもいいんですよ」という消極的なメッセージと、Gutenbergを強制解除するためのClassic Editorプラグインが案内されていました。

このプラグインは2022年まで、もしくは必要とされる限りサポートされます。と記載されており、では2022年以降はどうしようか?と不安になりましたが、2019年7月現在、少なくとも、私達のまわりではClassic Editorプラグインは必要なくなりました。

Gutenberg(グーテンベルク)いわゆる、ブロックエディタと言われる編集画面に使い慣れてくると、それまでのビジュアルエディタがいかに古臭いものだったか思い知らされます。

Windows3.1(1991年)時代のボタンだらけのゴテゴテしたエディタを我慢して使うのはそろそろやめて、21世紀らしい感覚的インターフェースに慣れてみましょう。

会員制サイトの作り方

WordPressを使ったサイトを会員制にしたい。というご要望も少なくありません。

WordPressに、新規会員登録や、会員種目による閲覧制限、退会処理など、会員制サイトとして必要な機能を実装するプラグインも無料や有料のものがいくつかあります。

ただ、個人情報を扱うサイトで、会員登録から退会処理までを全てプラグイン任せにするには不安があります。WordPressのアップデートによって誤動作を起こしたり、半分程度の読解力で読んだ英語マニュアルを見て導入したプラグインにどの程度の信頼性があるかもわかりません。

しかし、会員登録や、退会処理などは、別のシステムや、人の手を介した手続きなどによって行い、WordPressにはログイン後の閲覧制限のみをさせたい場合、プラグインなどを導入する必要もなく、WordPressそのものが既に会員制機能を備えています。

MovableTypeの紹介

世界一使われているブログ投稿機能型のWebサイトが作れるCMSは、無料でオープンソースで高機能なWordPressです。

それはわかってはいるけれどもWordPressを使いたくない。というお話がよくあります。そんな時に検討される最有力候補としてMovable TypeというCMSがあります。

ここでは、WordPressのどこに問題があって、その点がMovable Typeではどのように解決が期待できるのか?をまとめてみます。

EC-CUBEの紹介

ECとはElectronic Commerceの略で電子商取引の事です。つまり、お金のやり取りが発生し、商品の売買を行う取引の事で、早い話がネットショッピングサイトの事です。

EC-CUBEはECサイトを作る無料CMSの代表です。ネットショップサイトを開設するために必要な機能は全て揃っています。インストールし、商品販売に必要な設定を行う事で、すぐにサイト公開する事ができ、独自のHTMLやCSSを用意する事で、オリジナルデザインにする事もできます。

WordPress同様に大抵のサーバには簡易インストーラーが用意されています。

Amazonウェブサービス

世界制覇を夢見るような大規模な企画を思いつきましたか? そのためには結構負荷の高いプログラムや重要情報を扱ったデータベースを用意したりする必要がありそうでしょうか?

きっと、アクセス数も転送量も爆発的に多くて、レンタルサーバでは太刀打ちできないものでしょうね。

そんな時はアマゾンWebサービスをお勧めします。まずは一番安い組み合わせから始めて、アクセス数やWebサイトの規模に応じて、ブロックを付け足していくように追加していきます。過剰なところは減らしたり、部分的にバージョンダウンしたりする事もできます。

WordPress以外のCMS

Webサイトを運用する上で最も人気のあるCMSはWordPressです。でも、無料でオープンソースだからと言って本当に低コストでWebサイトを公開し、運用できるのでしょうか?

WordPressが無料でも、デザイン料、Web制作費、システム開発費、運用費や、サーバ運用費は別料金です。

ここでは、WordPress以外のCMSを紹介します。有料でギョッとするほど金額が高いCMSもありますが、Webサイトの開発コストのどの辺を削り落とす事ができるのかを考えながら、検討してみてください。

軽くて速いXML型CMS

今最もお勧めできるオープンソース型のCMSは、WordPressです。しかし、WordPressを導入した方から、こんな不満を耳にします。

サイトが重い。うちの重いサーバではとても耐えられるレベルではない。

いちいち更新してくださいとメールが届く。そしてなんだかわからないけど、更新しないと、セキュリティが危ないとか言われているから仕方なく更新ボタンを押しているが、もういい加減に押すのも面倒臭くなった。

WordPressのシステムが壊れてしまったんだけど、どうすれば直るのか?HTMLくらいなら見ればなんとなくわかるんだけど、phpMyAdminだなんだなんてのは、名前を見ただけで頭が痛くなってくる。

WordPressをインストールしたら2000個くらいのファイルがあるんだけど、これのうちどれくらいが不必要なファイルなのか?知らないファイルが沢山あるのは気持ち悪い。

そんな方には、見てわかるくらい透明度の高いCMSが良いかもしれません。

XMLで絵本を作る

HTMLはHyperText Markup Languageと言う名の意味の通り、本来プログラミングの知識が無くても思い通りのレイアウトを作るためのものでした。しかし、実際はスタイルシートの工夫を駆使しないと自分が頭で考えているようなデザインを再現するのは難しく、様々な環境に対応した生きている機能を持ったデザインを表現するのは、苦痛になるほど頭を使います。

HTMLとスタイルシートが得意なコーディング職人と役割分担して、一番面倒な部分が仕上がった状態のテンプレートを用意してもらい、文字の部分をコピペしたり、必要なパーツを組み合わせてホームページを仕上げていくのも難しいほど、最近のHTMLの見た目は暗号のように複雑化しています。

そこで、余計のものを全部省いたルールを、自分達で決めなおし、XMLでサイト設計できるようにしておけば、必要最低限のテキストだけで、自動的に複雑なサイトを構築してくれる仕組みを実現することもできます。

ここでは東京ミステリーファイルを参考に、XMLPHPを組み合わせたテキストベース型の独自CMSの事例を紹介します。

メールフォームを作る

Webサイトの役割は、見て欲しい人に見てもらい、お互いを必要とする人同士を繋げる事です。そのためにも重要な存在となるのがメールフォームです。

しかし、これを悪用して、ネットにある無数のメールフォームを自動的に検出するプログラムを作っている人がいます。そのプログラムはフォームに自動で内容を入力し、自動送信されるようになっています。そして出来る限り多くの人に無差別に何かの目的のメールが送られます。

もし世界中の数百万人に「今すぐお金を払わないとこのパソコンを壊します。振込先口座は〇〇〇」といったような根拠のない嘘を書いた脅迫メールを自動送信したら、その数百万人のうちの何人がいくら振り込んでくるでしょうか? そんな悪い事をどこかの誰かがいつも考えており、そんなプログラムはずっと動き続けていたりするわけです。

そんな犯罪的なアイデアを募集するためにメールフォームを公開しているわけではありません。できるかぎりの対策を練り、メールフォームを守る仕組みを組み込みましょう。

このサイトでは、迷惑メールや無差別に自動送信するスパムメールへの対策を考えては、実験的に実装してみてはアップデートしています。実際にどんな対策をしているのか、ここで紹介いたします。

動いて音が鳴るサイト

2003年頃から2007年頃まで、ブラウザの中は賑やかでした。企業系のサイトやプロモーションサイトなどは、Flashで作った派手な演出や音楽や効果音にあふれていて、ブラウザで映画館めぐりをしているような時代でした。

最初は個性が発散されていましたが、時間が経つにつれ演出が定型化してきて、その動作の重さや、いちいち面倒な奇抜なインターフェースに、本来のインターネットに求められる情報収集という目的が邪魔されてしまい、使いにくさを感じるユーザーも増えてきていました。

そして、Flashのブラックボックス的にパッケージされた仕組みは、悪用された場合のセキュリティの脆弱性を指摘されるようになり、個人情報などの安全性にシビアなスマートフォン市場を中心にFlash離れが進み、派手な動きを見せるWebサイトは消えていきました。

かつての時代のように、どのサイトもFlashという状況ではなくなりましたが、情報収集以外にも演出的な楽しさを提供するサイトのニーズが完全になくなったわけではありません。そういった演出のあるサイトが効果的な場合も多いですし、然るべきニーズに合わせて用意する事で、プロモーション効果としてもサイトの楽しさとしても、期待以上のものになるはずです。

Youtubeとmp3の合わせ技

リッチサイトは音響や映像でユーザーを驚かせ、そして喜んでもらう事が目的です。例えばスマートフォンをいじっている時に、急に大きな音を出し、不本意にパケット消費させ、そして金銭を要求したり、この端末を壊すと脅迫するコンテンツであってはならないわけです。

そういった悪質なコンテンツから守るために、iOSやandroidなどのスマートフォンOSは頻繁に仕様変更しています。その仕様変更で悪質なコンテンツと共に、僕らが作るようなリッチサイトのコンテンツも動かなくなったりします。

ここでは新宿ウサギズのサイトを参考事例として、Youtube動画の埋め込みと、mp3音声ファイルの再生を活用したWebサイトの仕組みを紹介します。

Canvasで図形を描く

売り上げ変動や、何かの目的達成をするための経緯などが確認できるサイトでは、円グラフ折れ線グラフのようなものを活用すると効果的です。会員制のサイトなどで自分自身の何かの成績をグラフで把握しておきたい事もよくあります。

HTML5では、Canvasという技術が標準で使えるようになり、とても簡単に図形を描く事ができるようになりました。

四角、丸、線、ベジェ曲線など、自由自在に図形を作り、更に少しずつ変化をつければアニメーションさせる事もできます。ここでは、具体的にどの程度の手順で図形を描く事ができるのかをまとめました。

位置情報を取得する

標準のHTML5と簡単なJavaScriptで現在地を調べる事ができるGeolocation APIを紹介します。

このAPIはブラウザを起動している地点の位置情報を、経度と緯度の座標で取得できます。

Chrome、Safari、FireFOX、Microsoft Edgeなど主要ブラウザに対応しており、持ち歩けて、位置情報を取得する機能がついているスマートフォン用のWebサイト向けな機能です。

パララックスサイト

ブラウザのスクロール位置に応じて変化する演出は、主張したい情報を際立たせる効果があったり、人の目を惹くユニークなアイデアを作る事で、Webサイトを印象付ける事ができます。
流行り始めた頃は、ブラウザスクロールに対して、多重にスクロールする演出が多かった事から、パララックス(Parallax)と呼ばれており、いつしか、スクロール演出のある仕組みをまとめて、パララックスと呼ぶようになりました。

その仕組みは、数値化されたスクロール量を扱うだけのシンプルなものですが、アイデア次第で表現の幅が大きく広がります。

Web開発の現在

最近ホームページという言葉を聞かなくなったような気がします。

代わりにサイトとかWebサイトとかいう言葉が使われるようになったようです。だからといってホームページという言葉を使う事を恥ずかしがる必要はありません。かつてこのWebとやらが、ホームページとか「ほめぱげ」とか呼ばれていた時代からこの分野を生業としているのだぞ?というアピールにもなるかもしれないからです。

でも、「ほめぱげ」とか知らない若い頭脳に「ホームぺージとか言っちゃうような化石みたいな人に任せるのは不安だなあ」とか思われたら困る事があるかもしれないので、ここでコッソリと、今の時代にあったワードを勉強しちゃいましょう。

スマホアプリの作り方

組織がWebサイトを持っているのが当たり前な時代になりました。「私は偉いんだぞ」と言っても、その名前で検索してホームページが見つからないようでは信用されないそうです。

そして、情報収集に積極的なユーザーはスマートフォンを持って歩き、そこで情報を得ます。Webサイトのアクセス解析の分析によると、PCからよりも、スマートフォンからの閲覧が圧倒的に多いそうです。

こうなってくるとWebサイトをスマートフォン対応にするのは必須です。むしろPCの所有を必須とするような特定の専門的な分野を扱うサイトでない限り、PCは無視していいからスマートフォンでは必ず見れるようにしたい時代です。

では、ユーザーの端末にインストールするような、専用のスマートフォンアプリまで作る必要があるのは、どんな場合でしょうか?

SEO対策まとめ

Webサイトを作ったら、不特定多数のより多くの人の目に触れるようにしたいものです。そのために、検索エンジン最適化(Search Engine Optimization)、略してSEO対策が必要になります。

しかし、このSEO対策は厄介なもので、肩に力を入れればいれるほど検索下位に追いやられて逆効果だったり、何もしないほうが検索結果の上位だったり、という納得行かない結果になる場合があります。

ここではここまでの失敗例を元に、様々な対策方法をまとめてみました。

人工知能について

ネット技術の進歩と、ネットの人間社会への浸透によって、地球上の変動する巨大なデータを集める事ができるようになりました。それを高度に進化したコンピュータが並列処理により分析し、人間には理解できないような方程式を見つけ出す事ができるようになりました。これをAI(人工知能)と言います。

AIを学ぶためには、機械学習やディープラーニングと呼ばれるジャンルを知る事から始めます。その理屈が理解できたら、高度の進化したコンピューターを借りて、AIの実験をしてみましょう。

画像認識や、音声認識、ジェスチャー認識などを活かしたサービスが次々と生まれ、時代が変わっていきます。