新たな自分でいっぱいにするよ

感想は自分のためのエンターテインメント

夢サイト作成の備忘録

Q. 何故令和に夢サイトなんですか?
A. 夢サイトが! 好きなので!!!

ということで、2021年に人生初の夢小説サイトを作成しました。htmlもcssJavascriptも分からなかったので超がんばった。
苦労して作り上げただけあって自分のサイトはたいへんに可愛く(我が子が可愛いみたいな感じです)、時々見に行ってはニッコリしています。元気が出る!

こだわりポイントは2つ、
①広告を出さない(少なくともエロ広告はNO)
②トップページのデザインは、スマホで見たときは縦長、iPad miniで横向きで見たときは2分割されるようにする
です。
当初2つだったこだわりポイントがサイト作成を進めるうちにゴリゴリ増えていくとは、この時まだseigakupostは気づいていなかったのだった……。(予告)

こだわりを実装する上で夢サイトに特化した技術ガイドというのは基本探してもヒットせず*1、都度がんばって情報をかき集めたので、今後他の誰かが同じ疑問を持ったときに助けになればと思い、わたしが立ち止まった部分をメモしておきます。とてもすごくかなりピンポイントだし、各言語が分かる人には「マジマジ常識だC~!」とか「おめぇ何でそんな回りくどいことやってんの?」って感じかもしれないけど、誰かの役には立つかもしれない。
みんな、令和でも夢小説サイトをつくろう!

前提

【使用サーバー】
スターサーバーフリーの広告なしプランをお借りしました。
www.star.ne.jp
お金が発生しないで広告なしというありがたすぎるサーバーです。あとわたしの管理人名が星関連なのでドメインにstarって入ってるのもよい。
当初は「なんか……Wordpressってのが良いらしいネェ……」ということでPHP+MySQLプランでお借りしたのですが、WordPressデザインのことが全然分からなかった(テンプレートサイトの素敵htmlデザインをWordpress上で実装するにはどうしたら良いの!?)ため、このままじゃ一生完成しないナ……と思い諦めました。でも今回サイトを作ってみてhtmlのことはチョット分かったし、Wordpressにできたら楽だろうなあと思ったので、いつか必要が生じて気運が高まったらやってみたいです。

【使用ツール】
・さくらエディタ:大好きさくらエディタ。基本これをポチポチやってブラウザで確認の流れでした。
FFFTP:お仕事で利用してるので何も心配いりませんでした。よかった。このために今まで仕事してきたのかもしれないね。(過言)
あと途中からデベロッパーツールを使うことを覚えました。使い方はあんまりよく分からなかったけど、レイアウトがどこかでズレるよ~という時にどこがズレてるのかを把握するのに役立ちました。(それまではそれっぽい箇所を勘でいじって見当をつけていた)

基本スペックはこんな感じで、あとは好きなサイトのリンクからテンプレートサイトを訪問、好みのデザイン(こだわり②に合致するやつ)をベースに理想の形になるまでいじりました。

以下、ピンポイントな疑問と解決法になります。

case1 パスワードページのソースにパスワードを表示させたくない

Javascriptファイルを外部ファイルにする。

この疑問に対しておすすめされる方法って、大抵「urlをパスワードの答えにしよう」なんですよね。わたしの場合パスワードの答えはジャンルの業界用語にしたかったし、業界用語を組み込んだurlは嫌だなあと思ったので、上記の方法を取りました。
外部ファイル化の方法はcssの外部ファイル化と同じです。

<script type="text/javascript" src="password.js"></script>

上記をソース内のどこかに書けばOK。わたしはhead内に置いています。調べた過程で「bodyの最後に書くといい」みたいな記述を見た気もしましたが、ちゃんと動いてるので気にしません。
「password.js」ファイルをhtmlファイルと同階層に作成し、ファイル内にjavascriptの処理を記入しています。

あと、Javascriptの処理をhtml内に直接書く場合は

<script><!--
function myEnter(){
...
}
// --></script>

のようにコメントとscriptタグで囲まれていますが、.jsファイルに記入する際はタグとコメントを外してfunction以下のJavascriptの処理だけ直書きしてください。タグを残しちゃうとうまく動かないです。

なお、Javascriptの中身は下記リンクの「Q&A4 プロンプトではなく、フォームにパスワードを入力して使いたいのですが」を参考にしました。ここでも細かいこだわりが出て、ダイアログ表示はヤッ!になったので……。このサイトさんは分かりやすくてとても助かりました。さすが「イヌでもわかる」と冠しているだけある。ワンワン。
cya.sakura.ne.jp

これで、ナノなんかでよく見る「テキスト入力&ボタン押下」方式のパスワード遷移ページが完成です。

case2 名前変換ってどうやるの?

→Dream Maker2使用

「ゆぱんだらいふ」さんのHow toを参考にDream Maker2をお借りしました。
upanda.life

前述のパスワード用Javascriptのコードを外部化した流れでこちらも外部ファイル化しました。長い処理をhtmlに直書きするのがなんか嫌だったのである。

html内

<script type="text/javascript" src="js/namechange1-1.js"></script>
<script type="text/javascript" src="js/namechange1-2.js"></script>


namechange1-1.js

