C言語でCMSを書く その7 ページの追加・更新を簡単にする

記事
IT・テクノロジー
WEBページはページの追加と更新が面倒
ってことがよくあるわけです。20年以上前は、ホームページはHTMLでベタに書かれていて、ページの追加も更新も、HTMLを変更したり、HTMLファイルを追加して、メインのページからリンク張ったり、っていうことで、それはHTMLを知っている場合は、それでなんでも出来たんですが、ページを追加したり更新したりするたびに、ftpとかでファイルをサーバに転送してアップロードしたりという面倒がことがありました。いや、本当に面倒でしたが、当時ホームページを持つ人は、HTMLも分かっていたし、ftpの使い方も分かっていたし、だから、逆に自由になんでもできました。

最近では、多くのWEBページがブログシステムなんかをもっていて、新しいページをどんどん追加もできるし、一度書いたページを更新するのもできるようになっています。

でも、たしかに、ページの追加や更新、「できるようになっている」けれど、「簡単にできる」でしょうか?

現在WEBサイトのページはほとんどの場合、WordPressを使っています。これを使えば、ページの追加、更新もかなり自由にできるようになります。でも、簡単にできますか?っていうのが問題ですね。

SNSだと、アカウントつくって、プロフィールページを設定して、アイコンを設定して、背景画像なども入れて、それから投稿して、投稿に写真を貼り付けたり、動画を貼り付けたり、かなり自由にできます。しかも、スマホからでも簡単にできる。

でも、WordPressで管理されたWEBサイト、それほど簡単ではありません。スマホからのページ追加や、ブログの投稿はできないし、外部のページをリンクするときも、あまりリッチなリンクなどできないし、また単語を指定して、リンクをする、なども、スマホからさらっと、みたいなことはできません。

HOTPortのCMSでは、スマホから簡単にできる
HOTPortが目指したのは、スマホからでもページの追加や更新が簡単にでき、かつ、表現もバラエティとんだものが可能なCMSの実現です。そこで、簡単にできる代わりに、多少の制限を加えています。

HOTPortでは、アカウントをもつと、プロフィールページよりも充実したホームページが持てます。そしてホームページにはついかで「ポリシー」というページが持てます。また、アカウントを持っている人は、タイトル(デジタルコンテンツ、ブログ、記事のことです)を投稿できます。タイトルにはトップページとその続きのページと、有料ページがあります。

そこで、まず、プロフィールページを設定するときは、アイコンやデフォルトのタイトルトップ画像が設定できます。このあたりは普通のSNSとにています。さらにスタイル編集で、背景画像や背景動画が設定できます。そして、大きい画像が設定できます。そしてプロフィールページの本文が最大で2000字かけます。プロフィールページの続きのポリシーページは、複数のパラグラフからなり、パラグラフには添付ファイル一つ、大きい画像一枚貼り付けられます。パラグラフはいくらでも追加できます。

投稿するタイトルも同じで、トップページには、タイトルトップ画像と、大きい画像一枚と添付ファイル一つです。そして、続きのページと有料ページは、ユーザのプロフィールページと同じで、複数のパラグラフからなり、これは添付ファイル一つ、大きい画像一枚が貼り付けられます。

制限されているというのは、大きい画像と添付ファイルは、プロフィールページやタイトルトップ、そしてパラグラフには、それぞれ一枚、一個ずつしか貼り付けられないけれど、パラグラフはいくらでも増やせる、ということです。

そして、なによりも、各ページや各パラグラフには、2000文字まで書き込むことができ、また、そこから内部、外部へのリンクは自由にできて、そのリンクの表示方法も、サムネイルによる表示や、特定の単語を指定してリンクしたり、URLをそのまま書いたり、いろいろできます。

