忍者ブログ
日々の研究生活のメモ書きなど
webブラウザのブックマークバーにブックマークを置く代わりに、URLの部分にJavascriptを書くことをブックマークレットというらしい
むかし、同期が活用しているのを傍目に見ていたが、そのときの自分にはブックマークレットを便利に活用するポイントが思いつかなかった・・・

確か、同期はニコニコで動画ページにアクセスしなくてもそれをマイリストに追加するブックマークレットを作っていた気がする・・・






今回、何のブックマークレットを作りたいかというと、
「アルクという辞書のwebページで指定した英単語/単語を検索」するブックマークレットが欲しい
要するに、あるページにアクセスするんだけど、そのついでに指定した英単語/単語で検索して作業時間の短縮を計るってことですな・・・

現在やってる作業で、毎回毎回単語をgoogle検索していたんでは効率が悪いので・・・
というか実際かなりロスしてる・・・

別に英和/和英辞書になるwebページなら基本的にどこでもいいけど、
「xxx(なんか英単語) 英語」
でググって出てくるページだと

weblio -> 重い、広告うざい
goo辞書 -> 広告うざい
英辞郎 on the WEB:アルク -> 現状不満はない

ということになる・・・
google翻訳で単語を変換する作業をしても、入力に対して出力が毎回1つなので発展性がない・・・(線形性がうれしくないときが来るとは・・・・)





で、戻ってブックマークレットについて

今回の使用ブラウザはchrome

まずはhello worldのブックマークレット
javascript:(function(){window.alert('Hello!');})();


blog


そのページのスタイルをすべて削除して、すっきりさせる
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");})())

blog1
 ↓


blog2
 ↓


jojo






(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);
}

重要なのは赤色の部分

わかってみれば特に難しくなくて、C言語と同じように配列を2重に宣言すれば良いだけ











easeというメソッドは、transitionなどを使って動くアニメーションを使ったときの動き方を指定することができる

どのような動き方があるかは、次のページを見て実際に触ってもらうのが理解が早いだろう


■ 参考
D3.js Easing Checker

(ちなみに作者の方のページ)











かなり簡単に追加できる。
これのある、なしでグラフの見栄えがけっこう変わると思うので重要

私は、gnuplotでもいつもset gridの設定をいれてました .gnuplotに

■ 参考
D3.jsの折れ線グラフにグリッド線を追加する

Line Chart with Grid [D3]



.tick line{
opacity: 0.2;
}
opacityは透明度の設定
これをCSSに書いておく

var xAxis = d3.svg.axis()
.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);

色の付いてる部分が重要。

tickPaddingの引数は、軸と値表記の間の広さ
grid線の数をどうやって調整するのかわからない・・・・









最近、d3.jsというplotツールを使った開発を行っている
d3.jsは拡張子を見てわかるとおり、javascriptで書かれている・・・

■ 参考
D3.js - 日本語ドキュメント


今までjavascriptなんて触ったことはないが、頑張る・・・
ブログのカテゴリーにもないが、とりあえずHTMLにぶち込んでおく。
記事がいっぱい出来てきたら独立させるかも




タイトルの指定の桁数以上を表示したくないときは、toFixedを使うとよさげ
d.toFixed(2)
これでdという数字を小数点以下5桁表示する

四捨五入が問題になるかも、という見出しをどこかで見たが
今回は細かいことを気にしないということで・・・

■ 参考
toFixed メソッド (Number) (JavaScript)




桁数制限なし↓


桁数制限あり↓












HOME |
プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞
自己紹介:
#include <stdio.h>
#include "MyProfile.h"

#define TWITTER coffee_pote

#define WISH_LIST
amazonのほしい物リスト
#ifdef RICH_FLAG
// ↑いつも支援いただきありがとうございます m(_ _)m
#endif


int main(void){

printf("\n");
printf("D論・・・? あぁそんな子もいましたね(執筆中)\n");
printf("\n");
printf("猿でもわかるgnuplot を執筆中(こっちの執筆は半年以上何も進んでいない・・・・)\n");
/* 最終更新 2017/07/19 */
return 0;

}
カウンター
ブログ内検索
ツイートするボタン
Flickr

Template "simple02" by Emile*Emilie
忍者ブログ [PR]