Entries

Icon of admin
あおうま
サイト再開設ご祝儀拍手ありがとうございます!!
たくさんポチポチしてくださって本当にうれしいです!
Icon of admin
あおうま
#サイト作成

新たにサイトを開設するまでの道のりを書いてみる(2)

7 Web拍手(googleフォーム利用)

マジで大変だった。サイト用のgoogleアカウントを取得して、googleフォームを作るところから開始だし、解説サイトを理解するところからして鳥頭には苦痛だった。

・Googleフォームをサイトに埋め込んで拍手を作る|い|note https://note.com/kasiwamochi/n/n86f47757...
・同人女、googleフォームでweb拍手を作ってみる|早瀬|note https://note.com/s_hayase/n/n7728338a9dc...
・Googleフォーム送信後のサンクスページ【こまりメモ】 - Qiita https://qiita.com/komarimayuko/items/df4...

今はWeb拍手の配布スクリプトが古すぎたり消えてたりなので、どうしようもないんだけど……
よろずりんくさんで他ジャンルの個人創作サイトを回ったところ、現在もマシュマロやお題箱でなく、
拍手という応援ツールが稼働していることが大半なので拍手続行に至ったけど高い壁でした。
googleフォームの仕様が変われば今の記述は通用しなくなりそうだし、
データも拍手スクリプトほどきめ細やかに解析されないし、
何よりHTMLファイルがあまり綺麗じゃありません。
あくまで代用って感じです。
新しいスクリプトの誕生が待たれます。

8 サーバー契約とアップロード

Just-size Networksのサブドメインプランに出戻ることにしました。創作アダルト関係の規約が明確なのと、以前のアカウントを使うことができたのが決め手。
運営会社が以前toktokを運営していたところに変わったというのが不安要素なんですけど、閉鎖前のURLを使うことができるのは大きすぎる。
今だと安さ主体だとリトルサーバーやスターサーバー、古参がよければロリポかさくら が主流なんでしょうかね。
アップロードは古き良きFFFTP。
SSLを標準にして、.htaccessとかrobots.txtとかも以前のまま再設置した。このへんの技術はあまり変化なくてありがたいですね。
小説ファイルは以前と同じく年齢認証や検索よけもかねて全部まとめてBasic認証(パス明記)
なぜかindex.htmlがダウンロードになったりしてたんですが、再アップロードで解決。

9 てがろぐの設置
拍手にくらべたら秒で終わりました。神すぎた。
デザインを全然調整していないんだけど、デフォのが充分綺麗な気も。
本格的に全部弄ろうと思ったらまた大変な時間がかかってしまいそう。

そんなこんなで構築が終わりました。一週間くらいかな…でも徹夜ぎみになったりもした。
サイト全体をWordpressなどのCMSにするって手もあるんですが、小説サイトなので1ファイルずつの文字数が多すぎなので躊躇しているうちにphpのバージョンも上がり続けてる……
グローバルメニューだけでも切り分けられたら楽そうではあります。今後の課題。
というわけで令和の時代のサイト作成メモでした。
Icon of admin
あおうま
#サイト作成

新たにサイトを開設するまでの道のりを書いてみる(1)

