サイトをリファクタリング!

投稿日:2018/08/25

【図1】
クリックで拡大表示されます。

また大改造しましたw

どうも,かな~り久しぶりの投稿です.
というのも,今年に入ってからは前回に続きまたまたこのサイトを改造しようとしていたので投稿できる記事の数が激減していましたね.
しかし,8月,夏休みに入ってからは本格的に取り組み,約3週間でリリースできるレベルにまで到達しましたので,今回リリースしました!

ちなみに【図1】は前のサイトですね!
これはデザインの参考のためしばらく公開したまま放置しようかなと思っています.

さて!どう変わったのか,次章から説明していきますw

どう変わったのか?

①動的サイトになりました
前のサイトとの決定的な違いはここですね.動的サイトになりました!
前のサイトはHTML/CSS/javascriptのみという静的サイトだったため,実装できない機能などが多くありましたが,動的サイトにしたことで実現できる幅が広がりました.

ちなみにPHP/MySQL/HTML/CSS/javascriptを使用しています.

②タグ機能が使えるように!
動的サイトにしたことによる恩恵の1つ目ですね.
データベースと提携することで,記事一覧とタグ一覧の関係から処理できるようになりました.
ちなみにメインSEDNsMaLMaMの3つのそれぞれが持つ記事に登録されているタグのみを,各ページに表示させるように工夫しています.

③コンタクトフォームが使えるように!
動的サイトの恩恵2つ目です!
やっとTwitterに行く必要なく,Aboutページからお問い合わせいただけるようになりました!
こちらもPHPで処理させています.
ただし,ドメインをいくつか用意していますが,使用できないドメインがいくつかある可能性があります(docomo.ne.jpもそうだった).
私の手元にiOSの実機が無いことやすべての電子メールに登録していませんので,チェックできておりません.
挙動がおかしい,このドメインは使えないんじゃないか?と感じましたら,TwitterのDMにてお知らせいただけると嬉しいです.よろしくお願いします.

④コメントを投稿できるように!
動的サイトの恩恵3つ目です!
データベースを使うことで,各記事に対応するコメントを選択させる処理を実装することで実現できました.
投稿・削除ができますので,ぜひコメントよろしくです!(*´∀`*)

⑤レスポンシブ対応を実現!
いよいよモバイル・タブレット版が出ました!
こちらも動的サイトの恩恵です.javascriptも活躍していますが.
PC版・タブレット版・モバイル/スマホ版の3種類を用意していますので,ぜひ見比べてみてください(・∀・)

ちなみにPCでサイトを見ても,ブラウザのウィンドウ幅に応じてレスポンシブにレイアウトが変わりますよ!!

⑥サイト名を変更しました
前のサイトのサイト名がちょっと・・・ねぇ,長ったらしいしヘッダーも微妙だし・・・と自分でも思っていたので(ぇ),変更しましたw
すでにヘッダーを見ていただいているかと思いますが,「もへじの編綴」となりました.ヘッダーもシンプルにw
こちらで,末永くよろしくお願いしますm(__)m

⑦MaLMaMページを新たに新設しました
前のサイトではBooksページでした.これの内容の幅を広げました.
MaLMaMページにある記事でプログラミングの勉強の参考になれたら嬉しいです(リリース直後なので新しい記事はもう少しお待ち下さい・・・).

⑧独自ドメイン・HTTPS通信を実現!
まず,レンタルサーバを移転しました.やはり動的サイトということもあり,前のサイトで使用していたウェブクロウの無料版の静的サーバではサイトが表示されませんので,バリュードメインのXREAという無料の動的サーバに移転しました.
こちらでは独自ドメインやSSL証明書の設定ができましたので,無料の独自ドメインを取得してHTTPS通信するようにしてみました(ドメインが不安とは言わないで(((震)))).

⑨ほかにもまだある気がする
なんか忘れたけどまだある気がする!!!!(ぇええ)

今後やること・課題

①管理者ページの実装
一番やりたいのはこれですね.
記事投稿などの「効率化・最適化」です.せっかく動的サイトになったのでやりたいですね.

②検索機能の実装
これがここで述べる中で一番難しいかな,機械学習の導入を考えています.
機械学習の勉強,がんばります!(๑•̀ㅂ•́)و✧

③デザインが変なやつを良くする
例えばコメントフォームとコンタクトフォーム・・・ですね!!!スマートスッキリにしたい!

④Vue.jsもしくはReact.jsの導入
勉強がてら,導入していろんな機能を実装していこうかなと考えています.
手始めに「タグのインクリメンタルサーチの実装」や,「コンタクトフォームのメールアドレスのドメイン選択フォームをコンボボックスにする」といったところでしょうか.
①で述べた管理者ページにおけるマークダウン記法の実装も,これでやってみるかなぁ~.

⑤その他ちょくちょくやります.
問い合わせによる問題指摘の対応やその時思いついた追加機能をちょくちょくやります.

変更があり次第,Homeの更新情報にてお知らせします.

タグ:

Comment

0

匿名1号

2018-08-26 02:56:50

だいぶ変わったね~