//登録用ID設定
var CookieID = "Dream2";
function getCookie(key) {
  if (document.cookie){
      index = document.cookie.indexOf(key, 0);
      if (index != -1) {
          val_start = (document.cookie.indexOf("=", index) + 1);
          val_end = document.cookie.indexOf(";", index);
          if (val_end == -1){
              val_end = document.cookie.length;
          }
          return(unescape(document.cookie.substring(val_start, val_end)));
      }
  }
  return(null);
}

function setCookie(key,value,expires){
  var cook_data = "";
  cook_data = key + "=" + escape(value);
  if (expires){cook_data = cook_data + "; expires=" + expires.toGMTString();}
  document.cookie = cook_data;
}

function set_name(set_name_value){
  var expires = new Date();
  value = set_name_value;
  if ( value == "" ) value = "null";
  expires.setTime(expires.getTime() + (6 * 30 * 24 * 60 * 60 * 1000));
  setCookie(CookieID,value,expires);
}

function JSset(){
  item1 = document.dream.name1.value;
  item2 = document.dream.name2.value;
  set_name(item1+","+item2);
  document.dream.submit();
}

function DeleteCookie(key){
  var value   = "";
  var expires = new Date();
  expires.setTime(expires.getTime() - 3600);
  setCookie(key,value,expires);
  location.reload();
}


namechange1-2.js

// クッキーが無い場合は初期値を表示する
var getname = getCookie(CookieID);
if (getname == null || getname == "null") getname = "みょうじ,なまえ,";
names = getname.split(",");


元のソースを参照するとscriptタブでJavascriptの処理が2分割されていたので、何か意味があるんだろうと思い、.jsファイルも2つに分けています。seigakupostにはJavascriptが分からぬ。動いてるのでヨシ!(合言葉)

なお、名前設定(入力)部の直後に書いてねと指示のある

<script language="JavaScript">
<!--
    document.dream.name1.value = names[0];
    document.dream.name2.value = names[1];
-->
</script>

については、これくらいならもういいかと思ってhtml内に書き込みました。

名前変換出力ページ(小説本文ページ)も同じ要領で外部ファイルを参照しています。

case3 名前変換の出力部を一行にしたい

前提で述べた通りわたしはさくらエディタ使いなわけですが、改行があると一括変換をかけるときに面倒なので、一行にまとめました。

ベース

<script language="JavaScript">
<!--
    document.write( names[1] );
-->
</script>


OK

<script language="JavaScript">document.write( names[1] );</script>


NG

<script language="JavaScript"><!--document.write( names[1] );--></script>


最近のバージョンでは

document.write( names[1] );

コメントアウトしなくても大丈夫だという意見を拝見したのでなしにしました。一応ChromeとEdgeとFirefoxSafariで確認しましたが問題ありませんでした。ヨシ!
因みに、NGパターンにするとブラウザ確認時に名前が消えます。ベースとの違いは改行の有無だけなのに何故? seigakupostにはコメントアウトが分からぬ。


おまけ*夢小説とは直接関係ないTIPS

おまけ1 URLから.htmlを消したい

→「.htaccess」ファイルを使う

URLに拡張子が出るのは何となくイヤだな~と思ったので消しちゃいました。
.htaccess」という名前のファイルを作成し、下記を記述します。

RewriteEngine on
# htmlを消す
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

以下のサイトが詳しいです。
toretama.jp

上記対応と併せて、html内のリンクからも.htmlを消さないと拡張子が表示されちゃうそうなので、全部消しましょう。因みに.htmlを消すとローカル環境での画面遷移が出来なくなる(よね?)ので、疎通テストはたいへん不便です。それでもこだわりを取りたい。

おまけ2 URLからindexおよびindex.htmlを消したい

.htmlを消した上でindex画面でindex.htmlも表示しないようにするには、という処理。indexとindex.htmlの2つを合わせるとちょっと分かりづらかったので書いておきます。

RewriteEngine on
# htmlを消す
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

# indexを消す
RewriteCond %{THE_REQUEST} ^.*/(index.html|index)
RewriteRule ^(.*)(index.html|index)$ http://ステキな夢サイト.jp/$1 [R=301,L]

「#indexを消す」部で記しているのは、index.htmlおよびindexのどちらかのURLを参照した場合、「http://ステキな夢サイト.jp」に遷移するという処理です。「# htmlを消す」部を書いてるのでたぶん.htmlの遷移は書かなくてもいいんだけど、どっか不備があって.htmlがウッカリ表示されちゃってたら嫌なので保険としてどちらも書きました。
「#indexを消す」の「http://ステキな夢サイト.jp」部は例なので、各々のサイトのindexにあたるURLを記入してください。(「index.html」抜きでね!)

あと、相対パスじゃなくてWebサーバの絶対パスで書いちゃう手もアリだと思います。(わたしは「今後もし移転とかしたときに修正が面倒くさいな~そのまま持っていけるほうがいいな~」と思ったのでこの形にしました)

                                                              • -

*1:勿論「夢サイトを作ろう!」的なHow toは先人の皆さまが公開してくださっていて大変ありがたいのですが、「夢サイトでよくあるあの機能を実装したい!」と思った時にダイレクトにQiita記事が出てきたりしない、という意味