デザイン
- デザインテーマ
  - 公式テーマ：Life（デフォルト）
- カスタマイズ
  - サイドバー
    - モジュールを追加でHTMLを選択
      - googleタグマネージャーのbody内タグを追加（タイトルは『GTMbody内』にした）
  - フッタ
    - ※1をコピペ
      - 広告表示
      - タイトルのリンクをアーカイブに変更
- スマートフォン
  - 詳細設定
    - レスポンスデザインにチェック
設定
- 詳細設定
  - headに要素を追加
    - ※2をコピペ
      - googleタグマネージャーのhead内タグ
      - トップページへのアクセスはアーカイブへリダイレクト（※現在はやめた）
  - 解析ツール
    - Google Search Console

↓※1

<!-- // 広告表示 -->
<div id="content-footer-ads">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- hatena_aoma23 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
<script>
// 記事があれば記事下に移動
var entry_content_elements = document.getElementsByClassName("entry-content");
if (entry_content_elements.length > 0) {
    var content_footer_ads=document.getElementById("content-footer-ads");
    var temp=content_footer_ads.cloneNode(true);
    content_footer_ads.parentNode.removeChild(content_footer_ads);
    entry_content_elements[0].appendChild(temp);
}
</script>

<!-- // タイトルのリンクをアーカイブに変更 -->
<script>
(function() {
  document.querySelector("#title a").href = "/archive";
}());
</script>

↓※2

<!-- トップページへのアクセスはアーカイブへリダイレクト -->
<script type="text/javascript">
  if( location.href == 'http://aoma23.hatenablog.jp/'){
  location.href='http://aoma23.hatenablog.jp/archive';
}
</script>

<!-- googleタグマネージャーのhead内タグ -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxxxxxx');</script>
<!-- End Google Tag Manager -->

googleタグマネージャー作成

googleタグマネージャーで新しいアカウントを作成して埋め込むタグを取得

body内

googleアナリティクス

新しいタグ作成
- googleアナリティクス側でトラッキングIDを取得しておく

googleアドセンス　タグ

新規作成

googleサーチコンソール

新規プロパティ作成

2018-11-05

Selenium IDEで保存したプロジェクトが開けない

IT SeleniumIDE

こんにちは、こんばんは、aomaです。

SeleniumIDE便利ですよね！

FireFox時代からお世話になってます。

で、今日久々にchromeのアドオン触ったんですが、ハマりましたのでメモ。

保存したプロジェクトが開けない...

頑張って記録したプロジェクトを保存したんです。

デフォルトファイル名『d5575001-b608-44a0-b22f-3d1f2c1fc549.txt』となっていて、txt？と思ったのですがそのまま保存。

で、プロジェクトを開くで保存したファイルを選択すると...

まさかのエラー！どうなってるんだってばよ！

拡張子を『side』にする必要あり

ということで専用の拡張子で保存してやる必要がありました。

ファイル名を変更『d5575001-b608-44a0-b22f-3d1f2c1fc549.side』

これで無事プロジェクトを開くことができました。（まさか拡張子名チェックなんてしてるとはね）

ちなみにsideはサイドではなくSeleniumIDEの略です。たぶん。

2018-11-05

【はてなID変更】はてなブログからはてなブログへ引越しする

IT はてなブログ日常

はてなIDは変更できない。。だから引っ越しする！

はてなブログをやっていると、はてなIDを変更したくなるときってありますよね。でもはてなIDは変更不可能な項目となっており、どうしても変更したい場合は『退会してから再登録をお願いします。』とのこと。。

そのためアカウントを新規作成して引っ越す必要があります。これが面倒で諦めた人も多いのではないでしょうか。

しかし覚悟を決めて引っ越ししたら意外と簡単でした！って言おうとしてたんですけど、めんどうでした。。特に画像。。。

今回は実施した全手順をまとめておきます。はてなIDを変更したい人必見！

今回の引っ越しポイント

