piayo's blog

はっさみYO! 沖縄でまったりWeb制作

goo2wp: gooブログから WordPress に移行

お友達から相談で、gooブログから WordPress に移行したいとのこと。

  • 引越しデータの画像URL置換
  • 画像の一括ダウンロード

これができれば可能ってことで作りました。
引越しデータのテキストファイルを選択してください。
https://cdpn.io/piayo/fullpage/ogXQEMB

codepen: https://codepen.io/piayo/pen/ogXQEMB

あとは、

  • Movable Type・TypePad インポートツール
  • 落とした画像をFTPで一括アップロード
  • Bulk Media Register

とかです。

ダークモード対応・その他

ミニ表示モード

G-calize version 2.3.0 だします。

  • ダークモード対応
  • スケジュール表示に対応
  • 月表示時: ミニ表示モードに切り替えする機能
  • 年表示時: 当月以外の日を薄く表示
  • 他いろいろ調整

裏側

  • 色付け CSS を再設計（ css 変数, nest 記述化など ）
  • 設定ダイアログを web components 化
  • Service Worker 調整
  • 開発環境を Vite 化

 

祝日カレンダーですが、（すでにご存知の人もいるかと思いますが）Googleの祝日カレンダーに休日でない日が表示される事象が発生しております。直るまでは以下のカレンダーIDを利用するのをおすすめします。

 

国民の祝日および休日（国立天文台暦計算室）
ID: 2bk907eqjut8imoorgq1qa4olc@group.calendar.google.com

https://calendar.google.com/calendar/u/0/embed?src=2bk907eqjut8imoorgq1qa4olc@group.calendar.google.com&ctz=Asia/Tokyo

 

G-calize Version 2 に更新

chrome.google.com

拡張機能、長年ほったらかしにしてました。すいません。
Manifest V3 に更新しないとストアから消えちゃうので修正。

設定画面、
別タブで開くよりその場で色変更できたほうが楽なので、Googleカレンダー画面に挿入する方式に変更。

今日の背景色を無くしました。ごめんなさい。
祝日よりも優先すべきか悩んで、丸いアクセントはあるし、わかるだろうってことで。
ここらへん意見ほしいかも。コメントください。
Version: 2.1.0 背景色の復活、枠線色を追加、をしました。
コメントくださった方ありがとうございます。

祝日カレンダーの選択も動かなくなってたので修正。
自分のカレンダーでやりたい方は、別途カレンダー作成、終日でイベント登録、カレンダーを一般公開 にし、そのカレンダーIDを入力してください。

多言語化・翻訳、
https://dekiru.net/article/18336/ を参考にしてやった。便利だ。

ソース新しく書き直した。
JS読みにくい...（昔の私は頑張ってた。jQuery大好きだった）。

新しく使ったのがこれら。

  • TypeScript: 型あると安心。
  • lit-html: 宣言的に書けて便利。
  • HTMLDialogElement: ダイアログ表示。フォーカスが裏に回らないので便利。
  • Animation API: ダイアログ表示/非表示 で利用
  • CSS Nesting: 設定画面のCSSをネストで。

投げ銭リンクも付けてみた。
少しでも収益あると嬉しい＆モチベーション上がるので paypalme リンク付けました。
気に入っていただけたらよろしくお願いいたします。

Gメールに「そちらの拡張機能を売りませんか？」のメールがいっぱい来ます。
これまでの最高オファーが $13,000（ 約189万円 ）です。
売ると大変なことになるので売りません。
https://gigazine.net/news/20210218-open-source-extensions-malware/
https://gigazine.net/news/20220831-google-chrome-extension-steal-data/

Google Feed APIが終了。結果、SpreadSheetにしたよ。

 

Google Feed APIが終了っぽくて騒いでますね。
朝、お客様から電話で「ブログのリンクが出てませんけど〜」って。
調べたら廃止予定だったらしい（知らんかった

とりあえず、早急に直さねば。ってことで、
http://rss2json.com/
を見つけて対応。
でもなぁ、いつ終わるかわからないサービスだし心配だなぁと。
まぁその時で別の手考えるか。で終わり。

