おびやまロボット研究所ブログ

レスポンシブ対応について：
スマホやタブレットの画面に合わせて表示させるレスポンシブ対応について。
PC画面でフルスケール出せるときは文字は横４０文字になっているが、幅が狭くなると文字が入らなくなる。
記事が、pre　で書かれてると、横を４０文字以内で改行をして記事を作っていても、画面の横幅を狭くすると画面が崩れる。

で書いて、改行は、
でないとレスポンシブル対応にならない。
プログラムリストは横幅が広いことが多いので、書き換えるのはかなり面倒。

youtube動画の埋め込みのレスポンシブ対応について：
youtubeで埋め込みリンクを表示させると縦横の幅固定値になってる。
https://hirashimatakumi.com/blog/6601.html
に書いてある通り、横幅100％、アスペクト比を設定しておき、iframe の外側を

で囲むと、
画面サイズに合わせて自動で100％にしてくれる。

そのほか：
アコーディオンメニューの幅が狭かったので、SP.cssを書き換え。
横幅を100％」にする設定。　PC用画面、タブレット画面、　スマートフォン画面それぞれで幅の設定が適応されるように書かないといけない。
スマホのアコーディオンメニューの文字サイズが小さい。これについては不明でこれから。
CSSを変更してもキャッシュが残ってることが多い、
PCだとSHIFT+F5、スマホだと、ブラウザのプライバシー設定のところで履歴を消す。


今見たページのアコーディオンメニューを開きっぱなしにするための改良：
contents.php　でコンテンツを読みだした後にサイドメニューを表示するので、コンテンツ内でスクリプトでチェックを入れても、サイドメニューに反映されない。
サイドメニューが表示された後にチェックを入れるようにスクリプトを書かないといけない。
ためしに、メインコンテンツとサイドメニューの順番を入れ替えると、表示がおかしくなった。また、レスポンシブ対応にするとメニューが先にきてコンテンツが後になるのでおかしくなる。
リンクで飛んだ後にもチェックボックスにチェックを入れた状態にするために、コンテンツ最初にアコーディオンメニューの番号を取得するように
スクリプトで記述
例


contents.php　のサイドメニュー表示後に、番号を調べてメニューのチェックボックスをチェックするスクリプトを書いたら上手くいった。
この処理は、コンテンツ表示時だけでよいので、トップとヘッドメニューのページにはこのスクリプトを書く必要なない。

twitterのリンク作成：
https://publish.twitter.com/#
ここからリンクを作ったものを適当な場所に張り付け。


facebookのリンク作成：
https://developers.facebook.com/docs/plugins/like-button
ここからボタンを作れるので、試しに適当に貼り付け。


googole adsense に申込：
以前Youtbeが緩かった時に作ったアカウントがあったので、adsenseのサイトにログイン、そこで、cpu4edu.netのサイトを登録。
サイトに指定のリンクを貼って、申込をすると審査される、
申し込み時点で、現在のページに広告挿入の案が入って来る、あちこち入るので、不可の場所だけ指定する。
以前のyoutubeの収入が若干残ったまま資格が無くなったので払われることはない。
審査が終了して、広告が許可された。
説明されている通り、
ads.txt
を作ってルートに置いてリロードすると認識された。
ページ内に広告がべたべた入った。
今のところ広告収入は平均すると１日1円程度、ある程度金額がたまらないと支払われない。
このペースだと２０年後にやっと入金されるくらいなので広告なんてあってもなくても問題ない。ない方がすっきりするけど、いろいろお試しなのでしばらくそのまま。


amazon アソシエイト：
これも以前登録してるので、リンクを作成して貼る。リンク作成は、アマゾンのサイトの上部にツールバーを許可すると、リンクが作れる。
画像付きが見やすかったんだけど、画像付きリンクは廃止されたので、テキストリンクのみ。
これも、広告収入は月に100円程度でほとんどない様子。
広告を貼って儲けるというより、自分の忘備録の意味合いが強い。

問題点：
以前の記事内を

 タグで書いていた部分があり、新しいページだと右で改行してくれない。
に書き換えないといけない。
プログラムのソースコードなど、全部に右側に改行を追加するのは面倒なのでなんとか上手く表示させたい。

以前試した　syntaxhighlighterがある。
これはソースコードを成型して表示する物。バージョン3.08は使い方がわかるindex.htmlがあった。
コンテンツの中に以下のものだけ貼れば、preの間を表示してくれる。
https://cpu4edu.net/contents.php?test　でテスト。







function helloSyntaxHighlighter()
{
	return "hi!";
}


しかし、表示だけでコピペなどの機能がないので、新しいバージョン3.09か４をインストールしようとしたがいまいちわからない。
本家サイトはこちらにある。
https://github.com/syntaxhighlighter/syntaxhighlighter
なので諦めてとりあえず古いバージョンのまま使う時は使うことにした。


掲示板の設置：
www.cpu4edu.netのサイトに掲示板とカウンターと問い合わせフォームを作っていたので、リンクを貼った。
URL
http://cpu4edu.net/wforum/wforum.cgi
掲示板は海外からのゴミがいっぱい。
ゴミが増えたら、cgi-binの中のdataの中のlog.cgiを空にする。ファイルは存在してないとダメ。
荒れてるので日本語入力と、確認コードを漢字表記に変更。
設定の詳細は作成元のページ。init.cgi　を編集、見ればだいたいわかる。
たしか、さくらの設定ページに簡易インストールがあったと思ったが消えてる。
本家のサイトは以下。
https://www.kent-web.com/bbs/light.html


