javascript

chrome.storageをPromise(async/await)する

Jun 1, 2021
POSTS

はじめに Chrome拡張機能を作っていると、chrome.storage.sync か chrome.storage.localを使うことが良くある。 chrome.local.sync.get( date => { console.log(date) }) 値取得時に簡単な処理なら良いが、複雑な処理を書くとネストが深くなりコールバック地獄になってしまうので、 Promise(async/await)を使って使いやすくする。いつも使うので、自分用にテンプレートとして記載書き方準備 const getStorage = (key = null) => new Promise(resolve => { chrome.storage.local.get(key, (data) => {resolve(data)}); }); // 省略形 const getStorage = (key = null) => new Promise(resolve => { chrome.storage.local.get(key, resolve)}) }); 取得時 thenの場合 getStorage().then((data) => {console.log(data)}) async/awaitの場合 (async () => { let a = await getStorage(); console.log(a); // })();

chrome拡張機能のストレージへの容量増加と中身の確認

May 29, 2021
POSTS

ストレージを増やす Chrome拡張機能を開発中に、急にデータの保存が効かなくなり以下のエラーが出ていた。 Unchecked runtime.lastError: QUOTA_BYTES quota exceeded もともとchrom.storage.sync.setで保存していたのだが、どうやら一つのキーに対して保存できるのは8KBまでらしく、それ以上の保存をしたい場合、保存先の変更と拡張が必要らしい。拡張方法作成しているchrome拡張機能のmanifest.jsonのpermissionsにunlimitedStorageを追加する。 "permissions": [ "storage", "unlimitedStorage" ], そして、chrome.storage.sync→chrome.storage.localに変更 //chrome.storage.sync.set({ key: value}) chrome.storage.local.set({ key: value}) これで同期機能は使えなくなったが、8KB上限はなくなった。ストレージを確認する拡張機能を使う今まで保存した内容を確認するのに以下のようなコードを打っていたが、毎回打つのは面倒だし、使い勝手は良くなかった。 chrome.storage.sync.get(null, ((data) => {console.log(data)})); 調べてみるとchrome.storageを確認する拡張機能を見つけた。コンソール画面から遷移して確認するが、コードを打たなくて良いのでかなり楽である。

Backlogで大きくなりがちな画像を自動で小さくする

Jun 25, 2018
POSTS

