「NOBODY:PLACE の移行関連」の版間の差分
Ippei Suzuki (トーク | 投稿記録) |
Ippei Suzuki (トーク | 投稿記録) |
||
| (同じ利用者による、間の4版が非表示) | |||
| 1行目: | 1行目: | ||
== 画像の移行 == | == デザイン制作 == | ||
UnderStrapをベースにして、旧サイトのデザインを再現しつつかつレスポンシブを目指した。UnderStrapはBootstrap4であるためjQueryに依存しており、当初目標にしていた「Bootstrap-vue」によるテーマは実現出来なかったが、まあ実現出来たところで活用はしないし、Vueファイルをいじるのは面倒くさいので、ブログに関してはこれで良しとする。管理アプリなどについては引き続き「Bootstrap-vue」を前提として設計する。 | |||
== ブログパーツの制作 == | |||
=== プロフィール表示 === | |||
当初は固定コンテンツとして設計しようとしたが、プロフィール内容の変更を簡単にできるようにウィジェットで設計した。何も入力していない場合はデフォルトのテキストが表示され、カスタマイズされていたらそのテキストが表示されるといういわば「半固定コンテンツ」として実装。 | |||
=== 最近の投稿（アイキャッチ画像付き） === | |||
極力プラグインは入れたくないし、既存のプラグインはデザインの自由度が低いものばかりだったので、ウィジェットで実装。 | |||
=== 特定のカテゴリーの投稿（アイキャッチ画像付き） === | |||
「最近の投稿（アイキャッチ画像付き）」を拡張して実現。同じウィジェットを設定を変えて2回貼り付ければ良い。 | |||
=== SNSボタン === | |||
プラグインの導入も考えたが、どうやっても大袈裟になってしまうのでテンプレートとして自分で実装。OGP用テンプレートを用意する必要が生じてしまったが、概ね満足している。 | |||
== バッチ処理 == | |||
=== GoogleAccess統計用のブログ記事を作成する === | |||
毎月作成しているアクセス解析。1ニコ投稿画面やDIY RSSなどでWordPressへの投稿部分は完成していたし、グラフ向けにページビューを取得する部分などでGoogleAnalytics関連のライブラリは使用していたので、それらを応用することで実現できた。問題なし。 | |||
=== はてなブックマークをDBに蓄積する === | |||
はてなのAPIは信用出来ないし、OAuthはRead onlyには煩雑すぎるので、RSSフィードを読み込んで保存する形に。APIさえ信頼出来れば、記事生成時にAPIを叩いて得た結果で記事生成がベストなのだけれど、頻繁に壊れるしメンテされてないしで信用出来ないので、雉生成時にはDBから蓄積した情報を取得する。 | |||
=== はてなブックマークまとめ用のブログ記事を作成する === | |||
蓄積した情報を取得して生成、WordPressに渡すだけなので簡単……と思いきや、デザインで苦戦。今でもあんまりしっくりきていないのでそのうち見直すかも。 | |||
== データ移行 == | |||
予想はしていたがかなり苦戦した。特にCloudFrontが60秒でタイムアウトするので、なかなか重い処理が通らず。と思いきや、表示はエラーになっても内部処理は進んでいて、用意した件数分きっちり処理出来ていた。おかげで重複して登録してしまって2回やり直した。ちゃんと動いても手間が掛かる…… | |||
移行に当たっては「はてなブックマークまとめ」と「BOTまとめ」、既に別で移行済みの「スペイン料理日記」はカットした。 | |||
== 移行したデータの調整 == | |||
数がかなり多いし、昔のものとは構造も違うので完璧な調整は難しいが、極力対処していく。 | |||
=== 画像の移行 === | |||
WordPressで新しく書く記事で使用する画像は全てメディアにアップロードするが、既存の画像ファイルについてはメディアに追加するのではなくS3に追加する。 | WordPressで新しく書く記事で使用する画像は全てメディアにアップロードするが、既存の画像ファイルについてはメディアに追加するのではなくS3に追加する。 | ||
| 7行目: | 54行目: | ||
* https://nplll.com/assets/2019/08/sick_rougan.png | * https://nplll.com/assets/2019/08/sick_rougan.png | ||
* → https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets/2019/08/sick_rougan.png | * → https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets/2019/08/sick_rougan.png | ||
* https://nplll.com/assets_c/2019/08/sick_rougan.png | |||
* → https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets_c/2019/08/sick_rougan.png | |||
=== 工程 === | ==== 工程 ==== | ||
Ｓ3のバケットは既に作成済みなので、移行に必要な工程は以下の通り。 | Ｓ3のバケットは既に作成済みなので、移行に必要な工程は以下の通り。 | ||
| 14行目: | 63行目: | ||
# さくらVPSから画像ファイルをダウンロード | # さくらVPSから画像ファイルをダウンロード | ||
# S3にアップロード | # S3にアップロード | ||
# | # DBのURLを変換する | ||
重いファイルを扱うよりもDBをいじった方が楽なので、ローカルにバックアップを取りつつSQLで対処した。 | |||
UPDATE np_wp_2_posts | |||
SET post_content=REPLACE(post_content , 'src="/assets/', 'src="https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets/'); | |||
=== キャプチャ画像 === | |||
時代によってまちまちだったのでこれもDB検索で解決。 | |||
UPDATE np_wp_2_posts | |||
SET post_content=REPLACE(post_content , "http://img.simpleapi.net/small/", "https://blinky.nemui.org/shot?"); | |||
=== 引用 === | |||
引用の構造を変更予定。こちらは全て変えるのにはかなり時間が掛かりそう。 | |||
==== 例 ==== | |||
<pre> | |||
<blockquote><a href="https://cccabinet.jpn.org/bootstrap4/utilities/float"><img src="https://blinky.nemui.org/shot?https://cccabinet.jpn.org/bootstrap4/utilities/float"></a><p>これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を左または右に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。</p><cite class="clearfix"><a href="https://cccabinet.jpn.org/bootstrap4/utilities/float">横の配置ユーティリティ～Bootstrap4移行ガイド</a></cite></blockquote> | |||
</pre> | |||
==== ブラウザの拡張機能に追加するスタイル ==== | |||
<pre> | |||
<blockquote><a href="%url%"><img src="https://blinky.nemui.org/shot?%url%"></a><p>%text_n%</p><cite class="clearfix"><a href="%url%">%title%</a></cite></blockquote> | |||
</pre> | |||
2019年8月21日 (水) 18:35時点における最新版
デザイン制作
UnderStrapをベースにして、旧サイトのデザインを再現しつつかつレスポンシブを目指した。UnderStrapはBootstrap4であるためjQueryに依存しており、当初目標にしていた「Bootstrap-vue」によるテーマは実現出来なかったが、まあ実現出来たところで活用はしないし、Vueファイルをいじるのは面倒くさいので、ブログに関してはこれで良しとする。管理アプリなどについては引き続き「Bootstrap-vue」を前提として設計する。
ブログパーツの制作
プロフィール表示
当初は固定コンテンツとして設計しようとしたが、プロフィール内容の変更を簡単にできるようにウィジェットで設計した。何も入力していない場合はデフォルトのテキストが表示され、カスタマイズされていたらそのテキストが表示されるといういわば「半固定コンテンツ」として実装。
最近の投稿（アイキャッチ画像付き）
極力プラグインは入れたくないし、既存のプラグインはデザインの自由度が低いものばかりだったので、ウィジェットで実装。
特定のカテゴリーの投稿（アイキャッチ画像付き）
「最近の投稿（アイキャッチ画像付き）」を拡張して実現。同じウィジェットを設定を変えて2回貼り付ければ良い。
SNSボタン
プラグインの導入も考えたが、どうやっても大袈裟になってしまうのでテンプレートとして自分で実装。OGP用テンプレートを用意する必要が生じてしまったが、概ね満足している。
バッチ処理
GoogleAccess統計用のブログ記事を作成する
毎月作成しているアクセス解析。1ニコ投稿画面やDIY RSSなどでWordPressへの投稿部分は完成していたし、グラフ向けにページビューを取得する部分などでGoogleAnalytics関連のライブラリは使用していたので、それらを応用することで実現できた。問題なし。
はてなブックマークをDBに蓄積する
はてなのAPIは信用出来ないし、OAuthはRead onlyには煩雑すぎるので、RSSフィードを読み込んで保存する形に。APIさえ信頼出来れば、記事生成時にAPIを叩いて得た結果で記事生成がベストなのだけれど、頻繁に壊れるしメンテされてないしで信用出来ないので、雉生成時にはDBから蓄積した情報を取得する。
はてなブックマークまとめ用のブログ記事を作成する
蓄積した情報を取得して生成、WordPressに渡すだけなので簡単……と思いきや、デザインで苦戦。今でもあんまりしっくりきていないのでそのうち見直すかも。
データ移行
予想はしていたがかなり苦戦した。特にCloudFrontが60秒でタイムアウトするので、なかなか重い処理が通らず。と思いきや、表示はエラーになっても内部処理は進んでいて、用意した件数分きっちり処理出来ていた。おかげで重複して登録してしまって2回やり直した。ちゃんと動いても手間が掛かる……
移行に当たっては「はてなブックマークまとめ」と「BOTまとめ」、既に別で移行済みの「スペイン料理日記」はカットした。
移行したデータの調整
数がかなり多いし、昔のものとは構造も違うので完璧な調整は難しいが、極力対処していく。
画像の移行
WordPressで新しく書く記事で使用する画像は全てメディアにアップロードするが、既存の画像ファイルについてはメディアに追加するのではなくS3に追加する。
URLは以下のように変更になる。
- https://nplll.com/assets/2019/08/sick_rougan.png
- → https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets/2019/08/sick_rougan.png
- https://nplll.com/assets_c/2019/08/sick_rougan.png
- → https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets_c/2019/08/sick_rougan.png
工程
Ｓ3のバケットは既に作成済みなので、移行に必要な工程は以下の通り。
- さくらVPSから画像ファイルをダウンロード
- S3にアップロード
- DBのURLを変換する
重いファイルを扱うよりもDBをいじった方が楽なので、ローカルにバックアップを取りつつSQLで対処した。
UPDATE np_wp_2_posts SET post_content=REPLACE(post_content , 'src="/assets/', 'src="https://nplll-static.s3-ap-northeast-1.amazonaws.com/assets/');
キャプチャ画像
時代によってまちまちだったのでこれもDB検索で解決。
UPDATE np_wp_2_posts SET post_content=REPLACE(post_content , "http://img.simpleapi.net/small/", "https://blinky.nemui.org/shot?");
引用
引用の構造を変更予定。こちらは全て変えるのにはかなり時間が掛かりそう。
例
<blockquote><a href="https://cccabinet.jpn.org/bootstrap4/utilities/float"><img src="https://blinky.nemui.org/shot?https://cccabinet.jpn.org/bootstrap4/utilities/float"></a><p>これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を左または右に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。</p><cite class="clearfix"><a href="https://cccabinet.jpn.org/bootstrap4/utilities/float">横の配置ユーティリティ～Bootstrap4移行ガイド</a></cite></blockquote>
ブラウザの拡張機能に追加するスタイル
<blockquote><a href="%url%"><img src="https://blinky.nemui.org/shot?%url%"></a><p>%text_n%</p><cite class="clearfix"><a href="%url%">%title%</a></cite></blockquote>