たとえば、ttps://coconala.com/blogs/3431352/225090 (リンクしないために、httpsを、ttpsに置き換えておきます)というページをリンクするとします。
ttps://coconala.com/blogs/3431352/225090
と書くと、そのままURLをちょっと短縮した
coconala.com/blogs/3431352/225090
というのが青い字で表示されてリンクされます。これはSNSなどでお馴染。
一方、

これは、ttps://coconala.com/blogs/3431352/225090{ココナラブログ}へのリンクです。

と書くと、
これは、ココナラブログへのリンクです。
と表示されて、「ココナラブログ」の部分が青字で表示され、それをクリックすると、ページに飛んでいきます。
さらにさらに、

ttps://coconala.com/blogs/3431352/225090|ここにキャプションみたいなのを書き込みます。|

と書くと、このブログのページのサムネイルが左端にでて、サムネイルの右側に、「ここにキャプションみたいなのを書き込みます」という表示になります。クリックするのはサムネイルの部分です。下の画像がその事例です。
ScreenShotLinkPage1.png

Wikipediaの卑弥呼のページをリンクしています。その右側に周りこむ部分にも、さらにリンクを張ることができます。
リンクはページごと、パラグラフごとにいくつでも貼り付けられるので、これは、かなり便利で、ほぼ、Wikipediaのページのようなことができるわけです。
こういうリンクを張るために使っている半角の'|'とか'{'とか'}'は、一応、スマホでも入力可能な文字です。

実は入力文中にHTMLを埋め込める
さらに、HOTPortでは、入力文中に HTMLを埋め込めるようになっています。つまり、文中に<br>とか<table ...></table>とかを埋め込むと、それがそのままブラウザに送られて、表示されます。ここで一つだけ問題があります。
入力文の中の、改行コードです。改行コードをみつけると、自動的に<br>を挿入します。しかし、HTMLのタグの中で、<br>が挿入されると、改行されすぎ!とかになるわけで、そこで、タグの中に入っているときは、改行コードを見つけても、<br>を挿入しないようになっています。

それから、ちょっと話はそれますが、数式の入力ができるようになっています。これは、Cで実装したのではなくて、単純にMathJaxというJavaScriptのライブラリを使ったもので、文章の入力時に、数式と書かれた部分をチェックしておくと、その文章の中で、LaTeX形式で数式を書くと、そのまま、数式が表示されます。なお、下の画像で、赤字でAWExionと書かれているのは、<em>AWExion</em>という形でHTMLで強調したからです。
ScreenShotMath.png
いや、LaTeXは、30年以上前から使ってきたので、ほぼそのままHTMLに書き込んで、ちゃんと表示されるのは便利です。もっとも、今時の人達はあまり数式を書こうなんて思わないのかもしれませんけど、、でも、数式が書けるSNSとかブログってそうはないでしょ。Wikipediaも最近では数式を画像でなく、文字として書いていますね。

HTMLを生成する部分の実装
これは、実装するには、それなりに面倒で、たぶん、WordPressではこういうことはできないだろう、と思うんですね。まあ、かなり高度なPHPを自分で書いて、WordPressのテンプレートに埋め込むようなことをすればできるでしょうけれど。
ただ、C言語でCMSを書くと、それ自身は結構大変だけれど、いろいろな拡張機能を、さらっと書き込むことができます。これを行うのは、
paragraph_putITMPL()という関数です。で、さらっと書き込むことができるとはいうものの、この関数は、300行を超えるもので、ちょっとブログにソースを書き込むことはできないんで、そのあたりは、以下のサービスをご利用ください。

ということで、paragraph_putITMPL()が、やっていることの概略を書きます。関数のプロトタイプは以下の通りです。
static  bool   paragraph_putITMPL  (threadManager*  ThMPtr,
                                                         char*           This,
                                                         element*        ElemRetPath,
                                                         ioManager*      IOMPtrTmp);
