日々の研究生活のメモ書きなど
webブラウザのブックマークバーにブックマークを置く代わりに、URLの部分にJavascriptを書くことをブックマークレットというらしい
むかし、同期が活用しているのを傍目に見ていたが、そのときの自分にはブックマークレットを便利に活用するポイントが思いつかなかった・・・
確か、同期はニコニコで動画ページにアクセスしなくてもそれをマイリストに追加するブックマークレットを作っていた気がする・・・
今回、何のブックマークレットを作りたいかというと、
「アルクという辞書のwebページで指定した英単語/単語を検索」するブックマークレットが欲しい
要するに、あるページにアクセスするんだけど、そのついでに指定した英単語/単語で検索して作業時間の短縮を計るってことですな・・・
現在やってる作業で、毎回毎回単語をgoogle検索していたんでは効率が悪いので・・・
というか実際かなりロスしてる・・・
別に英和/和英辞書になるwebページなら基本的にどこでもいいけど、
「xxx(なんか英単語) 英語」
でググって出てくるページだと
weblio -> 重い、広告うざい
goo辞書 -> 広告うざい
英辞郎 on the WEB：アルク -> 現状不満はない
ということになる・・・
google翻訳で単語を変換する作業をしても、入力に対して出力が毎回1つなので発展性がない・・・(線形性がうれしくないときが来るとは・・・・)
で、戻ってブックマークレットについて
今回の使用ブラウザはchrome
まずはhello worldのブックマークレット
そのページのスタイルをすべて削除して、すっきりさせる
■ 参考 : 右クリックと文字列選択を禁止する方法とそれを無効にするブックマークレット
稀にエロサイトとか、曲の歌詞をまとめたページで
右クリックや範囲指定ができなくなってるときがある
歌詞ページに関しては年に1回くらいしか使うことがないので困ることがなかったけど、主に前者がね・・・・
あと、これも便利そう・・・
■ 参考 : すべてチェックを入れるブックマークレット
アンケートのページとか、なんかの応募のときに色々と捗りそう
■ 参考 : ブックマークレットで目的のウェブサイトを開く方法
同じウィンドウで開く場合
なんやかんや調べてたら範囲指定した文章をアルクで検索するブックマークレットはできた
まぁこれでもいいけど・・・・
これのURLをarXivに置き換えて、範囲指定した文章でarXiv検索するブックマークレットも作った
ただし、"hoge foo"みたいにスペースが入っている場合はダメ・・・(要するにゴミ)
そういうのもきちんと処理するにはスペースで区切って+を入れないといけないっぽい
これがやりたいわけではないので放置
指定した範囲の文字を取得する関数はブラウザによって異なるっぽいので動かない場合は適時置き換えてください・・・
さらに色々と調べてたらできた
↓
↓
(2017/04/26 追記)
上記のやつの改変で、英英辞典も検索できるようにした
台詞は麻雀放浪記の上野の健より借りた
(大好きなんすよ、あの小説も映画も)
ツイート
むかし、同期が活用しているのを傍目に見ていたが、そのときの自分にはブックマークレットを便利に活用するポイントが思いつかなかった・・・
確か、同期はニコニコで動画ページにアクセスしなくてもそれをマイリストに追加するブックマークレットを作っていた気がする・・・
今回、何のブックマークレットを作りたいかというと、
「アルクという辞書のwebページで指定した英単語/単語を検索」するブックマークレットが欲しい
要するに、あるページにアクセスするんだけど、そのついでに指定した英単語/単語で検索して作業時間の短縮を計るってことですな・・・
現在やってる作業で、毎回毎回単語をgoogle検索していたんでは効率が悪いので・・・
というか実際かなりロスしてる・・・
別に英和/和英辞書になるwebページなら基本的にどこでもいいけど、
「xxx(なんか英単語) 英語」
でググって出てくるページだと
weblio -> 重い、広告うざい
goo辞書 -> 広告うざい
英辞郎 on the WEB：アルク -> 現状不満はない
ということになる・・・
google翻訳で単語を変換する作業をしても、入力に対して出力が毎回1つなので発展性がない・・・(線形性がうれしくないときが来るとは・・・・)
で、戻ってブックマークレットについて
今回の使用ブラウザはchrome
まずはhello worldのブックマークレット
javascript:(function(){window.alert('Hello!');})();
そのページのスタイルをすべて削除して、すっきりさせる
javascript:(function(s,i){s=document.querySelectorAll(‘style,link[rel=stylesheet]’);for(i=0;i<s.length;i++){s[i].parentNode.removeChild(s[i])}s=document.querySelectorAll(‘[style]’);for(i=0;i<s.length;i++){s[i].setAttribute(‘style’,”)}})()
次は目的と関係ないけど、ググってたら出てきたのでメモしておく■ 参考 : 右クリックと文字列選択を禁止する方法とそれを無効にするブックマークレット
稀にエロサイトとか、曲の歌詞をまとめたページで
右クリックや範囲指定ができなくなってるときがある
歌詞ページに関しては年に1回くらいしか使うことがないので困ることがなかったけど、主に前者がね・・・・
javascript:(function(){obs=document.all;for(i=0;i<obs.length;i++){obs[i].oncontextmenu='return true;';obs[i].onselectstart='return true;';}})()
あと、これも便利そう・・・
■ 参考 : すべてチェックを入れるブックマークレット
アンケートのページとか、なんかの応募のときに色々と捗りそう
javascript:(function(){a=document.getElementsByTagName('input');for(i=0;i<a.length;i++){if(a[i].type=='checkbox'){a[i].checked='checked'}}})()
■ 参考 : ブックマークレットで目的のウェブサイトを開く方法
同じウィンドウで開く場合
javascript:(function(){document.location.href=なんかURL})()
新しいウィンドウで開く場合javascript:(function(){window.open(なんかURL)})()
なんやかんや調べてたら範囲指定した文章をアルクで検索するブックマークレットはできた
javascript:var%20d=document; var%20word=d.selection?d.selection.createRange().text:d.getSelection(); var%20subw=window.open('http://eow.alc.co.jp/search?q='+word).document;
けど自分がやりたいのはその場で入力する版なんだよなぁ〜・・・まぁこれでもいいけど・・・・
これのURLをarXivに置き換えて、範囲指定した文章でarXiv検索するブックマークレットも作った
ただし、"hoge foo"みたいにスペースが入っている場合はダメ・・・(要するにゴミ)
そういうのもきちんと処理するにはスペースで区切って+を入れないといけないっぽい
これがやりたいわけではないので放置
javascript:var%20d=document; var%20word=d.selection?d.selection.createRange().text:d.getSelection(); var%20subw=window.open('https://arxiv.org/find/all/1/all:'+word).document;
指定した範囲の文字を取得する関数はブラウザによって異なるっぽいので動かない場合は適時置き換えてください・・・
さらに色々と調べてたらできた
javascript:void((function(){var%20w=window.prompt("「この単語はなんだ？」って聞きたそうな表情してんで検索させてもらうがよ おれぁ おせっかい焼きのスピードワゴン！ ロンドンの貧困街からジョースターさんが心配なんでくっついてきたぜ？", "");if(w!=null)window.open("http://eow.alc.co.jp/search?q="+encodeURIComponent(w),"_blank");})())
↓
↓
(2017/04/26 追記)
上記のやつの改変で、英英辞典も検索できるようにした
javascript:void((function(){var w=window.prompt("「死んだお袋とこいつ(英英辞典)だけには迷惑をかけたってかまわねえのさ。」", "");if(w!=null)window.open("http://www.dictionary.com/misspelling?term="+encodeURIComponent(w),"_blank");})())
台詞は麻雀放浪記の上野の健より借りた
(大好きなんすよ、あの小説も映画も)
PR
1次元配列の宣言は
var dataset = [];
としておいて、あとでdataset.push(1);
とかしてデータを追加していくことができる。例えば、配列のサイズを10個固定
後からどんどん値を追加しつつ最古のデータを削除して行きたい場合は・・・
上に書いたdataset.push()とdataset.shift()を活用すれば良いだろう
今回困ったのは2次元配列の場合
javascriptはやったことがないので、場当たり的に解決していく段階・・・
■ 参考
[JavaScript] 配列の宣言と作成
//2次元配列のサイズを初期化
var datasize = 20;
var randmax = svgWidth;
var dataset = new Array(datasize);
for(var i=0; i< datasize; i++){
dataset[i] = new Array(datasize)
var dataset[i][0] = Math.floor(Math.random() * randmax);
var dataset[i][1] = Math.floor(Math.random() * randmax);
}
var datasize = 20;
var randmax = svgWidth;
var dataset = new Array(datasize);
for(var i=0; i< datasize; i++){
dataset[i] = new Array(datasize)
var dataset[i][0] = Math.floor(Math.random() * randmax);
var dataset[i][1] = Math.floor(Math.random() * randmax);
}
重要なのは赤色の部分
わかってみれば特に難しくなくて、C言語と同じように配列を2重に宣言すれば良いだけ
easeというメソッドは、transitionなどを使って動くアニメーションを使ったときの動き方を指定することができる
どのような動き方があるかは、次のページを見て実際に触ってもらうのが理解が早いだろう
■ 参考
D3.js Easing Checker
(ちなみに作者の方のページ)
かなり簡単に追加できる。
これのある、なしでグラフの見栄えがけっこう変わると思うので重要
私は、gnuplotでもいつもset gridの設定をいれてました .gnuplotに
■ 参考
D3.jsの折れ線グラフにグリッド線を追加する
Line Chart with Grid [D3]
これをCSSに書いておく
色の付いてる部分が重要。
tickPaddingの引数は、軸と値表記の間の広さ
grid線の数をどうやって調整するのかわからない・・・・
ツイート
これのある、なしでグラフの見栄えがけっこう変わると思うので重要
私は、gnuplotでもいつもset gridの設定をいれてました .gnuplotに
■ 参考
D3.jsの折れ線グラフにグリッド線を追加する
Line Chart with Grid [D3]
.tick line{
opacity: 0.2;
}
opacityは透明度の設定opacity: 0.2;
}
これをCSSに書いておく
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10);
.scale(xScale)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
.scale(yScale)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
色の付いてる部分が重要。
tickPaddingの引数は、軸と値表記の間の広さ
grid線の数をどうやって調整するのかわからない・・・・
最近、d3.jsというplotツールを使った開発を行っている
d3.jsは拡張子を見てわかるとおり、javascriptで書かれている・・・
■ 参考
D3.js - 日本語ドキュメント
今までjavascriptなんて触ったことはないが、頑張る・・・
ブログのカテゴリーにもないが、とりあえずHTMLにぶち込んでおく。
記事がいっぱい出来てきたら独立させるかも
タイトルの指定の桁数以上を表示したくないときは、toFixedを使うとよさげ
四捨五入が問題になるかも、という見出しをどこかで見たが
今回は細かいことを気にしないということで・・・
■ 参考
toFixed メソッド (Number) (JavaScript)
桁数制限なし↓
桁数制限あり↓
ツイート
d3.jsは拡張子を見てわかるとおり、javascriptで書かれている・・・
■ 参考
D3.js - 日本語ドキュメント
今までjavascriptなんて触ったことはないが、頑張る・・・
ブログのカテゴリーにもないが、とりあえずHTMLにぶち込んでおく。
記事がいっぱい出来てきたら独立させるかも
タイトルの指定の桁数以上を表示したくないときは、toFixedを使うとよさげ
d.toFixed(2)
これでdという数字を小数点以下5桁表示する四捨五入が問題になるかも、という見出しをどこかで見たが
今回は細かいことを気にしないということで・・・
■ 参考
toFixed メソッド (Number) (JavaScript)
桁数制限なし↓
桁数制限あり↓
| HOME |
プロフィール
ＨＮ：coffee
職業：物理屋（自称）
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "python versionにしてみた" print "python 勉強中"
print "猿でもわかるgnuplot を執筆中" print "flickr難民になったため、tumblrへ移住しました〜 使いやすそう？ まだわからん"
# 最終更新 2018/12/20
職業：物理屋
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "python versionにしてみた" print "python 勉強中"
print "猿でもわかるgnuplot を執筆中" print "flickr難民になったため、tumblrへ移住しました〜 使いやすそう？ まだわからん"
# 最終更新 2018/12/20
カウンター
カテゴリー
ブログ内検索
リンク
相互リンク募集中です
(Twitterにてお知らせください)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
とある物理の院生日誌～院生は社会へ旅立った～ (研究室の先輩の個人ブログ)
英語例文を見て自然に英語・英会話を学ぶ (楠本慶ニさんの個人ページ、様々な情報の密度の高さに感動)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
とある物理の院生日誌～院生は社会へ旅立った～ (研究室の先輩の個人ブログ)
英語例文を見て自然に英語・英会話を学ぶ (楠本慶ニさんの個人ページ、様々な情報の密度の高さに感動)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
最新記事
(11/20)
(12/20)
(12/20)
(12/18)
(12/17)
(11/24)
(11/16)
(10/29)
(10/23)
(10/18)
古の画像置き場