自治会居住者の安否確認ソフトをご紹介します。
2020/7/1 この度、ホームページを「海事ITコンサル事務所」から「Hull ICT研究所」に移転いたしました。 今後は、Microsoft の OneDriveとExcel VBA を利用して、クラウドコンピューティングの研究を進めていきたいと思っています。よろしくお願いします。
2020/8/12 自治会居住者の安否確認ソフト をご紹介いたします。
流山市の某自治会では、当研究所で開発した「自治会居住者確認ソフト」を使って自治会居住者の安否確認と自治会名簿の管理を行っています。
今回、一般向けのデモ版を用意しましたので使い勝手などを見ていただければ幸いです。
今後は更に使い勝手のよいソフトにすべく種々改良を加えたいと思っています。
デモ版ソフトの詳細は 自治会の安否確認 ページをご覧ください。
2020/8/12 ICTとは畑違いですが、これまで30年間、家庭菜園にて 多品種少量生産を目指して野菜を作ってきた経験をもとに、 いかにしたら楽に且つ効率的に野菜を育てることができるかを
「楽々家庭菜園の薦め」 に纏めました。
野菜の詳細な年間作付計画、お薦めする野菜の一覧表、季節ごとの野菜の育て方、実際の野菜栽培の成功・失敗例等、一般的な野菜作りのホームページとは一風変わった小冊子が出来たと思っています。
詳細は 楽々家庭菜園 ページをご覧ください。
2020/8/12 写真報告書作成ソフトを(Excel2016またはMicrosoft365のExcel)+OneDriveを含むWindows10の環境にて動作するようにVersion
Upしました。 本ソフトは、これまでと同様、個人の使用に限り自由に使っていただくことといたしました。
詳細は 写真報告書 ページをご覧ください。
2020/8/12 ホームページをレスポンシブに対応
させるべく、 ようやく曲がりなりにも作業を完了することができました。自身の備忘録として、またホームページを独力で作成しようとしている初心者の皆さんに少しでも
参考になればとの思いも兼ね、作業中のトラブル回避策等を下段の 「管理人のつぶやき」 に纏めました。
新型コロナにより、言わば引きこもり生活を余儀なくされた状況となり、時間にかなり余裕ができましたので、ホームページの 刷新を図るべく作業を開始しました。この際だから、レスポンシブにも対応するホームページにしようと思ったのですが、久しく触れていないHTML,CSSは、いずれも初心者同然で、
作業の後半は苦難の日々を送ることになってしまいました。
レスポンシブデザインについてはネットの情報を色々と調べ、試行錯誤的に作業を行えば、そのうち、うまく機能するのではないかと淡い期待を持っていましたが、現実はあまくなく、PC対応版が略出来上がった6月中旬から作業を開始して以降、全くの袋小路に入り込んでしまい、お手上げの状態になりました。
そこで考えを改め、HTMLとCSSを基本から勉強しなおそうと決め、幾つかの書籍の中から「HTML＆CSSとWebデザイン入門講座」（著者：Mana 発行所：SBcreative）を選択して購入しました。
本書籍はレスポンシブ関連のチャプター５まで読み終えて、改めてレスポンシブデザインに挑戦いたしました。
もともとホームページはHome Page Builder20クラシック（以下、HPB）を使って作成していましたので、この環境で全面的にHTML5を使ってレスポンシブ対応にできないかトライいたしました。
作業完了までに紆余曲折があり、なかなかうまくいきませんでしたが、最後にはなんとか纏めることができましたので、そこまでの過程におけるトラブル回避策等を簡単ではありますが、ご紹介させていただきます。index.htmlのソースファイルはGoogle
Chrome上のホームページにて確認していただければ幸いです。
１．index.htmlファイルの先頭から</head>タグまではHTML5ベースの記述で問題は生じませんでした。記述完了後は直ちにファイルを上書き保存できました。（この結果、HTML5とHPBとは互換性があることを確認いたしました。）
2. <body>タグから上段の<nav>タグまでは慎重に記述しました。エラーが発生するとHPBはクラシック版に対応したエラー処理を自動的に行うため、画面がひどく崩れることがあります。こうなると修正が大変ですのでバックアップファイルを使って初めからやり直すことにならざるをえません。
後で気が付いたのですが、この種のエラーは開始タグに終了タグが対応していないこと（終了タグの修正を抜かりました。）に原因がありました。（分かってしまえば当たり前ですね。）
なお、<header class="wrapper">, <div class="wrapper">におけるwrapperの意味が初めはよくわかりませんでしたが、表示画面全体を指しているのでご注意ください。
3. 6月中旬からの作業では、ある時点で突然レスポンシブ対応が不能となり、どうやり直しても元に戻らない不具合を経験しましたので、今回の作業では一行一行慎重に対応しました。新しい作業の都度必ずバックアップファイルを作成の上、例えばwidthを％表示すべきか固定表示すべきか等を実行して確認いたしました。途中、CSSで.news-contentsのwidthを変更した際に、何故かHPB上でborder表示が変更できなくなりましたが、これを無視して作業を続けました。(無理やり、widthを変更することもできるようですが、これを実行したらレスポンシブ対応が不可能になるのでご注意ください。）
4. また、ある時はエラーが発生するとHPBは自動的にエラーを修正してくれるのですが、どこを修正してくれたかが分からず、画面は<h1>タグの文字が初期値の巨大文字になってしまい、どう対処すればいいのかも全く分からず、初めから作り直すこともありました。これも後で分かりましたがエラーが自動修正された時点でCSSファイルの格納フォルダが別のフォルダーに書き換えられていたということが原因でした。
5. CSSにて記載されていない状態で、HTMLを先に記述すると、存在しないCSSコードを読み込もうとしてエラーが発生することがあります。この場合も画面がひどく崩れるためファイルを間違っても保存しないようにすることが必要です。
6. <footer>タグではHTML5に従ってレスポンシブ対応にしようとしたら、逆に対応できなくなり、やむを得ず、ここだけは従来の<div
id="footer">タグによりCSSを対応させ難を免れました。
7. CSSの最後部にスマホ対応分を記載し、基本的に.page-header, .news-contents、#footerともwidth:100%とすることによりレスポンシブに対応いたしました。font-sizeはPC版の設定で特に問題ないことを確認しました。
8. スマホでの表示確認は、初めはWebサーバーにファイル転送の上、iphoneでうまく表示されるかを確認しました。これはＨＰＢから直接index.htmlファイルをブラウザーで開く --->Ｇｏｏｇｌｅ
Chromeを選択--->続いて、画面右上メニューを開いて、その他のツール--->デベロッパ－ツールの選択---＞メニューからスマホ画面の選択により確認できることも分かりましたが、一方でＨＰＢのプレビュー画面を直接狭めることでもチェックできることが分かりました。
9. index.htmlファイルの作業が終了しましたら、その他のファイルは基本的にHTMLの構成が同じのため作業的には大したことはありませんでした。HPBにはHTMLファイル編集機能に加えて、別のファイルを「テキストエディターで開く」機能を有しているため、これを利用してコピペすれば作業がかなり楽になるということが分かりました。
10. そんなこんなで、ようやく曲がりなりにもレスポンシブ対応が可能になりました。