Yabu.log

ITなどの雑記

chrome extensionのsampleを触ってみる

Chrome Extension

https://developer.chrome.com/extensions/samples

さて、睡眠不足でプログラミングができないので、別のことをやろうと思う。 Googleが公式でextensionのsampleを公開しているのでダウンロードして試してみる

My Bookmarks

ブックマークを表示・編集などできるサンプルです。拡張機能はブラウザのブックマークにアクセスできるようだ。 ユーザーのブックマークを吸い上げて好きそうなサイトのレコメンドを提供する、とかできると面白そう。大掛かりになりそうだからやらないけど。

Page Redder

拡張機能のアイコンボタン押下でページの背景が真っ赤になる一発ネタextentionです(笑) f:id:yuyubu:20171004230613p:plain

  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });

昔からadblockを使っていたのでサイトの要素の情報を書き換えられるのは知っていたけど、アイコンボタンがトリガーとなると、「ボスが来たボタン」的なものが思い浮かんでしまう。真面目なページってなんだろう・・・と思ったが、それはユーザーが設定すればいい話だ。

  • ボタンを押すと、ユーザーが設定したurlに飛ぶ
  • そのurlを設定する画面がある

この２点でボスが来た画面は作れるのでは無いだろうか。

追記：ググってみたがボスが来た系のツールは結構あるようだ。後発として開発するなら以下の機能を付け足して差別化しようと思う。

  • 開いているタブを全て設定したurlのページに遷移させる
  • 履歴や特定サイト以外のクッキーを全て削除する

Print this page

アイコンボタンで印刷画面が出て来た。特に権限とか与えてなさそうだけどどういう仕組みだろう？とコードを見てみたが、 そもそもJavascriptのみで印刷画面を起動できるようだ。（拡張機能内でそれを呼び出しているだけ）

window.print();

A browser action which changes its icon when clicked

アイコンボタン押下でアイコン画像が変わる。それだけ。 extensionのscriptでアイコン画像を入れ替えることができるようだ。

アイコンを切り替える方法は、天気予報のアイコンとかをリアルタイムで表示するとかに使えそう？

  • 位置情報を取得
  • なんかの天気取得APIでその場所の天気を取得しアイコンに表示（晴れ|雨|曇り|雪）
  • アイコンクリックで詳細な天気を表示（１時間ごととか週間予報とか）

追記： 調べたら私が思いついたものと完全に同じものがすでにありました。本当にありがとうございました。

chrome.google.com

BrowsingData API: Basics

どうやら extensionから履歴が消せるようだ

少し上で考えたボスが来たボタンは作れそう

今日はここまで！

全部動かそうと思ったけどスクロールバーが長すぎたので諦めた。 後日面白そうなsampleをまとめて記事にする予定。

サンプルを動かしつつ思ったこと。

インスピレーションってほど大層なものでも無いけど。

  • RSSに対する操作ができれば面白そう
  • youtubeなど動画サイトで使えると面白そう

お気に入りのGoogle Extensionまとめ

Chrome Extension まとめ

随時更新予定

ScrollMaps

chrome.google.com

Macのトラックパッドはあらゆるポインティングディバイスの中で最強と信じて疑わないが、オンラインでGoogle Mapを参照した時に、ネイティブのマップアプリのように操作できないのが唯一の不満だった。下の表のような違いがある。

拡大 移動
Map App ２本指でピンチ ２本指でスクロール
Google Map(Browser) ２本指でスクロール ドラッグ

ScrollMapsはこの操作の差分を吸収し、ブラウザ上でもネイティブとほぼ同等のジェスチャでマップが操作できる。

ただし、２本指でネジってマップを回転されることはできない。

ソースが公開されている。

GitHub - mauricelam/ScrollMaps: Lets you scroll with two fingers on your trackpad within Google Maps

履歴書みたいなのを公開されているが、すごい開発者だと思う。

Full Page Screen Capture

chrome.google.com

こんな感じでページの全体のスクリーショットを撮ってくれるすごいやつ。

f:id:yuyubu:20171006232800p:plain

仕事で、縦になが〜〜〜〜〜〜いサイトのエビデンスをとるのに役立った。感謝*1

