「NOBODY:PLACE の移行関連」の版間の差分
Ippei Suzuki (トーク | 投稿記録) |
Ippei Suzuki (トーク | 投稿記録) 編集の要約なし |
||
| 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/'); | |||
2019年8月21日 (水) 14:08時点における版
デザイン制作
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/');