ここと合わせてブログも見て頂けると良いかと?
当アカウントの動きにご興味があればですが。
ていうかこのページ、分かりやすく人が来ます😆ww
まぁ、ここから出発すれば手間なくチェックできるもんね。
利便性は大切ということでしょう。
さっと予定していた更新スケジュールでも書いてみようかな?
見出しの下に本文がなかったから。
必ずしもGoogle Cloudである必要もなかったけど、App Engineなら他のGoogle系サービスと相性良いからね。
これはチャレンジネタだと思うよ?
実際にはLua以外にも様々な言語が使われているはずです。
ひとまず箇条書きをやってみました。
Luaは触ったことがありませんが、詳しくはアナザーエデンのプログラミングを個人サイトで試すにてご紹介させて頂いております。
更新履歴
Home(グラスタの場所一覧表〜入手範囲別〜)とアナデンで揃えたい武器やバッジなどをそれぞれ東方外伝分まで更新。
ファンサイト制作のためのアトリエ及びウェブセーフカラーパレットなど便利ツールを大きくレイアウト更新。
ファンサイト制作のためのアトリエ及びウェブセーフカラーパレットなど便利ツールをそれぞれ修正。
併せて各コード解説ページとのリンクを形成。
アナデン・IT系を問わず、アトリエを中心に行き来できる仕組みとした。
ファンサイト制作のためのアトリエ及びウェブセーフカラーパレットなど便利ツールをそれぞれ修正。
ソースコード、VS Codeのsettings.json、クラウドのシステム及びPythonによる自動化など、Web制作に必要な資源を管理できるWebページの原型を整えた。
ファンサイト制作のためのアトリエ及びウェブセーフカラーパレットなど便利ツールにそれぞれ追記。
前者をコードの管理に、後者のシステムの管理に用いるページとして、自分でも「サイト制作のためのアトリエ」として扱いやすいよう🌟マークを付け、内部リンクを整えた。
ループ攻略集大成:星5フィーネと八妖に「木霊&海月火・拒魔&煙々羅」を移行。残りは「2部結戦役・赤殿中&天狐・巴蛇&黒坊主」となる。
ファンサイト制作のためのアトリエに追記。
タブUIを活かし、引き続きページ内容の充実を図った。
ファンサイト制作のためのアトリエに追記。
Visual Studio CodeとAtelierを併せて、今後のファンサイト開発環境を「Visual Atelier Code」と呼称することを記述した。
Home(グラスタの場所一覧表〜入手範囲別〜)に追記。
極グラスタの仕様について、注意としつつ公式由来の説明書のみを掲載した。
このサイト制作に必要な作業環境の一覧をウェブセーフカラーパレットなど便利ツールへ移行。
自分にとっても使いやすいリンク集にした。
ファンサイト制作のためのアトリエを公開。
今回は完成してから公開するのではなく、順次、段階に分けてお知らせする形としてみた。
アナザーエデンのプログラミングを個人サイトで試すにCSSを追記。
アナデン最難関コンテンツとして、改めてサイトマップにも加筆した。
アウトドアエリアの土台が完成。
アウトドアに関する記述もfein's portalからコピーペースト可能となった。
アナザーエデンのプログラミングを個人サイトで試すを公開。
アナデンの開発で使われている「Lua」というプログラミング言語を用いて、このサイトに小さなUIを表示してみました。
ループ攻略集大成:星5フィーネと八妖に「蟹坊主&陸吾・面霊気&鬼蜘蛛」を移行。残りは「2部結戦役・赤殿中&天狐・巴蛇&黒坊主・木霊&海月火・拒魔&煙々羅」となる。
ループ攻略集大成:星5フィーネと八妖を新設。既存のレポートページから八妖系を全て逃がすことにした。妖狸&夜雀・片車輪&玄亀を移行。
アナザーエデン:feinが書いたレポート集に「プルマディアーナ紹介文」を移行。残りは「2部結戦役・赤殿中&天狐・巴蛇&黒坊主・木霊&海月火・拒魔&煙々羅・蟹坊主&陸吾・面霊気&鬼蜘蛛・妖狸&夜雀・片車輪&玄亀」となる。
アナザーエデン:feinが書いたレポート集に「混沌の影と普賢一刀流道場」を移行。残りは「2部結戦役・赤殿中&天狐・巴蛇&黒坊主・木霊&海月火・拒魔&煙々羅・蟹坊主&陸吾・面霊気&鬼蜘蛛・妖狸&夜雀・片車輪&玄亀・プルマディアーナ紹介文」となる。
AI学習や無断転載を防ぐプログラムの小ネタ集を新設。
タブ型のUIを導入するとともに、JavaScriptによるイメージスライスを掲載した。
昨今のAI学習に係る騒動は、後々まで語り継がれる大きな論争として、多くの人の語り草となるでしょう。
ここへ来て、本当に「Web制作」の勉強をしていて良かったと思っています。
自分がやりたいことを実践しつつも、困っている人の一助となれるわけですよ。
私が持っている技術は拙いものだと思いますが、それでも個人的にサイト等を作ってWeb活動をしようとする人たちにとって、有益な情報となるはずです。
とりあえずhtml・css・JavaScriptだけで良いかと思いますね。
Google Driveを活用してサーバーの容量不足を解消するを新設。
サーバーの容量不足を解決できる手法を提示。併せてブログを整理し、追加の記述を行った。
火力攻略集大成:ASサキによる「豪炎猛火廻生」の完全制圧を新設。「ASサキによる赫灼たる豪炎猛火extreme4」が移行完了しました。
併せてブログの続きを記述した。
アナザーエデン:feinが書いたレポート集に廻生に関する記述をASサキのもの以外全て移植。「報酬がとても豪華な廻生シリーズ」がfein's
portalから移行完了しました。
併せてブログの続きを記述した。
JavaScriptでイラストアルバムを作成するを新設。
イラストレーターの作品を展示できる場所を用意した。
X(旧:Twitter)のAIからイラストなどを守る試みに、小説のAI除け対策を掲載。
ホーム(アナザーエデン グラスタの入手場所一覧)にKyabia様のイラストを追加掲載。改めて公開のお知らせを行い、固定Tweetに設置した。
アナデンのスクリーンショット投稿に係る指針を新設。
fein's portalにあった「SNS含むネタバレへの対応」を移行し、かつAI学習を懸念したゲームのスクリーンショット投稿のアンケート結果等を収録。
かつ、このページはハンバーガーメニューにも追加した。
X(旧:Twitter)のAIからイラストなどを守る試みを新設。その名のとおり、AI学習からイラストを守るための工夫を記載した。
かつ、このページはグローバルナビゲーションとハンバーガーメニューにも追加した。
加えて、関連する話題へジャンプできるよう、随所にリンクを設定した。
個人サイトでよく使うJavaScriptに【ヘッダーのロゴ画像スクロール】を退避。当時の草稿が見つかるまで下記記述を付与しておくこととした。
コードに合う解説文の出庫待ち
JavaScriptでフッターの内容を統一するに「スクロールトップボタン(Back to Top Button)を作る>スクロールトップボタンのCSS」を暫定的に追加。
このままでは何年経っても手持ち記事が片付かない恐れがあります。
文体として整ったものから順に、片っ端から追加していく更新の型へ変更としました。
アナザーエデン:feinが書いたレポート集に廻生「時の闇を照らせし者の試練」を移植。
アナザーエデン:ファンサイト制作RTAにWebサイト制作に向いたパソコン選びを移植。
アナザーエデン:feinが書いたレポート集にループor火力「攻略の選択肢」を移植。
JavaScriptでフッターの内容を統一するを新設。個人サイトでよく使うJavaScriptから一部記載を逃がし、追加の掲載スペースを用意した。
アナザーエデン:feinが書いたレポート集に冥255フィーネの火力を移植。fein's portalにあった、ウクアージが仲間になる!が完全に移行しました。
個人サイトでよく使うCSSにハイパーリンクのカラー変更解説を追加。
PDFをWebサイトに掲載する際の工夫に複数pdfのプレビュー表示に使うcssとJavaScriptを追加。
このページの下部にある「これから先の構想」に追記。
Google Cloud・Microsoft Azure・Amazon Web Serviceで静的ウェブサイトホスティングに使われるプロダクトを追記した。
アナザーエデン:feinが書いたレポート集に古いウクアージを移植。
アナザーエデン:ファンサイト制作RTAに創英角ポップ体への感想文を移植。
強敵のリストの型ができたため、sectionを挿入。文書構造を明確化した。
加えて、アナザーエデンの公式アルティマニアに係る記載を移行した。
PDFをWebサイトに掲載する際の工夫を新設。複数pdfのプレビュー表示のcss&js記載のため、javascriptのページから記載を逃がした。
グラスタ表を生んだテユールメナスの骨子が完成。fein's portalから「テユールメナスとその影」が移行した。
このページの下部にコード管理について追記した。
併せて、コード管理のためのスタイルとして「class="codegra"」を導入。
これから先の構想をこのページの下部に追記した。
個人サイトをレスポンシブデザインにする方法を新設。他のcssページもまとめて細部を修正した。
グラスタ一覧表の型ができたため、sectionとasideを挿入。文書構造を明確化した。
アナザーエデンのコンテンツリストのPDFにプレビュー機能を追加。
アナザーエデン:feinが書いたレポート集に「強敵キラーのマナ」を移行。他、グラスタ表を生んだテユールメナスにもコンテンツを移行。
アナザーエデン:feinが書いたレポート集に、デバフ耐性グラスタのレポートを追加。ポータルサイトのテユールメナスコーナーを引き続き整理。
個人サイトのイラストや写真をCSSで整えるを新設。メインのCSSページから画像関連のコードを逃がしつつ、新しくコードを追加。
個人サイト制作:サイトマップを整理。CSSに関するページ増加に備えて新しく枠を設置した。
Googleコンソールにて全ページ登録が確認できたため、各ページの下部にあるサイトマップを整理。よりシンプルな形とした。
個人サイトのホスティングとコンテンツ作成とアナザーエデン関連ページ・サイトマップにセクションを導入。文書の論理的な区分を明確化した。
ページの新設ペースが上がってきたため、xmlサイトマップを作り直した。
グラスタ表を生んだテユールメナスに「グラスタ一覧表ができるまでのフィールドワーク:第3話」までを移行。続きも移行予定。
個人サイトの表をCSSで整えるにコードを追加。他のCSSページにも淡い赤の見出しを付け、視認性を向上。
個人サイトの表をCSSで整えるを追加。個人サイトでよく使うCSSから表に関するコードを逃がした。
個人サイトでよく使うCSSにdisplayプロパティの解説を追加。
アナザーエデン:feinが書いたレポート集から、フィールドワーク関連の記載をグラスタ表を生んだテユールメナスへ逃がした。
グラスタ表を生んだテユールメナスを追加。
「グラスタ一覧表ができるまでのフィールドワーク:第2話」までを移行。続きも移行予定。
アナザーエデン:feinが書いたレポート集に「Raptorロイド・コレット・アルフェン・シオン(動画付き)」を追加。fein's portalより「コラボコンテンツの強敵シリーズ」が完全に移行しました。
Google Sites の再開は2023/7/4、Google Cloud の開始は2024/9/15。
それぞれをこのページのネット環境(笑)ページに記述追加。
アナザーエデンの強敵リストとアナデンで揃えたい武器やバッジなどのデザインを改善。記載やスクショを追加した。
グローバルナビゲーションのリンクにアニメーションを追加。
アナザーエデン:feinが書いたレポート集に「グランドリームよりエルピスソードのほうが火力が高い」というエピソードを追加。
個人サイトでよく使うCSSから多数のコードを移動し、改めて個人サイトの見出しをCSSで整えるとして追加。
草花写真の最適化を行った。
グローバルナビゲーションにあるシンボルマークの位置を微調整した。
アナザーエデン:feinが書いたレポート集に開眼シェリーヌ・アザミ編、ジュスティーヌ&カロリーヌ・テイルズコラボ真精霊を追加。ポータルサイトを整理しつつブログ更新。fein's portalから「開眼や邂逅など、キャラが仲間になる強敵戦」が全てこちらのサイトへ移行しました。
アナザーエデン:feinが書いたレポート集の記載量が増えてきたため、異境についてのレポート全集に周回に関するレポートを逃がしました。
アナザーエデン:ファンサイト制作RTAに「外部SNSサービス依存からのエクソダス」を移植しました。
このサイトのシンボルマークとバナーを追加。グローバルナビゲーションに魚のシンボルを追加。
CSSをfooterとheaderに分離。それぞれ最適化を行った。
さっそくと言うべきか、長大なページになってきました。
このapp
engineによる新サイトができたのは2024年9月15日なのですが、この10月くらいまでは基礎のhtml・css・JavaScriptとPythonを過去の自分のノートから組み込む作業が多かったです。
それも2024年11月初旬にはほぼ完成し、残りはせっせと文章を移していく体制に移行しましたね。
head内部のコードを順次最適化
どこかで動作しない部分が出てきたらごめんなさい…でも私自身が後から気付ける仕組みになってるから。
これは人が見えるところの更新ではないんだけど、ページ読み込み速度に影響します。
完璧にするのは難しい側面がありますが、例えば グラスタの場所一覧表 のように複雑な構成及び画像が何枚も入っているようなページだと、体感レベルで大きな差が出るのです。
CSSの分離と最適化
さっそく…まずはCSSからややこしいことになってきました。
正確には、ややこしいことになりそうな気がしてきました。
メインのCSSに大量のコードが入っており、日に日に把握が難しくなってきたのです。
そこで、メインのCSSから順次コードを他のCSSに逃がす作業を行います。
例えばヘッダーとフッターに分けたり、自分がサーっと見てすぐに把握できるような長さにしていきます。
コード管理によるhtmlの分離
まずは当サイトで使っているcssとJavaScript、必要ならhtmlコードを全て解説付きで掲載します。
当初は1ページずつの予定でしたが、あまりに長大なページになってしまうので分けることにしました。
これを完成させることで、私自身もより良いコード保守ができるでしょう。
手持ち記事の陳列を最優先
できればページ全体が完成してから公開という型を守っていきたかったのですが、それをやっていると何年経っても手元が片付きません。
恐縮ですが、何でもかんでもこのサイトへ文章等を逃がしまくる形へ、途中から変更しました。
こちらのサイトであれば、どれほどページ追加をしようとナビゲーションが重くなったりはしません。
下のスクリーンショットには、rss202410.htmlというファイルが写っています。
これはアクセスが減っていくと思われる過去の更新記録ですが、残しておく必要はある。
この種のページは今後も増え続けていきます。
将来的にはこういうファイルを使って実験をしようと思ってますね。
AWSやAzure、Cloud RunなどにデプロイしてこのWebサイトと繋げてみるのです。
このWebサイトに悪影響を出さず、閲覧者に一切迷惑をかけることもなく、いろんなクラウドサービスを試し放題。
手書きコードだとこういうことを自由にできるのが強いと思います。
具体的には、次に示すようなクラウドのプロダクトを使います。
App Engineは今このサイトがホスティングされているプロダクトですね。
次はAWS Amplifyの予定ですが、アクセスが増え続けて経費がかかるようになってからでも遅くはないでしょう。
ただ、どのような設定環境下でどのくらいの負荷がかかると経費が発生するかまでは、試してみないことには分かりません。
限界までApp Engineを無料で使い倒してみるのも良いですね。
実り多い学びの機会となるでしょう。
私の想定が間違っていなければ…
これらのクラウドに分散させることで、総計で1000を超えるhtmlページを持つ大きなWebサイトであっても、無料で維持し続けることができるかと。
アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。
個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。
ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。