久しぶりのリニューアル。目的は2つありました。
個人的にはMovableTypeは、まっさらな状態からコーディングする身としてはとても扱いやすかったのですが、CMSを扱う案件の中では、少なくともここ3、4年、一度もMovableTypeを扱うことはなく、すべてWordPressでした。CMSを扱う新規案件では、まずWordPressで提案しています。
というわけで、このサイトもWordPressに移行することにしました。
このサイトは「Webサイト制作に関する情報」とい特性から、ほとんどのユーザーは平日の9:00から18:00まで、デスクトップによる利用がほとんどです。スマホが登場したときには、スキル試しということでWebレスポンシブにしていたのですが、それ以降のリニューアルでは、Webレスポンシブにはしていませんでした。
ただ、一つの制作サンプルとして、やはりWebレスポンシブ対応にした方がいいな、と対応し直すことにしました。
技術的なところでは、CSSで、単位は、vm と em を多用していることと、BEMのCSS設計を取り入れていることが特徴です。また、Gulpを導入することで、クロスブラウザ対応やファイルの軽量化を簡単に実現しています。
ローカル環境はMAMPで作りました。そこにWordPressをインストール。
MAMPをご存知ではない方、「ローカル環境MAMPにWordPressをインストール」という記事を書いていますのでよかったらそちらもチェックしてみてください。
管理画面の「ツール」→「記事のエクスポート」を選択します。これにはカテゴリ情報もコメント情報も含まれています。
MTの「本文」と「続き」が、WordPressでは「本文」にまとまるので注意です。必要に応じて、エクスポートしたテキストデータをCSSでレイアウト修正しやすいように、続きの前後にタグを追加しておくと便利です。
WordPressの「ツール」→「インポート」で、Movable Type と TypePad にある「インポーターの実行」を選択し、画面の指示に従っていくとファイルを選択する画面になるので、エクスポートしたファイルを選択します。
たったこれだけでほぼ完了！残りは、各ページのURLをリニューアル前後は同じにすること。このサイトの場合を例に対応したことのメモです。
このサイトの場合は、このサイト専用にテーマごと作成。ファイル構成は、トップ、カテゴリ一覧、検索結果ページ、記事ページ、固定ページ、エラーページというシンプルな構成で共通要素も多く、凝った仕様にしていないため、自由自在にできました。
ローカル環境で一通りの制作が完了したら、いよいよ本番反映です。ただし、いきなり本番反映は危険です。今回は新規DBにデータ移行も関わるので、閲覧できなくなる時間も発生してしまいます。そこで、本番環境にステージング用のドメインを用意し、そちらにローカル環境と同じものを構築します。
一旦、本番を参照先をステージングにすることで、もし問題が起きてもすぐに差し戻せるようにすることができます。その際に、管理画面の「設定」→「一般」のアドレス（URL）をステージングから本番に変更します。変更することで管理画面は見れなくなりますが、本番の参照先を認識するまでの間です。本番に参照先が変更され、問題ないことが確認できたら、ステージング用のドメインを削除して終了です。
コメント通知が有効にならない。結局、これはgmailではないメールアドレスを設定することで解決したのですが、根本的な原因は今も分かっていません、、。ここだけで2、3時間ハマってしまった、、、無念。
それ以外は元々はシンプルな構成であることが幸いして、すんなりWordPress化、Webレスポンシブ対応することができました。
この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・
この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・
これを知ったときはマジか！と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・
試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・
プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・
Clipyが超絶便利そうだったので、macOS Big Sur にインストール＆再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・
requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・
6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・
この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・
もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・
変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・
sassファイルを保存すると、cssファイルが自動生成されるという症状でしばらくの間、ストレスだったがようやく解決。 例えば、var.scssを修正して保存す・・・
記述方法は間違いないのに、文字化けしてしまう。 xhtmlはutf-8で宣言していたのだが、Javascriptで記述された日本語がブラウザで確認すると文字化け・・・
変数bnにhtmlファイルのファイル名を拡張子なしで取得するサンプル var bn = location.href.split("/"); bn = bn[b・・・
ローカル環境はMAMPを使いました。 データベースを作成する MAMPを起動し、「サーバを起動」後、「オープンWebStartの」をクリックします。 「ツ・・・
xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />・・・
Webサイトに動画を利用する際には、2017年8月時点では、webmとmp4とどちらにも対応していない場合の静止画像を用意して置くことにしている。 動画を違う拡・・・
正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い（バグ）が原因であるが、IE5や古いブラウザにバグが見られる。・・・
iBook G4（OS10.3.x）がある。Safariのバージョンは、1.xだ。2は10.4にしないと使えない。もっと詳しく言えば、10.4.10以下でないと・・・
ブラウザ、モバイルファースト、メディアクエリー、マルチ画面、タブレット・・・ 想定すべき画面サイズ、利用シーンに適した情報のコントロールが崩壊しつつある。 とい・・・
「test」
「>ころころさん コメントありがとうございます！ 確かに、APIドキュメント見ましたが、ライブに関する情報は今のところ取得できないようですね。 インスタライ・・・」
「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました！」
「＞名無しさん ご指摘、ありがとうございます！ 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」
「＞前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります（・・・」
「アバターを取得する「get_avatar」についても追記しました！」
「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」
「＞匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」
「（匿名）さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」
「コメントありがとうございます！ そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」