引数は、ThMPtrはお約束のスレッドマネージャー、Thisが、パラグラフの内容を表す文字列で、ElemRetPathは、この際無視です。IOMPtrTmp に、Thisの内容が展開されて書き込まれる、ということになります。
で、出来上がった IOMPtrTmpはさらにマクロ展開の必要があるので、下のブログに書いた ioManager_putIHTML()という関数にいれて、最終的なHTMLデータを作ります。
さて、paragraph_putITMPL()は、まず、while文をつかって、Thisの文字列をスキャンして、その中で、HTMLのタグとなるものがあるかどうかチェックして、タグの中なら改行コードを<br>にしないとかそういう処理をします。
また、ハッシュタグ '#' があれば、ハッシュタグの終わりまでみて、その部分をキーにして検索するためのページを呼び出すHTMLコードを出します。
そして、https とか http とかがあった場合は、それがURLだと認識され、URLの最後の部分までスキャンして、その後 '|'とか'{'があるかどうかチェックして、あれば、その中身をさらにスキャンして、HTMLを生成する、ということになります。

さて、問題は、URLの後ろに、'|'があったとき、URLで示されたページのHTMLを解読して、中に埋め込まれたogimage というサムネイル画像のもとになる画像のURLを捜さないといけません。ということは、サーバ側で、対象URLのページに一旦アクセスして、その中のogimageという部分をひっぱりだす必要があるということなんですね。そして、そのogimageのURLで <img  ....>というタグを入れて、しかも、その横幅を小くする、という書き方になります。
そのために、URLで示されたページにアクセスするので、これは、curl-libを使っています。curlは、「C言語によるURL処理」みたいな意味のツールキットで、HTTPだけでなく、HTTPSも、mailも、ftpやsftpも、いろいろなプロトコルに対応したものです。ですから、URLにアクセスするあたりは簡単な筈ですが、このcurlは案外使い方が面倒です。そこで、get_ogImageURL()という関数を用意し、これが、curlをつかった remote_access()という関数を呼び出して、URLのページにアクセスして、そして戻って来たページの内容から ogimage: という文字列をさがし、その後ろのURLを得る、という面倒なことになります。

この処理を、ブラウザ側のJavaScriptからAjaxなど使ってやることもできますし、アクセスが速いんですが、これまたかなりきっちりJavaScriptを書かないといけないので、今回は、時間もかかるけれど、サーバサイドでしっかりやることにしました。問題は、ページのHTMLを造るのに、多少時間が必要なことで、とくに、多数のページへのリンクがあったりすると、ページを返すためにタイムオーバーみたいなことも起きます。やっぱり将来的には入力時にページをつくってしまうような処理が必要かもしれません。普通のSNSでは、そうしているようですね。

まとめに変えて
ということで、今回、ソースコードを示す部分はありません。どの関数も、かなり複雑な処理をしていて、数百行に及ぶものばかりなので、ブログに書くような感じではありません。ただ、そういうプログラミングができたので、かなり自由度の高いリンクができるようになったし、また、ページの構成もいろいろできるようになりました。

投稿するタイトルには、ページごと、あるいはパラグラフごとに、大きい画像が貼り付けられるので、コミックなどもタイトルとして投稿できますよね。そして、それにはパラグラフごとの題名が入るので、目次も自動的に作ったりできます。そして、ページごと、パラグラフごとに動画や画像、そのほかいろいろなデジタルデータを添付できますから、HOTPortは、クラウドシステムとしても利用できるわけです。有料ページに大事なデータを添付しておけば、買った人しかダウンロードできないようにもできますよね。そして、買った人がだれなのかは、わかりますし。

CMSをC言語で書いたことで、取引管理と同じデータベースで管理されるため、アクセス制御もしやすく、NFTとしても、普通のNFTよりセキュリティがしっかりできるし、いろいろなメリットがあります。

HOTPort全体を提供するサービスもやっております。
さて、そろそろ、CMSについても、だいたい書くべきことはかいてしまいましたので、次回のブログは、全体のまとめにします。
ではまた。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す