はてなIDを変更したい
- 今回のメインです。旧IDと完全にさようなら！
画像も引っ越したい
- 画像URLにもはてなIDが含まれているため、新しいURLにするよ！
記事のページランクも引き継ぎたい（SEO対策）
- せっかく引越したけどアクセス数が落ちるのは避けたい。記事毎に新URLにリダイレクトします！

引っ越し手順

※はてなID変更前の引越し元を旧ブログ、引越し先を新ブログと呼びます。

旧ブログから記事データをエクスポートする

設定→詳細設定→エクスポート→記事のバックアップと製本サービス→エクスポートする

新ブログのアカウントを作る

別のメールアドレスで新規アカウントを作成します。希望のはてなIDにしましょう。（言うまでもありませんが二度と変更できないので注意） ※メールアドレスは後から変更可能です。（引っ越し後に旧ブログのものに変更可能）

画像データを引っ越す

他のサービスからはてなブログに移転する際に、画像データも一緒に引っ越しできるようにしました。これまでのインポートにも有効です（はてなブログからはてなブログへの移転を含む）

と書いてあったので「超絶楽チンじゃん！」と思ったけど甘かったです。画像データの移行に旧ブログのはてなフォトライフの画像が出てこない。。どうやらはてなフォトライフは対象外な模様。

画像URLを抽出してダウンロード

参考サイトいろいろありましたが、結局rssのソースコードをコピペして抽出しました。

１. rss.txt作成

rssページ分のソースを貼り付け

http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss
http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss?page=2

２. grepして画像URL抽出

grep "https\:\/\/cdn-.*png\|https\:\/\/cdn-.*jpg" -o rss.txt > photo.txt

３. 不要な行を削除

m.jpgや120.jpgなどのサムネイル画像は不要なので削除

cat photo.txt | grep -v "_m." | grep -v "_120." > photo2.txt

４. 画像ファイルをダウンロード

wget -i photo.txt -nc --random-wait

はてなフォトライフに一括アップロード

最後に画面から一括アップロードして終わり！と思ったら一度に5個までしかアップできない。。なにやらFlashが有効になっていないといけないらしく、下記サイトを参考に対応できました。

はてなフォトライフでアップロードを複数選択できない場合の対処方法 http://www.ktg6.com/entry/2017/06/04/135458 https://ktg6.com/2017/06/04/2017-06-04-135458/

使用しているブラウザにAdobe Flash Playerがインストールされている必要があるようです。私の場合、ブラウザにGoogleChromeを使っています。どうやら、Flash Playerの設定が有効になっていなかったので、修正したところ、上手くいきました。

1.最新のFlashプレイヤーをインストールする 2.はてなフォトライフアップロード画面のアドレスバーマークをクリック 3.Flashを「許可」にする。Flashがない場合は4を参照 4.サイトの設定からFlashを「許可」にする

画像を差し替え

ここでエクスポートした記事データをテキストエディタで開いて画像URLを旧から新に置換していこうかなーとか思ってたのですが、結局記事インポートしたあとに手動でひとつひとつ編集するのとそんなに手間変わらないなーという感じです。（そして面倒になり半年がすぎ結局やらないことにしました。みなさんは頑張ってw）

新ブログにインポートする

いよいよ記事をインポートします。旧IDを完全に消すため、エクスポートした記事データをテキストエディタで開いて旧IDを新IDに一括置換しました。 ※前述の通り画像はインポート後に差し替えたので画像URLのみ置換対象外としました。

https://blog.hatena.ne.jp/my/import にアクセスしてインポート。これはかんたん。

旧ブログから新ブログへリダイレクトする

本当は301（永続的）リダイレクトしたかったのですが、無料アカウントだとjavascriptのみで対応する必要があり、jsだと301できないので302でいくことにしました。

旧ブログにjsを実装

「デザイン設定→カスタマイズ→ヘッダ→タイトル下」に下記をコピペ

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script type="text/javascript">
    var domain = 'https://aoma23.hatenablog.jp';　// ←新ブログのURL
    var path = location.pathname;
    var url = domain + path; 

    // canonical書き換え
    $("link[rel='canonical']").attr('href', url);
    
    // リダイレクト
    location.href = url; 

</script>