1 データのサルベージ
閉鎖直前のログは残っていなかったので、EaseUS Date RecoveryでPCの削除データを復元。
1Gまでは無料復元できるのかな?
ともあれこれで2014年のサイトデータが抽出できました。この頃から記述をXTMLからHTML5に変えていたので、それも都合がよかった。
ちょうどこのデザイン(https://etre.lix.jp/aksm/cssgallary/cssl...)の頃。
これをベースに今の形式に変えていくことにしました。といっても既にスマホ・タブレット対応もしていたのですが……

2 画像編集ソフト(photoshop)の導入 & 素材探し
昔のphotoshopは購入したにもかかわらずライセンス認証ができなくなっているので(adobe死すべし)フォトプランを登録。
GIMPとか使えば無料で編集できるのかな…でも過去に使い方がわからず挫折した覚えがあったので素直にフォトショ。
素材探しとかが時間かかるようにも思うんですが、Woodland Ravens Watercolor Kit https://pixelbuddha.net/textures/woodlan...
案外すぐに見つかったのでラッキーでした。グレイッシュで、水彩画で、鳥で…と私の好みにぴったりでした。
しかも見本画像にデザイン用のカラースキームまである。親切すぎる。
アダルト不可の規約はなさそうに思えたのでありがたく採用。(Pixelbuddha — https://pixelbuddha.net/

3 同人サイト制作支援サイトを巡る。

最近の流行などもあると思うので、do | 創作・同人サイト制作支援サイト https://do.gt-gt.org/ さんなどの支援サイト・テンプレサイトを巡る。
中でも「【2020年版】個人の創作・同人サイト制作に役立つ無料htmlテンプレートサイト7選(+2) | do https://do.gt-gt.org/web-material/#toc-3」の記事にはお世話になりました。紹介されているのはどれもHTML5(Living Standard)、CSS装飾のところばかりなので、参考にするにはいいと思います。
Web拍手のお礼ページに空蝉|WEBサイトテンプレート配布サイト https://hiroec.com/さんの作品を利用させていただいた。

4 デザイン(PC)
PCの基本デザインは画像が魅力的なおかげでさくさく進みました。
photoshopでカンプを作って…という手順を踏んでない、いきなりの直書きです。
松サイトのCSS(kira kira night)が形を変えてfc2アダルトでのサイトCSSに残っていたので、文字装飾などはそれをベースにすることに。
ただグローバルメニューをどうするか等は悩みました。なんか結局、過去のを流用してしまいました。
スマホ主流の現在、本当はモバイルファーストでデザインした方が楽なのは分かり切っているんですが、見た目っていう意味ではPCファーストにどうしてもなってしまうのが困りものです。
つまづいたのは定義リスト(dl,dt,dd)の横並びデザインですかね……
flexboxを理解できておらず、また幅設定なども従来の指定とカチあってしまって、延々と時間がかかった。

5 デザイン(スマホ)
大変でした。
基本、スマホへの対応って、HTML5以上で書かれていてCSSレイアウトならあんまり特別なことをしなくてもいいはずなんです。
まずviewポートの設定をして(※head要素内に書く記述で、スマホ側がPCサイトのデザインをそのまま補正することを避けるもの。
仕様もちゃんとあるけど「<meta name="viewport" content="width=device-width,initial-scale=1">」って呪文をコピペで大体動く)
その後はCSS側でメディアクエリを幅ごとに切り替える。
うちはなぜかタブレットのデザインも用意しているのですが……基本はスマホ⇔PCでいいと思います。
PCデザインのCSSの下にメディアクエリを追加したら、今度はスマホ用のデザインを書いていきます。
文章主体サイトということもあって1カラムのシンプルレイアウトなので、ほとんどすべての要素のmarginやpaddingを小さめに上書きし、
狭い画面全体にコンテンツが表示できるようにします。
コンテンツ部分はこれで大丈夫なのですが、問題はメニューなどのナビゲーション。
とくにグローバルメニューは狭い幅のデバイスではもてあましがちなので、ハンバーガーメニューにしました。
これが大変だった……jquery使わなきゃいけないのでさらに。
結局【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery) | PENGIN BLOG https://crestadesign.org/hamburgermenu/ を参考にしました。
というかほとんどコピペしてしまいました。本当に大変だった(何度も言う)
本当はHTML側にパンくずリストをページ上部・下部の二か所に記述しているため(PC表示時は上部のナビのみ表示オフになっている)
グローバルメニューなんかトップページだけにあればいいだろ感もあったのですが、やはりちょっとは技術を使ってみたい。
でも立ちふさがるのはHTMLファイルの総数……相対パス記述だからフォルダが違えば記述も差があるし。
グローバルメニューを切り分けてphp埋め込みにすることが、今後のサイト改造での目標ですね…。
ハンバーガーメニューが完成したら、後はいらない要素を非表示(display : noneを指定)にしたり。
ナビゲーションさえ妥協できればスマホ対応は速いと思います。

6 HTMLの修正
地味に大変だった。
複数行置換ソフト grepreplaceを使って変えていくのですが、入力文字が小さすぎて疲れ目に非常につらい。
でもこれがなかったら本当に手打ち不可能なんで、やはりありがたいご長寿ソフト。Win10でも動いてくれました。
あと、HTMLになってない小説というのも多かったので、pbrs insertionというソフトを使ってHTML化します。
空行ごとにpタグやbrタグを自動挿入してくれるのですが、何だか長い文章だと尻切れになっちゃって苦労でした。
要するにhttps://html-css-javascript.com/insert-p... でやってることです。
この場合、テキストファイルは

 地の文だよ。(改行)
(空行)
「台詞だよ!」(改行)
「格好いい台詞だよ」(改行)
(空行)
(全角空白)地の文だよ。いろいろな情報を書いていくよ。(改行)
(空行)
「またもや台詞だよ」(改行)

という風に整形しなくてはならないので、秀丸で置換。
「(改行)(行頭全角空白)」を「(改行)(改行)(行頭全角空白)」にして、”」(改行)(行頭空白)”を」”」(改行)(改行)(行頭空白)”にすればOKだけだったので正規表現はあまり必要ありませんでした。
秀丸も置換ダイアログの文字が小さすぎてキツイ。
段落の先頭に全角空白を入れるクセをつけておいてよかった。小説を同人誌で出すときもいつも思っています。
2014年以降に更新した小説もけっこう多くて作業量が多かった。マジでここが山場。


長くなったので次回に続きます。
Icon of admin
あおうま
twitterアカウントのプロフィールにもサイトのURLを追加しました。
鍵垢のほうでは宣伝もさせていただいた。
拍手くださった方々ありがとうございます! ご祝儀嬉しい!

SNSでの紹介などについてですが、「よろずりんく」さんから他ジャンルの創作サイト様をサーフィン(死語)させていただくと、禁止にされている方々が多いよう。
私もたしかに晒しのような参照は困るんですが、良識を守った紹介なら構わないかな…
「隆元」でTwitter検索して出てきてしまっていいんかい、って感じもしますが…作品URLをパス・IDと合わせて直貼りとかじゃなければ興味のない人は読まないだろうし。(こういうのは悪意ありの晒しだからそもそも論外)BOT系(それぞれ楽しませていただいています!)の創作ツイもけっこう多いし。最近では力士さんの情報も出てきますね!
pixivに小説を上げちゃってるのも「R18作品なので検索エンジンからはワンクッションある」という要因が大きいです。実在した人物名なので、それなりに隠す必要があるというのは同意。

この時代にサイトでの活動を選ぶ人は、何かしら理由もあると思うので、やっぱり相変わらず慎重ではいなくちゃならないなーと思いました。
Icon of admin
あおうま
同人系のサーチさんに登録させていただきました。

・同人系サイト総合検索サーチ よろずりんく http://kn1.x0.to/
・女性向け戦国検索 http://jss.mints.ne.jp/jss/
・検索廻廊【JIN】 http://jin3.net/
・PLAYMANiAX http://playmaniax.s205.xrea.com/

登録作業が手動の場合は承認にも時間がかかるかもしれませんが…
特定ジャンル用サーチエンジンは個人の二次創作サイト存続のための命綱です。
しかしサーバー負荷もかかるため有料サーバー契約が必須。
今もサーチを維持してくださる管理人さんたちには本当に感謝です。

唯一困ったのはサイト内(/aksm/)をSSL化したので、バナーが表示されなくなってしまった件。
自サイト→他サイトへのリンクについては直リンを諦め、自身の鯖にアップすることで対応しました。
自サイトについては、まあ直リンできないと困るのでサーバーのトップにバナーを置いてhttp//の形で参照できるようにしました。
200 * 40のミニミニな大きさで綺麗なバナーが作れる方々すごい。
Icon of admin
あおうま
#サイト作成
一番困ったのはWeb拍手のCGIがのきなみ使用できなくなってることかな…
今はgoogle フォームを改造して拍手にしていますが、できれば乗り換えたい…

平成生まれのヤングに説明しておくと、「Web拍手」はだんでぃさんの提唱されたサイト管理者応援サービスです。
Web2.0が一般的になる前の個人サイト時代は典型的なメッセージツールでした。
今は「いいね」「お題箱」「マシュマロ」などに移り変わっていますね。
拍手は空送信それ自体が「応援回数」としてカウントされるので、管理人へのポジティブな気持ちを気軽に伝えることができます。
ポイピクの絵文字スタンプに感覚が近いかも。何度送っても大丈夫です。いたずらではなく、拍手として捉えてもらえます。
今はもうすたれたかと思いきや、個人の創作サイトさんを巡ってみると今も「いいね」や「マシュマロ」等外部サービスに移行しておらず、応援ツールは拍手が中心だったんですよね。たしかに「いいね」は押された回数が誰からもまる見えです。SNSじゃないのに評価数を気にしなきゃならなくなってしまい、運営側としてはやりづらそうです。
「マシュマロ」はtwitter連携しないとダメなんでしたっけ。AIが悪意ある投稿をはじいてくれるのはいいのですが、うちは18禁サイトなので、好意で書いてくれたメッセージが規制されたらいやだなあ…と思ってしまいます。twitterアカウントとサイトの運営を切り分けたい人もいそうなので、そこもデメリットかなあ。

「web拍手」はメッセージ送信用途で考えると空送信が必要なので冗長ですが、そのぶん文章を考えずとも連打すれば応援できるという身もふたもない便利さもあります。その回数がやる気に繋がったりもして。誰が送ったか特定しづらいのも気楽です。当サイトにもデザイン的観点から全頁に設置してしまってるので、押してくださると素直に嬉しいです。googleフォーム利用なので簡易なものではありますが。無論メッセージもOKですよ。
Icon of admin
あおうま
個人サイトをこの令和の時代に復活させるにあたってさまざまな技術的変化もありました。
参考サイトとかまとめたいな。