カテゴリー別アーカイブ: JavaScript

ベンチマークの結果をd3.jsで可視化してみた

投稿日: 2016/12/29

もういくつ寝るとお正月。今年もあっという間に年末になりました。
年末になると今年も色々あったなぁなんて思い出にふけるわけですが、色々という言葉にほとんどの出来事は濃縮されてしまって、過ぎたことは本当にどうでもよくなりますね。
こうして人は年をとっていくんだなと思います。

というわけで、以前書いた

を使ってベンチマークの結果をd3.jsで可視化してみました。
サンプルは こちら です。

仕組みとしては、

  • shimabox/SMBBenchmark でベンチマークの結果を配列で出力
  • shimabox/SMBArrayto で受け取った配列を json※ で出力
  • d3.jsで受け取った json※ をつかってグラフを描画

※ csvでもtsvでもよいです

という流れになります。

ソース

続きを読んでみようかな…

(はてブ数表示つき)Markdown用のリンクを生成するブックマークレット書いた

投稿日: 2016/07/15

先日、こんなのを書きました。
Markdown用のリンクを生成するブックマークレット書いた | Shimabox Blog
そしてついでといってはなんですが、上記リンクにはてブ数も表示するタイプも書いてみたのでサラッと残しときます。

はてブ数を表示するには

まず、はてブ数を表示する方法ですが 自分のブログに「○○users」を表示する – はてなブックマークヘルプ にある通り、

<img src="http://b.hatena.ne.jp/entry/image/はてブ数を表示したいサイトのURL">

といった形式でimgタグを書く必要があります。そうすると、はてブ数が表示されます。
今回のタイプは上記のタグを前回生成したリンクの後に付与しただけのものになります。

こんな文字列を生成します。

[自分のブログに「○○users」を表示する - はてなブックマークヘルプ](http://b.hatena.ne.jp/help/entry/count#count "自分のブログに「○○users」を表示する - はてなブックマークヘルプ")<img src="//b.hatena.ne.jp/entry/image/http://b.hatena.ne.jp/help/entry/count#count" style="vertical-align:middle;margin:3px 0 3px 5px;">

  
貼り付けるとこうなります。  
自分のブログに「○○users」を表示する – はてなブックマークヘルプ

ソース

ソースはこんな感じです。

javascript:!function(){var e=document.body,t="___bookmarklet-display-title___",l=document.getElementById(t),i=document.title,n=location.href,o="["+i+"]("+n+' "'+i+'")',a='<img src="//b.hatena.ne.jp/entry/image/'+n+'" style="vertical-align:middle;margin:3px 0 3px 5px;">';null!==l&&e.removeChild(l);var d=document.createElement("textarea");e.insertBefore(d,e.firstChild),d.id=t,d.value=o+a,d.style.width="100vw",d.style.position="fixed",d.style.top=0,d.style.left=0,d.style.zIndex=2147483647,d.focus()}();void(0);

この文字列をコピー後ブックマークに保存して、任意のサイトで実行するとマークダウン用リンク + はてブ数 を表示する文字列が生成されます。

続きを読んでみようかな…

Markdown用のリンクを生成するブックマークレット書いた

投稿日: 2016/07/12

ちらほらと鳴き出すセミが出てきたよ(5•7•5)。そういえばセミが鳴くのはオスの求愛行動って聞きますが、早く地上に這い出てしまったセミは子孫繁栄に失敗しやすいのか、はたまた成功しやすいのか気になる所ですね。

話は変わって、何かマークダウンで書いている時に参考サイトのリンクを書くタイミングで僕はよくこうなります。

  • titleを抜き出すのめんどくさい
    • ソース見たりとか
  • titleコピって、URLコピって、リンクの書式書くのめんどくさい
  • そもそもリンクの書式ってどうだったっけ?

はてなだと、確かURLを貼ったら自動で生成してくれたから楽だったんだけどWordpressだとそこまでやってくれない。だからいつも自作業。
※なんかそういうプラグインあるんだろうか
※ほかのCMSは分かりません

で、 リンク(インライン)の書式 ※1 はこう。

[リンクテキスト](URL "タイトル")

(自分の中では、リンクテキストとタイトルは一緒になる事が多いと思う)

例: こう書くと

[セミはどうして(あんなにうるさく)鳴くの|科学なぜなぜ110番|学研サイエンスキッズ](https://kids.gakken.co.jp/kagaku/110ban/text/1233.html "セミはどうして(あんなにうるさく)鳴くの|科学なぜなぜ110番|学研サイエンスキッズ")

セミはどうして(あんなにうるさく)鳴くの|科学なぜなぜ110番|学研サイエンスキッズ
こうなります。

書式とか覚えればいいんだけど、普段の業務でマークダウンを書く機会がそこまで無いからいつもググっています。

というわけで上記問題を解決する為、リンクの書式を生成するブックマークレットを書きました。
(リンクの書式は色々あるんですが、自分が使うのはほぼ上記の書式※1なので上記書式のみの対応です)

続きを読んでみようかな…

Yosegakkyにジョジョ風味を加えてみる

投稿日: 2016/05/08

メメタァ

というわけで、GWが終わりますね。どう過ごされましたでしょうか。
僕は、おチビさん二人を引きずり回し(回され)ながらGWを過ごしました。

そんなどうでもいい事はさておいて、いきなりメメタァとわけの分からない言葉で始まりましたが、知っている人には当たり前?のフレーズですよね。

そうです、これは「ジョジョの奇妙な冒険」に出てくる有名な擬音語です。
メメタァとは (メメタァとは) [単語記事] – ニコニコ大百科
(僕は、ぶっちゃけ何を意味しているのか全くわかりません)

さて、なぜこんな事を書いたかというと先日書いたYosegakkyで送別した人がジョジョ好きだったんですね。
で、まぁ、普通のやつじゃあつまらないと、なんとかジョジョ風味を出したいと、いきり立ちまして少しジョジョ風味を出して披露してみましたよ。と、そんな事を少し書きます。

とりあえずこんなやつ作った

https://shimabox.net/labs/yosegakky_jojo/

特徴

  • ジョジョフォントをタイトルとローディング部分で使っている
    • それだけ
  • ジョジョフォントは以下2つを使っています
  • これらのフォントを使用する場合、各フォントの使用規約に注意してください

続きを読んでみようかな…

簡易寄せ書きツール(Yosegakky)を作った

投稿日: 2016/04/29

というわけで、簡易寄せ書きツールを作成/公開しました。

shimabox/yosegakky

これは何?

  • 簡易寄せ書き作成ツールです
  • download したら簡単に寄せ書きっぽいものを作れる様にしたつもりです
  • そのため昨今のビルドツールは使っていません 僕が使えません
  • ローカルで動くので寄せ書きのメッセージなどを設定したら、みんなで見たりとか、zipなんかにしてプレゼントしたりとかそんな感じです

デモ

demo1 こんな感じです。

どうやって使うの?

Yosegakky – 簡易寄せ書き作成ツール に色々書いています。

続きを読んでみようかな…