Blog Maker は誰もが簡単にレスポンシブなWebサイトを作成できる事を目的に開発しました。
同じ様なコンセプトとして、ワードプレスが広く普及していますが、高機能でカスタマイズ性にも優れている反面、その導入にはそこそこ手間が掛かり、記事の作成も、少しでも複雑なレイアウトを作ろうと思うと、必要なプラグインを探したり、設置方法や使い方にも一貫性が無く、結果、快適に使える様になるまで、かなりの時間と労力を費やす事になります。
それでいて、肝心のブロックエディタは、それほど使い心地の良いものではありませんし、バグとも取れるようなおかしな振る舞いをする事もしばしば。ワードプレスは、少なくとも私にとって非常に扱いづらいツールでした。
Webページを構成するHTMLタグには、さまざまな種類がありますが、
たとえば
＜div＞
本文＜br＞
＜img src="画像ファイル"＞＜br＞
＜/div＞
といった具合に記述すると、本文と画像ファイルが縦ならべに表示されます。縦に並べてどんどん記事を書いていくだけであれば、HTMLの限られたタグだけを使って、特に苦労なく記述していく事が出来ます。
ところが、そんな記事を、たとえば左に画像、右に文章に段組みしてレイアウトしようと思った場合はどうでしょう。
さらに、この部分がスマホで表示された場合には、段組みを止めて、上に画像、下に文章を表示する、だとか・・・。
そうなると、HTMLを作成する難易度は一気に上がってきます。
かなり面倒くさい。そして残念なことに、お手軽なはずのワードプレスですら、それはまったく同様なのです。
でも、ですよ。
＜LEFT src="画像ファイル"＞
本文
＜/LEFT＞
もし、このように記述するだけで、PCでは画像を左、本文を右に段組みしてくれて、スマホでは上下に配置したとしたらどうでしょう。
もしこういったタグを使う事が出来たなら、自由なレイアウトのWebページが簡単に作成できるようになるに違いありません。
もちろんHTMLの文法には、＜LEFT＞というタグなど存在しません。
しかし、たとえば HTMLファイルの中に＜LEFT＞～＜/LEFT＞という記述があれば、それを一般的なHTMLを使ったレイアウトに展開してくれる様なプログラムなら、個人的に作れそうです。
そんな、「拡張タグ」を「一般タグ」に展開してくれるプログラム。
これが、Blog Maker の基本となる考え方です。
Blog Maker の核となるプログラムは、disp.php です。
拡張タグを使って記述されたHTMLファイルを、disp.php を経由させることで、拡張タグは一般的なHTMLとCSSコードに展開されて、普通のWebページとしてブラウザで表示できるようになります。
disp.php は、読み込んだHTMLの中に拡張タグがあれば、それを解析して、一般的なHTMLタグに展開してくれます。
そして、思いつくままに disp.php の中の展開処理を追加していけば、使用できる拡張タグを幾らでも増やしていく事が出来るのです。
そうして現在、disp.php で展開できる拡張タグは、何と２６種類。
その中には、＜slide dir="画像フォルダ"＞と記述すれば、指定したフォルダの中の画像ファイルをスライダーで表示させるタグとか、＜gallery dir=”画像フォルダ"＞と記述すれば、写真ギャラリーを展開してくれるタグ、YouTube動画の埋め込みタグや、見開き本にしてくれるタグなど、レイアウトだけでは無く、たった１行を記述するだけで、さまざまな JavaScript のエフェクトを実現してくれます。
メモ帳で、拡張タグを駆使したHTMLファイルを書き、それを disp.php に読み込ませるだけ。
ページを表示するURLは、「disp.php?fn=拡張タグファイル名」 となります。
disp.php に組み込まれたさまざまな拡張タグを使用することで、Webページ制作が格段に楽になりました。
とは言え、誰でもが簡単に素早く作れるようになったと結論付けるのは、少しばかり早計な気がします。
実際にWebページとして公開するには、HTMLファイルを記述するエディタも必要ですし、FTPソフトを使用して、画像をアップロードしたり、ブログ記事へのリンクバナーを作成したり、何より、拡張タグの文法を覚えなければなりません。
あんなに使いづらいワードプレスですら、画像のアップローダーや最低限のエディタくらいは用意されているのですから、今のままでは、まだまだユーザーフレンドリーとは言い難い。
そこで、思い悩んで作成したのが、画像ファイルやその格納フォルダ、拡張HTMLファイル、コンテンツリストなど、Webページに必要な一切を簡単操作で作成できる、GUI統合環境「dashboard.php」です。
dashboard.php の使い方は、至って簡単。
新規ページの作成ボタンを押して、使いたい拡張タグをクリックし、表示される説明文を読みながら、入力窓に文章を打ち込み、画像ファイルやフォルダが必要であれば、フォルダ一覧から選んでクリックするだけで、どんどんタグを入力していく事ができます。
入力されたタグは、設置イメージとして左側の窓に表示されていますので、それらの順序を入れ替えたり、削除したり、別のタグを挿入したり、間隔をあけたりも、マウス操作のみで行うことが出来ます。
HTMLページを仕上げて、Set Index ボタンを押すと、リンクバナー作成ページが表示され、いよいよ公開となります。
400px × 400px のサムネイル画像と記事タイトル、ちょっとした紹介文を追記して ADD ボタンを押すと、以下のようなコンテンツ一覧ページに追加されます。
https://www.task.ac.jp/topics/
上の記事は、すべて Blog Maker で作成されたもので、もちろんこの「Blog Maker のご紹介」も、Blog Maker を使って書いています。
コンテンツは、作成年ごとにセレクタで選択して表示されます。
また、この「dashboard.php」で作成されるブログ一式は、Blog Maker をインストールしたフォルダ、その１つだけで完結しています。
プログラムは全てPHPで記述され、煩わしいデータベースも一切使用していませんので、たとえばこのブログのバックアップを取ったり、どこか別のサーバに移動させたい時などは、フォルダごとそっくりコピーするだけで一発完了！。
そのお手軽さは、まさに「無敵のGUI」と呼ぶに相応しい作りとなっています。