アクセスカウンター設定：
これも、再度メニューの最後に付け加えてみた。
これも本家サイトは同じく以下。
https://www.kent-web.com/


問い合わせフォーム：
リンクをはった。
最初画面に埋め込もうとしたが、フォントが化けたり、フォームの入力欄が表示されなかったので、リンクにした。

とりあえず公開：
2023.12.26　刷新したページを公開。 index.shtml　をホームページにした。
index.php　でも動くけど、こっちはバックアップにした。

アコーディオンメニュー：
クリックで開くメニューはアコーディオンメニューというらしい。
左にアコーディオンメニューを追加、これに関しては別サイトからサンプルを探す。JSとCSSが使われてる？
CSSファイルをtempnateのCSSに追加。
考え方としては、チェックボックスとリストをセットで作って、ちえっくボックスは非表示でメニューにして、そこをクリックするとチェックがつく、
チェックの有無によってリストの表示幅を変える。ちけっくなければ表示幅０で非表示、チェックされたら表示幅を広げる。
このチェックは別のページに行くと引き継がれないところが難点。

ページの構造：
トップの横に並んだヘッダーメニューからは、トップケージのページのコピーのメイン記事を書き換えたものを作った。画像ありなしの2種類を使い分け。
ページの構造を、共通部分と記事に分けて作成。
記事の部分をインクルードして表示するようにした。
インクルードの方法は、既存のベタ打ちのページを上手く読み込めれば手間がかからないので、phpで取り込むか、SSIでインクルードするようにした。
どっちも試しながら作ってみたので、混在してしまってる。
トップページとヘッダーメニューのページは、SSI。
各記事はphpで呼ぶようになって統一感ないが、せっかく作った軌跡もあるし素人なのでまあしょうがない。

試しながらわかったこと：
SSIの動作については、.htaccessを作る、内容はさくらインターネットのサイト内で検索して作った。
ファイルの拡張子は、shtml指定。それ以外だと動かない。
SSIとphpが混在してもダメ。phpを使うなら、.phpの拡張子にしないといけない。
ファイルのインクルードはphpでもできるので、全部php書いてみたらそれでも動いた。
shtmlで引数を渡す方法が分からなかったので、再度メニューからコンテンツに飛ぶところだけ
contents.php?記事番号
を作った。記事番号はから ファイルのディレクトリと拡張子をつけて呼び出すように作った。
記事は一通り書き換えて、記事用のディレクトリ内に置く。
写真は楽天からの移植のページのものは、imageR　の中。
tempnateのひな形のイメージは、 img の中。
js,cssのディレクトリもtempnateのもの。
研究紹介ページの写真も、他のたくさんの写真と一緒にすると整理しにくいので別にディレクトリ作った。

記事のかきかた：
記事には、
最上段にコンテンツメニュー番号
ページ名称とホームへのリンクを貼る。

　

の順でタグを３種類使い分け。
最後に、前と後のページのリンク。

最初と最後にちょっと面倒な作業が入るが、他は以前のコンテンツをそのまま使った。

関連作業：
以前の　www.cpu4edu.netの方のページのサイドメニューを新ページにリンクを貼りなおした。
これまでは、ルート直下の番号.HTMLにつながっていたが、ルート直下にファイルが多すぎてみずらいので、記事用のディレクトリに整理した。

2023年末からのホームページ作成作業についてまとめ

きっかけ：　
某教育機関の教員で、研究室のページをHTML　手打ちで置いていたのですが、所属機関の方針で、外部にホームページ作るな、学内からリンクをはるな、というお達しを受けて、○○研究室のページ、という記述をなくして、リンクも外した。
といっても、せっかくいろいろ試した記録が忘れっぽい自分には役立ってるので、自費でサーバー借りてるしあくまで個人の趣味のページということで作り直した。

見栄えも整える：
この機会にWordPressを使ってカッコイイページでも作るか、と思ったが、さくらインターネットのライトプランなので使えない。スタンダードなプランにすると金額が上がる。特に商売目的でもないのでお安いライトプランのまま見栄えのいいページを作ることを考えた。
まず、コンテンツマネージメントシステム、CMSを置く方法。フリーで軽量なCMSがダウンロードできたので、ダウンロードしてFTPで設置してみたらすぐ動いた。
JS-CMS、任意のディレクトリを作成してそこに置くと、使える。元ファイルは別フォルダに一通り保存してある。
ホーム
https://cpu4edu.net/hp/
においてちょっと情報を入力してみた。簡単に使えそうだが、以前作ったコンテンツを入れていくのはちょっと面倒そうだったので、これを使うのはやめる。会社のページっぽいものを作るのにはよさそう。
もし定年後に会社を作るとか考えたときに使うか...？

次にテンプレートのひな形を置いてから作る方法。
Webで探すとフリーのテンプレートがたくさんある。
今回は、Tempnateさんのテンプレートを使わせていただくことにした。

そのままでは足りない：
テンプレートで使えそうなのはシンプルでサイドメニューがあり数ページを並列に並べてある会社のページだったので、たくさんあるページを表示するのにはちょっと足りない。
楽天ブログでフリーページにたまった記事を置きたかったので左側にコンテンツメニューを並べることにした。
ところが、文字が大きいと画面をはみ出す。よく見る開いたり閉じたりするメニューをつけたかった。