こちらもソースを公開されている。

github.com

ウェアラブルディバイス(スマートリング)のベンチャーのエンジニアらしい。。。ベンチャー企業おそるべし。

*1:こういうシュツエーションの時、黙ってなんどもキャプチャーするのが社会人としてあるべき姿なのだと思うが、そういう作業に耐えられない

MacBook AirからMacBook Proに買い換えた

Mac

長いこと2012年のMacBook Airを我慢して使っていたが、そろそろ限界を感じるようになったので普段使いのPCをMacBook Proに買い換えた

スペック等の変化

ディスプレイがめちゃくちゃ綺麗。AirのTNTディスプレイの品質のが低すぎることもあってかギャップがやばい。

無印ではなくproを選んだ理由は４Kモニタに60fps出力をさせたいため。 だが、普通に使っているだけで結構熱を持つので4Kモニタに接続して利用とかスペック的に現実的じゃない気がする。

touchbarモデルだと指紋認証が入るのとusb type cのポートが２つ多い 特に後者の恩恵は大きく、usb type cで充電するため左右にポートがあると電源が近い方に受電ケーブルがさせるので絶対便利だと思う。

touch barモデルにしておけばよかったと後悔。

初期設定とか

ダウンロードしたもの

ダメなところ

ハードウェアには特に文句はないが、OSの初期設定でデフォルトで

  • ユーザー名が本名ローマ字
  • PC名が<ローマ字本名> no-mac-book-pro*3

になってしまう。

ターミナルを使うことがよくあるが、そこに長ったらしい俺の本名が入る。

パソコン名は速攻変更したが、ユーザー名を変更しようとすると

警告:これらの設定を変更すると、このアカウントが壊れて、ユーザーがログインできなくなることがあります。

なんて物騒な表示が出てきたのでユーザー名の変更は諦めた。

なんとなく新しいものを買ったのでバックアップから復元せずに新しい環境でスタートしようと思ったのだが。 素直にバックアップから復元した方が良いみたいだ。

*1:Macに限らず世間一般のマウスのデフォルト感度低すぎない？

*2:バージョンアップデートでこういう変更入れるのやめませんか

*3:うろ覚え

Chrome Extension作りを始めた

プログラミング Chrome Extension

先日のエントリーに拡張機能を作ろうかなとかいたので、色々調べて見た。 本当は普段使っているsafariの拡張を作ろうと思ったが、色々敷板が高かったので、まずはchromeで作ってみる。

とりあえず昨日の夜と今日の夜でここまでできた。

f:id:yuyubu:20170920203746p:plain

chrome.tabsクラスのプロパティを吐き出してるだけ。。。

https://developer.chrome.com/extensions/tabs

iconはイラストやのものを使用した。 hello worldっぽく地球儀の絵を選んだ。

現在アクセスしているサイトのurlは取れることがわかったので、 あとは

  • 禁止サイトへのアクセスを感知し、代理サイトに飛ばす処理
  • アクセスを禁止したいサイト、飛ばし先のサイトのURLを設定する画面
  • 各種設定したurlをブラウザに保存する方法

ができれば目的のものは作れると思う。

ソースは

https://github.com/yuyabu/websiteInfomation

に置いた

Javascript難しい。

PS.ネスぺの勉強？知らんな

エクセルやテキストファイルからコピペでSQLのIN句が作れるツール

プログラミング SQL

を作った

https://yuyabu.github.io/InClauseGenerator/index.html

github.com

この投稿を見てふと思いついた。

qiita.com

SIやってるとこのシチュエーションはよく発生すると思う。

excelとか使って無理やりin句組み立ててるような人なら、こっちの方が労力小さくて済むかと思う。

普通は皆様どうやってるんでしょうか？私はsakura editorで置換の履歴から'$1',的なのを探して使いまわしてるけど もっと効率的なやり方があれば教えてください

ちなみに今回からdocument,commitメッセージを全て英語にした 次からはテストコードも入れなきゃな・・・

常に英語を使う。
 これが絶対的に大事。 • ロシア語わからん問題 • 英語を使うことは、広くコントリビュー ションを受け入れますという意思表示 • 日本語で来た issue は即閉じるくら いの勢いで良い English! English! @tagomoris