jsによるcanonical書き換えはクローラーが処理してくれるとか無視されるとか諸説ありますが、まぁやっておいて損はないでしょう。

これで旧ブログの記事にアクセスすると新ブログの記事にリダイレクトすることを確認できると思います。

クローラーがインデクシングし直すのを待つ

Google Search Consoleでsitemap.xmlを送ってあげるとよいでしょう。

※1ヶ月くらい経過したのですが、いまだに変わらない。。。進展あれば更新します！待ってられないので、もう引っ越し記事公開しちゃう！

旧ブログ閉鎖

インデクシングが新URLになれば旧ブログへのアクセスもだいぶ減る（新URLに直アクセスされる）はずですので、 Search Consoleで確認し、問題なければ旧ブログは閉鎖しましょう。（何か不安な方や思い出を大事にする方は消す必要はありません）

ちなみにはてなブログの提供しているアクセス解析はページ表示後のjsでカウントしているらしく、リダイレクト処理を入れたタイミングで0になるので注意！

引っ越し完了！

お疲れ様でした！はてなID変更作業の完了です！

結論として、自分の場合、引っ越し作業はとても面倒で億劫になり、ブログ更新も半年ほど停滞するなどして無駄に時間を使ってしまった感があります。
（やるぞ！と決めてから11ヶ月も経ってしまった...）

みなさんは私のようにならずサクッと引っ越し完了してくださいね！
画像URLを無視すればそれほど時間はかかりません！

それではステキなはてなIDライフを！

2018-10-03

旧ブログからのリダイレクト処理を追加しました

こんばんばんばんaomaです。

ブログ引っ越し作業中と言ってから約半年が過ぎてしまいました。（怠けてた）

が！ついに再開しました。もうすぐ引っ越し完了します！のはずです！

2018-04-12

ブログ引越し準備中です

近々引越します！

はてなブログからはてなブログへ。

手順なども書く予定なのでお楽しみに。

では！

aoma blog

エンジニアの日常とか技術とか

実況中継シリーズ「開発現場で役立たせるための設計原則とパターン」を読みました。

Googleの画像圧縮webアプリsquooshがステキ！

はてなブログの設定を晒す

なぜ晒すのか

主な設定方針

はてなブログの設定

googleタグマネージャー作成

googleタグマネージャーで新しいアカウントを作成して埋め込むタグを取得

googleアナリティクス

googleアドセンス　タグ

googleサーチコンソール

Selenium IDEで保存したプロジェクトが開けない

保存したプロジェクトが開けない...

拡張子を『side』にする必要あり

【はてなID変更】はてなブログからはてなブログへ引越しする

はてなIDは変更できない。。だから引っ越しする！

今回の引っ越しポイント

引っ越し手順

旧ブログから記事データをエクスポートする

新ブログのアカウントを作る

画像データを引っ越す

画像URLを抽出してダウンロード

はてなフォトライフに一括アップロード

画像を差し替え

新ブログにインポートする

旧ブログから新ブログへリダイレクトする

旧ブログにjsを実装

クローラーがインデクシングし直すのを待つ

旧ブログ閉鎖

引っ越し完了！

旧ブログからのリダイレクト処理を追加しました

ブログ引越し準備中です

なぜ晒すのか

主な設定方針

はてなブログの設定

googleタグマネージャー作成

googleタグマネージャーで新しいアカウントを作成して埋め込むタグを取得

googleアナリティクス

googleアドセンス タグ

googleサーチコンソール

保存したプロジェクトが開けない...

拡張子を『side』にする必要あり

はてなIDは変更できない。。だから引っ越しする！

今回の引っ越しポイント

引っ越し手順

旧ブログから記事データをエクスポートする

新ブログのアカウントを作る

画像データを引っ越す

画像URLを抽出してダウンロード

はてなフォトライフに一括アップロード

画像を差し替え

新ブログにインポートする

旧ブログから新ブログへリダイレクトする

旧ブログにjsを実装

クローラーがインデクシングし直すのを待つ

旧ブログ閉鎖

引っ越し完了！

googleアドセンス　タグ