概要 Backlogのwikiに貼った画像が、横幅いっぱいに表示されてとても見にくいので、自動で画像を縮小してくれる仕組みを作りました。やり方 1. ChromeにScriptAutoRunnerをインストール任意のドメインで任意のJavascriptを実行できる。本当に重宝する。便利。 2. ScriptをScriptAutoRunnerにペースト [https://gist.github.com/0d4467755d11ada196a4097c1f8dab89:embed#Backlogのwikiの画像はでかすぎるから良い感じにする] Backlogのwikiの画像はでかすぎるから良い感じにするドメインの設定も忘れずに。設定するとこんな感じになります。これで設定完了です。あとはBacklogで大きい画像が表示されると、自動でリサイズされます。その他一番良いのはBacklogのサービス側でwidthを整えてくれることですね。あと、この方法は自分の表示が見やすくなっても、他の人は見にくいままなので、無闇に大きい画像を貼るのはやっぱりやめたほうが良い。

Backlogのチケット登録時に自動でテンプレートを入れる

Jun 24, 2018
POSTS

仕様 Backlogのカテゴリーを選択時に、予め設定したテンプレートを挿入する。動作動きを見たらどんなものかわかるはず。ここが便利チームで同じテンプレートが使え、自動で更新されるテンプレートはURLで読み込んで都度表示させるので、 BacklogのGitで管理して、テンプレートを更新（プッシュ）すれば、自動で全員更新される。導入方法 1. Chromeの拡張機能（ScriptAutoRunner）をインストール特定のページで設定したJavascriptを実行してくれる拡張機能。とっても重宝しています。 2. BacklogのGitにテンプレートをpush ## テスト実際にインサートされる文章 ### その他 Gitに保存されたテンプレートの例もしもGitがわからなければ、直接テンプレートをコードに書いてもOK 3. ScriptAutoRunnerに登録 ScriptAutoRunnerにコードを記入しますこのとき、どのURLで発火するかURLをAutoScriptRunnerに記入する。上の図ではpepope.backlog.comの部分。コード [https://gist.github.com/60ff5872b0820e744ac79ecfced3c0f6:embed#backlogのチケット作成時にカテゴリを選択すると自動でテンプレートが入る] 4. JavaScriptを環境に合わせて変更サンプルではプロジェクトの追加時のパスを記載しています。 var projectName="TEST" // backlogのプロジェクト名を記入。大文字注意。 // テンプレートをbacklogのリポジトリにmarkdown形式で保存。 var template = [ ["カテゴリ１", "https://pepope.backlog.com/git/TEST/repo/raw/master/template1.md"], ["自分で設定しているカテゴリ名を記載", "https://pepope.backlog.com/git/TEST/repo/raw/master/template2.md"] ]; その他スクリプトを作るよりも、ブログの記事にするほうが時間がかかる。 Backlogはとっても便利だけど、不便なところもあって、そこはアイディアで解決できる。その他backlog関連で作ったもの

Reveal.jsのテーマ一覧

Jan 12, 2018
POSTS

Reveal.js Reveal.jsとは HTMLでスライドを作成できるJavascriptです。設定方法 HTML内でCSSを指定すればOK <link rel="stylesheet" href="css/theme/white.css"> カラーテーマ一覧（プリインストール設定）初めから用意されているCSSの一覧。 CSSによってフォントやデザインの印象が大きく変わります。好みのものがない場合は、自分で作成もできます。自分で作成する場合は↓ [https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md] Black(default) white league Sky Beige Simple Serif Blood Night Moon Solarized サイトで確認サイトでも直接確認できます。その他 Reveal.jsをこれに使っています。

【Javascript】サイトのファビコンURLを取得する

Dec 3, 2017
POSTS

概要ファビコン(favicon）とはやり方想定環境 javascript favicon画像のurlは<HEAD>配下に<link rel="shortcut icon" href="アイコンのURI" >として書かれている以下コードを取得したいサイトで実行するとファビコンを取得できるコード //ファビコンURL取得 function favi() { //favicon画像のurlはhtml内のhead->linkタグの属性relがshortcut iconのhref値に記載されている for (var i = 0;i < document.head.getElementsByTagName('link').length ;i++){ if (document.head.getElementsByTagName('link')[i].getAttribute('rel') === "shortcut icon"){ var favicon_url = document.head.getElementsByTagName('link')[i].getAttribute('href'); break; } else { var favicon_url = ''; console.log("取得NG"); } }; console.log(favicon_url); }; その他 URLが相対パスの場合は少し工夫する必要あり。 chrome extensionなどjavascriptを後から挿入する場合に使える。 chrome apiでもっと簡単に取れる方法があるなら教えて欲しい。

ksnctf #3 Crawling Chaos

Aug 21, 2017
POSTS

前回に引き続きCTFの問題を解いていきます。問題 100pt 適当に入力すると以下のようにでます。解き方ソースコードを見てみる。 Chromeのデベロッパーモードでソースコードを見てみると、headのscript内に謎のコードを発見。 console.logを見てもエラーが発生していないので、正しく認識されている。これを解析する必要がある。 node.jsで開いてみる。デベロッパーツールのままでは調査しづらいので、「(ᒧᆞωᆞ).ᒧうーー=(〳ᆞωᆞ).〳にゃーｰ」のスクリプトを別ファイルに切り出してnode unya.jsとして実行してみた。すると undefined:2 $(function(){$("form").submit(function(){var t=$('input[type="text"]').val();var p=Array(70,152,195,284,475,612,791,896,810,850,737,1332,1469,1120,1470,832,1785,2196,1520,1480,1449);var f=false;if(p.length==t.length){f=true;for(var i=0;i<p.length;i++)if(t.charCodeAt(i)*(i+1)!=p[i])f=false;if(f)alert("(」・ω・)」うー!(/・ω・)/にゃー!");}if(!f)alert("No");return false;});}); ^ ReferenceError: $ is not defined at eval (eval at <anonymous> (/Users/takanori/Desktop/jquerry/u.js:1:17299), <anonymous>:2:1) at Object.<anonymous> (/Users/takanori/Desktop/jquerry/u.js:1:17333) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Function.Module.runMain (module.js:605:10) at startup (bootstrap_node.js:158:16) at bootstrap_node.js:575:3 と表示された。 $ is not definedについてはJQueryを読み込んでいないのでエラーが出たが、それ以外の部分はソースがデコードされた内容で表示された。ソースを解析する上記でデコードされた内容を見やすく改行すると以下のようになった。 $(function () { $("form").

ksnctf #2 Easy Cipher

Aug 4, 2017
POSTS

スキルアップのためにCTF（キャッチ・ザ・フラグ）にチャレンジしてみました。問題 50pt EBG K VVV vf n fvzcyr yrggre fhofgvghgvba pvcure gung ercynprf n yrggre jvgu gur yrggre KVVV yrggref nsgre vg va gur nycunorg. EBG KVVV vf na rknzcyr bs gur Pnrfne pvcure, qrirybcrq va napvrag Ebzr. Synt vf SYNTFjmtkOWFNZdjkkNH. Vafreg na haqrefpber vzzrqvngryl nsgre SYNT. ただ意味のわからないアルファベットが並んでいますが、これを各々推測して中に含まれているフラグ（FLAG_******）をゲットするのが問題の意図です。 CTFの問題はバイナリ解析やプログラムの脆弱性を突くものなどもあり、様々なスキルが求められます。解き方仮説を立てる Easy Cipher = 「簡単な暗号」問題文を見ると文字の区切り方が英文に似ています。アルファベットを別文字に入れ替えたような暗号と仮定して一旦解いてみます。 vf → is ? n → a ?

【Node.js】ベイジアンフィルタを使って「おすぎ」と「ピーコ」を判定させる【機械学習】

Jul 30, 2017
POSTS

ベイジアンフィルタとは単純ベイズ分類器を応用し、対象となるデータを解析・学習し分類する為のフィルタ。学習量が増えるとフィルタの分類精度が上昇するという特徴をもつ。個々の判定を間違えた場合には、ユーザが正しい内容に判定し直すことで再学習を行う。現状ではスパムメール（いわゆる迷惑メール）を振り分ける機能を持つソフトウェア（フィルタリングソフト）で、スパムフィルターでのスパム判定に利用されることが多い。最近ではWeblogのトラックバック用フィルタ（トラックバックスパム対策）にも利用されるようになるなど、その利用範囲は徐々に広がりつつある。とwikiに書いてありました。ベイジアンフィルタで「おすぎ」と「ピーコ」を判定環境 node.jsで実行します。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.12.5 BuildVersion: 16F73 $ node -v v8.1.2 コード ## モジュールのインストール mkdir testbayes cd testbayes npm install bayes mecab-lite 実行ファイル：./testbayes/osugi_to_peeko.js //ベイジアンフィルタ for Node.js // モジュール var bayes = require('bayes'); var Mecab = require('mecab-lite'), mecab = new Mecab(); //学習情報　wikiから取得した内容 var text1 = 'おすぎおすぎ本名杉浦孝昭生年月日1945年1月18日（72歳）出生地日本の旗日本・横浜市保土ケ谷区血液型A職業タレント、映画評論家活動期間1975年 -著名な家族ピーコ（兄）表示おすぎ（本名：杉浦孝昭、すぎうらたかあき、1945年1月18日 - ）は、日本のタレント、映画評論家である。プラムクリークス所属。ファッション評論家のピーコは一卵性双生児の兄。目次 [非表示]1来歴・概要2批評・映画評論2.1映画評論文3レギュラー番組3.1現在3.1.1テレビ3.1.2ラジオ3.2過去3.2.1テレビ3.2.2ラジオ4著書5音楽6脚注7関連項目・人物8外部リンク来歴・概要[編集]横浜市立桜丘高等学校、阿佐ヶ谷美術専門学校卒業。「おすぎ」の芸名は本名の杉浦から。あまり裕福な家庭ではなく、自ら貧乏だったと話しており、小さい頃は家が狭かったため、ピーコと「ネズミみたいにくっついて」寝ていたという。オネエキャラを全面に出して1975年のテレビ・ラジオデビュー以来、芸能界で活動している（実際の芸能界入りはデビュー前の銀座の歌舞伎座系列のテレビ番組制作プロダクション『歌舞伎座テレビ室』の制作進行補が最初）。本業の映画評論では本名の杉浦孝昭の名義で活動し、映画専門誌の「キネマ旬報」などに寄稿していた。美術専門学校卒の技能を生かし映画雑誌のレイアウトなどの仕事に編集者として携わる一方で、テレビでのタレント活動が、「おすぎとピーコ」として話題を呼んだ。1978年、大島渚監督作品『愛の亡霊』には俳優として出演している。人の好き嫌いがはっきりしている為、嫌いな芸能人が多数存在しており、普段からラジオ番組等で多数の実名を上げてきた。また石原慎太郎とも、彼が「君らは歌手か？」と聞いてきて、「私はオカマです。」と答えた所、「俺はナマコとオカマは大嫌いだ」と暴言を吐かれたことにおすぎが激怒し[1]、猛烈な口論を繰り広げる遺恨があった（この件は佐高信が当時連載を持っていた「噂の眞相」で石原批判のエピソードとして掲載している）。ただおすぎが口にする「どうせ私たちはオカマだから」という物言いに対し美輪明宏は、「自分は同性愛に対する偏見に対して闘ってきたのに、あの二人（おすぎとピーコの事）はテレビで、偏見に満ちた蔑称である“オカマ”という言葉を自分たちから連呼して、あえて笑われ者になる事で、同性愛者への偏見を助長している。せっかく同性愛が市民権を得てきたのに、歴史が逆戻りすることになる。その根性が実に卑しい。消えてしまえばいい。この、馬鹿者どもが！」と厳しく批判、「昔はコンサートや舞台公演などに招待していたが、今は絶縁している。」と語り、ある時期から会っていない事を公表している。[2]　36歳の時、両親を亡くし、1989年のピーコの眼球摘出手術により、ピーコが仕事が出来ない分自分が穴を埋めてやらねばと全国を飛び回っていたが、当時「おすぎとピーコ」の旬は過ぎていた為、病を機にピーコのレギュラー出演も打ち切られる番組が増え、中々仕事は無かった。その時、福岡のローカル局であるKBCテレビから「月に一回でもいいから『天神マンボウ（後のうるとらマンボウ）』に出演して頂けませんか?」と打診を受ける。その後『うるとらマンボウ』『おすぎとコージのあぶない関係』にレギュラー出演するようになり、それ以来KBCには恩義があるのか、再び売れっ子になった今でも毎週日〜月曜日（スケジュールや気象状況を考慮して土曜から入る場合も有り）は福岡に通っている。その他、福岡に通う以前から25年以上つながりのある札幌のSTVにも、現在は隔週ながら木〜金曜日に通っている。一時期は映画評論家としての仕事をメインとし（切っ掛けは淡谷のり子の激怒[3][4]）、相変わらず全国を飛び回る日々を送っていた。だが、福岡関連で福岡放送制作の全国ネット番組『所的蛇足講座』に出演したことで全国ネットに久々に出演。同時期をピーコはファッション評論家の仕事メインで活動していたが、『SMAP×SMAP』での中居正広の物真似であるヒーコ（関根勤がおすき）の影響から再ブレイクし、『おすぎとピーコ』のパッケージとして再びお茶の間にお馴染みとなった。双方単独の仕事も多くなっている。前述の通り福岡での仕事がある為、福岡ソフトバンクホークスとアビスパ福岡のファンであり、特に川崎宗則を「ソウくん」、新垣渚を「なぎさ」と呼んで可愛がっている。その熱意は、新垣が勝利を挙げた日や川崎が活躍した日には誰よりも早く一番に祝福の電話を入れるほどで、2005年、ホークスがプレーオフで敗れ日本シリーズ出場を逃した際には、『アサデス。』の放送中に号泣したほどである。また、ピーコも近年全国ネットの番組で「おすぎはホークス大好き人間なのよ」と言う事が多い（ピーコも何度か『アサデス。』にゲスト出演している）。' var text2 = 'ピーコ（本名：杉浦克昭、すぎうらかつあき、1945年〈昭和20年〉1月18日 - ）は、日本のタレント、ファッション評論家・ジャーナリスト、シャンソン歌手である。映画評論家の「おすぎ」は一卵性双生児の弟で、ともにデビュー時から同性愛者であることを公表し、そのキャラクターを活かしてタレント、コメンテーターとして活躍している。横浜市立桜丘高等学校を経て、文化服装学院研究専門部卒業。主にタレント及びファッション評論家として活動するが、シャンソン歌手としても活動。活動は多くはないがCDを出したり、コンサートも行っている。高校卒業後には横浜トヨペットに入社したが、電飾工場への転職を経て、1964年（昭和39年）にサンヨーレインコートに入社した[1]。24歳の時、「今後ファッションの仕事をしていくには基本から勉強しなくてはいけない。素材やデザインなどにも精通していなければプロとは言えない」「（シャンソン歌手の）イブニングドレスが作りたい」との気持ちから、弟・おすぎが阿佐ヶ谷美術学校を卒業・広告代理店に就職したのを機に、サンヨーレインコートを退職して、文化服装学院のデザイン科に入学した。芸能界との関係は26歳の時、弟・おすぎ経由で裏方としてドラマ衣装の製作を頼まれたのが最初である。1975年（昭和50年）、おすぎと共に、双子のオカマコンビ、「おすぎとピーコ」としてテレビ・ラジオデビューした。これまで出演した番組の中でも長いのは「辛口ピーコのファッションチェック」で、TBSの『3時にあいましょう』に始まり『スーパーワイド』、フジテレビの『ビッグトゥデイ』や、後に司会を務めた同局の『2時のホント』、その番組終了後は再びTBSに戻り『ジャスト』、そしてフジテレビの『F2スマイル』へと、局をまたいでコーナーが引き継がれている。2008年（平成20年）現在は、月曜日にとくダネ!

【Node.js】マルコフ連鎖で「人生」を要約する

Jul 23, 2017
POSTS

マルコフ連鎖(Markov Chain)とは私が説明するよりも以下のページを見た方が早いです。 http://www.housecat442.com/?p=83この性質を利用して文章生成を行います。要約方法 wikiの「人生」の説明内容をもとに、マルコフ連鎖で要約します。 https://ja.wikipedia.org/wiki/人生技術的方法 wikiの内容を形態素解析して分解分解した言葉をマルコフ連鎖でランダムに繋いで作文コードは以下の本に載っています。 [asin:4883379930:detail] 結果１回目東洋では仏典の中に同様の役割を果たすものがあることに意味がある、と考えるのでは聖書が人々に人生を日々大切にし精一杯生きるべし、といった内容の戒めの言葉は、人間がこの世で生きることや、生きている」という人生観という。また、飯田は別の著書で「自分たちは、次の人生を一種の学校だととらえることが言われているだけでもすでに意味がある、と考えることで、人生の意味の理解のしかたを人生観を採用すると、「今の人生に反映されるのだ」とも理解されている表現に"Arslongavitabrevisである。古代ギリシャから古代ローマへ、そして現代にまで伝わっている」という人生観を提示しているだけでもすでに意味がある。長い。２回目古代ギリシャから古代ローマへ、そして現代にまで伝わっている。壁を乗り越えることに意味があり、壁に挑戦してきた。数字の上では日本人の平均寿命はいくらか伸び、80年を超えはしたが、それでもやはりArslongavitabrevisである。 Arslongavitabrevisってなんだ３回目人生は長い、と述べているだけでもすでに意味があり、壁に挑戦していた時代もある。かつては「人生、山あり谷あり」ともしばしば言われる。たとえば法華経は多くの賢人たちが述べているだけでもすでに意味がある。それっぽいようで読めない感想マルコフ連鎖を使った要約は昔からある技術らしく、今更感があったが実際に使ってみると面白い。 TwitterやYahooニュースなどからスクレイピングして要約なども多く行われているらしいが、文章の組み合わせはランダムでおこなっているので、ちゃんとした文章を出力させるには別の仕組みと組み合わせる必要がある。マルコフ連鎖を理解できれば要約だけではなく、人口推移やページ遷移率なども計算できそう。