あとPGの出来が悪いので後日リファクタリングする予定。 Indexの使い方とかひどいし可読性のかけらもない。

前のやつは今の俺のjavascriptスキルだとあれ以上リファクタリングのしようがない。*1基本pull requestは受け入れますので、PG/英語共に気に入らないところがあればガンガン送ってください。

あとマンツーマンで英会話教師もやってください

*1:基本Javaのつもりで書いてる。動かんところは適当にググってコピペで対応。本職の人から見ればひどいコードだろうけど、コードのできを気にして表に出さないというのはいつまでたってもできるようにならないと思うし、よくないと思う。

Kali Linuxを導入する

Linux Kali Linux セキュリティ

某セキュリティ勉強会に参加するためにKali Linuxを入手したいのだが・・・・

www.kali.org

こちらのリンクからisoをダウンロードしようと思うのだが、何度やっても途中で接続が切れる。

wiresharkで確認したところ

  • TCP out-of-order
  • dup ack
  • previous segment not captured

などの異常系パケットを受信した後向こうのサーバーからrstが送られてくる。

f:id:yuyubu:20170914214908p:plain

サーバーのIPアドレスを調べたところ、イタリアのサーバーらしい。

接続状態が悪いのかな？

日本にミラーってないのかな。

ダウンロードできるリンクを探る

普通のISOは何度やってもダウンロードできなかったので、手当たり次第にvm版などダウンロードしたところ

Kali Linux 64 bit VBox

がダウンロードできた。 これはvirtualbox用なのかな？

www.offensive-security.com

チェックサムの計算

MacOsでは公式記載の sha256sumがデフォルトで使えないので 以下のコマンドでチェックサムを計算する

$ shasum -a 256 Kali-Linux-2017.1-vbox-amd64.ova
9c1144090971ede73937ee6266013054252bff19b306ae8ec8b55f08249c1fcc  Kali-Linux-2017.1-vbox-amd64.ova

よし。サイト掲載のものと一致。 改ざんされてないことを確認

Virtual Box Extension Packなるツールが必要になったので入れた。

Downloads – Oracle VM VirtualBox

いざ起動。ディスプレイが表示できました。

f:id:yuyubu:20170916161936p:plain

定期的にアップデート確認しましょう

apt update
apt dist-upgrade
reboot

他設定

  • デフォルトのrootのパスワードがtoorになっているので変えた。
  • retina displayを使っている限り、1280x800の解像度でボケずに表示することができないらしいので諦めた。

整数倍の解像度を表示するくらい簡単にできそうなもんだが。。。。 ドライバ周りとか色々と大変なのかな。

Jesse Donat氏のCsvToMarkdownTableを日本語(全角文字)対応させたい

プログラミング 雑記

以前も紹介しましたが、csvからmarkdownの表を作るツールがあります

https://donatstudios.com/CsvToMarkdownTable

ただしこのツールは文字数をjavascriptのlengthで数えているため 全角・半角関係なく1文字で数えてしまうため、作成した表のplane textがずれてしまいます。

| 番号 | 
|----| 
| 1  | 
| 2  | 
| 3  |

本当はこうなるべき*1

| 番号 | 
|----  | 
| 1    | 
| 2    | 
| 3    |

一行目□■■■■□　←二文字だが全角文字なので表示は4文字分の扱い
二行目□■□□□□　←半角文字一字分のあとは三文字埋めのスペースが入るべき

markdownのコンセプト、plane text状態でも読みやすい、に反してしまうので、 なんとか日本語でもplane textの状態で表の形を保たせたいのですが。

maxRowLen[ii] = Math.max(maxRowLen[ii], ee.length);

ここのlengthの箇所を半角全角の表示スペースに応じた処理に変えれば動きそう。 だが、少し調べて分かったがjavascriptは半角・全角に応じて文字数を返す処理が標準で存在しないらしいので、半角全角を判定する方法を自分で考えて実装する必要がある。

まぁプロポーショナルフォントを使っている環境ではこんなことやっても意味ないんだけどね。

追記：sublime textの拡張機能でできるらしい。後日検証予定

*1:固定幅フォントじゃないからわかりにくいけど許して。。。