夕方、twitterで話題になってるかなーって検索すると、みんな困ってる様子。

https://twitter.com/search?f=tweets&q=google%20feed%20api


その中に、おもしろいのを発見。

crocro.com

 Spreadsheetを使う手！なるほど！

日付とかも取得したいし、rdfなrssだったので、いろいろいじってみました。
いろいろ参考にし、試行錯誤のが以下になります。

function scraiping(url) {
    var myActiveSpreadSheet = SpreadsheetApp.getActiveSpreadsheet();
    var myActiveSheet = myActiveSpreadSheet.getSheets()[0];
    //ここでkey宣言
    //この部分が後のJSで「gsx$****.$t」で簡単取得できる
    myActiveSheet.getRange(myActiveSheet.getLastRow()+1, 1).setValue("date");
    myActiveSheet.getRange(myActiveSheet.getLastRow(), 2).setValue("title");
    myActiveSheet.getRange(myActiveSheet.getLastRow(), 3).setValue("url");
    var response = UrlFetchApp.fetch(url);
    var myRegexp = /<item [^>]+>([\s\S]*?)<\/item>/gi;
    var match = response.getContentText().match(myRegexp);
    for (var i in match) {
        var txt = match[i];
        var ttl = txt.match(/<title>(.+?)<\/title>/)[1];
        var date = txt.match(/<dc:date>(.+?)<\/dc:date>/)[1];
        var url = txt.match(/rdf:about="(.+?)"/)[1];
        myActiveSheet.getRange(myActiveSheet.getLastRow()+1, 1).setValue(date);
        myActiveSheet.getRange(myActiveSheet.getLastRow(), 2).setValue(ttl);
        myActiveSheet.getRange(myActiveSheet.getLastRow(), 3).setValue(url);
    }
}

※AppScripytはよくわからないもっと簡単にできるかも 

jsonのURLは

https://spreadsheets.google.com/feeds/list/ *** key *** /od6/public/values?alt=json

※注意：[feeds/cells]ではなく[feeds/list]にしています

$.ajax({
    type: "GET",
    dataType: 'json',
    url: [spreadsheetsのURL]
}).done(function(json){
    for(var i=0;i<json.feed.entry.length;i++){
         var entry = json.feed.entry[i];
         //ここで簡単取得
         var date = entry.gsx$date.$t;
         var title = entry.gsx$title.$t;
         var url = entry.gsx$url.$t;
        //ここからごにょごにょ
    }
});

以上。

やるせない

Streamusって拡張が人気みたい。

音楽再生に特化したChrome拡張「Streamus」が便利すぎてiTunesから曲を消した : Blog @narumi

んまぁ、すこし前から知ってましたがブックマーク数がすごいのでやっぱこんな拡張が人気というか需要多いんだなぁーって思った。

 

でもね、俺も2年前に作ってます。

とりあえず公開＆様子見。 - piayo's blog

（忙しくてupdateできてないけど

 

一時期は2万ユーザーいたけどさ、今は1万未満。

今はあっちの方が人気みたいで、多分ユーザーが向こうへ流れてる。

嫉妬とゆうか、なんか、やるせない気持ち。

。。。よければ使ってね。

for内DOM構築

DOM操作の最適化によるJavaScriptチューニング（前編）
http://html5experts.jp/yoshikawa_t/1888/

innerHTML += ... な書き方について
http://d.hatena.ne.jp/teramako/20130905/p1

insertAdjacentHTMLってのがあるのか...。使ったことない。

DOM構築パフォーマンスと脆弱性に気を使うので、人によって手法や好みが違うと思うので気になる話題ですね。

新米の俺がforでDOM構築時は（セキュリティ考慮順で）、

  1. 簡単なhtml構造の時はcreateElement, appendChildを使う。
  2. 少々複雑な時はarray.push(str)、最後にinnterHTML=array.join();
  3. 複雑な時はstr+=htmlで最後にinnterHTML=str

かなぁ。ケースバイケース。参考：http://jsfiddle.net/piayo/PjPzK/

次回の記事が気になる。