2017年06月21日

2進数や10進数や16進数を変換! 〜基数変換てご存知?〜

応援クリックを1日1回宜しくお願いいたします。




2進数や10進数などの基数変換を行うアプリケーションを作成しました。
↓↓↓
基数変換


とくに、2進数と10進数の変換はこちらです。
↓↓↓
2進数$\leftrightarrow$10進数変換

こっちには0〜1024までの変換表も載せています。

変換表の使い方としては、「Ctrl + F」や「F3」キーでページ内を検索できます。




本当は3進数や4進数と10進数の変換のページも作成しようかと思ったのですが、さすがにしつこいと思ったのでヤメときました。

誰損と思ったらアップします。




基数変換のページでは、2進数〜36進数までが変換対象となっています。

これは、JavaScriptで10進数から変換するメソッドで36進数まで対応しているためです。

そのメソッドとは.toString(36)です。

36進数までである根拠は、使える文字が0〜9までの10文字が10進数であり、アルファベットA〜Zの26文字を追加して10+26=36進数までが容易に考えられるためです。

16進数は0〜Eの16種類の文字を使っていて見覚えはあると思いますが、さすがに36進数は(笑)。

アルファベットの大文字・小文字やギリシャ文字も加えたり、数字の添字を使うとさらに表現できると思います。





ソースコード自体は意外なほど簡単になりました。

正整数のみ受け付けている状態ですが、小数を変換するようになると少々複雑化するようになるでしょう。

後々作ると思います(・ー・)。




タグ:IT 数学 技術

posted by Line Segment at 18:00 | Comment(0) | TrackBack(0) | ホームページ | このブログの読者になる | 更新情報をチェックする

2017年06月19日

百人一首の選択式クイズ 〜激ムズでなくなりました〜

応援クリックを1日1回宜しくお願いいたします。




以前作成した小倉百人一首の練習(記述式)に引き続き、選択式クイズの百人一首の練習アプリケーションを作成しました。
↓↓↓
小倉百人一首の練習(選択式)


以前のバージョンは記述式で、上の句や下の句を一字一句違わず完全一致すると正解という中々の難題でした。

しかも「い」を「ゐ」と書いたり昔の日本語である必要性がありました。

入力も正答も難しすぎることから今回、四択問題にすることにしました。


また、鑑賞の雰囲気も味わえるように、フォントを設定できるようにしました。

筆で書かれた感があると、文学に触れている感じがあるのではないでしょうか。







百人一首のデータは前回作成時のものがあるので、各首の上の句・下の句・作者を元に回答の選択肢を生成すればOKでした。
    • 上の句:下の句を見て、上の句を選択する
    • 下の句:上の句を見て、下の句を選択する
    • 作 者:上の句と下の句を見て、作者を選択する


全首表示できるので、勉強・確認・カンニングができます。



アプリケーションの工夫

選択肢を4つ生成することに少し考えたので、記してみます。

問題の首は前回同様Math.random()で得ます。
これだけが要素となっている配列を生成します。

誤答となる他の選択肢も3つMath.random()で得ます。
それらを配列のMath.random()*(配列の長さ+1)番目に追加します(.sliceメソッド)。

で、順に表示します。




開発談

人に役立つアプリケーションを考え始めた最初の方に思いついたことで、前回の記述式は気軽に続けにくいことが難が大き過ぎると思い、"人"に寄せてみることにしました。

よりバリエーションがあれば、やっていけたらと思います。



タグ:文学 IT 生活

posted by Line Segment at 18:00 | Comment(0) | TrackBack(0) | ホームページ | このブログの読者になる | 更新情報をチェックする

2017年06月18日

数式の画像生成 〜流行に乗ってみる〜

応援クリックを1日1回宜しくお願いいたします。



[2017年6月28日更新]
数式を画像化するアプリケーションを作成しました。
↓↓↓
数式の画像生成

数式の表示方法としてMathJaxを利用しています。

そのため$\mathrm{\TeX}$、MathML、Asciimathが利用可能です。




手順としては、数式(表示のためのプログラミング言語のソースコード)を入力した後で、「画像生成」ボタンをクリックします。

すると、数式が表示され「画像ダウンロード」のリンクが有効化しますので、それをクリックするとダウンロードします。



アプリケーションの事情的に、画像の横幅はMathJaxで表示された数式の横幅となります。

すなわち、数式の前後に普通の文章を書くと、一番横幅の長い数式の長さで改行されます。

このように設定した理由は、数式だけを記述した場合の横幅は数式の横幅としたかったためです。

ブラウザの横幅の分の白い領域が広がっていると数式の画像として使いにくそうと思います。







ソースコードの説明

当ブログではドルマーク($)は文章中の数式としてレンダリングの対象となるため、下記のソースコードではjQueryと表記しています。

// メイン
// 数式の表示領域(idはMathPreview)にtextareaの文字列を表示する
jQuery("#MathPreview").html(jQuery("#MathInput").val());
// 数式を通常の3倍に拡大する
MathJax.Hub.Config({"HTML-CSS":{scale:300}});
// 数式の表示領域を数式レンダリングする
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "MathPreview"]);
// 数式レンダリングが完了したら、キャプチャにうつる(0.5秒待ったあとで)
MathJax.Callback.Queue([setTimeout(saveImage, 500), ]);
}

function saveImage() {
// 「少々お待ちください。」と表示する
jQuery("").attr("id", "imageMessage").css("font-size", "30px").html("

 少々お待ちください。")
.insertBefore("#MathPreview");

jQuery("#MathPreview").css({
// MathJaxによって数式表示された領域の横幅を取得して横幅とする
"width" : jQuery("span.MathJax").width() + 3,
// 高さは少し増やす
"height" : jQuery("#MathPreview").height() + 2,
// 背景は白にする。拡張子が.pngになったときに、画像全体が真っ黒になるため
"background-color": "white"
});

// キャプチャ開始。html2canvasというライブラリを使う
html2canvas(jQuery("#MathPreview")[0], {
// キャプチャ領域がCanvasとなっていて、それを受け取る
onrendered: function(canvas) {
// aタグを有効化する
jQuery("#download").attr({
"href" : canvas.toDataURL().replace("image/png", "application/octet-stream"),
"download": "数式.jpg"
});

// 数式の表示領域を元に戻す
jQuery("#MathPreview").css({
"width" : "100%",
"height" : "" ,
"background-color": ""
});
// 「少々お待ちください。」を消しておく
jQuery("#imageMessage").remove();
}
});
}




※)数式領域の横幅を「jQuery("span.MathJax").width()」で取得していますが、MathJaxで数式レンダリングするごとに数式領域のidが変わっていくので、ページ内の最初のclass="MathJax"、すなわち数式領域の横幅を取得しています。
そのため、ページ内にはこの数式領域より先に数式を表示しないようにしています。
使い方の文章の中に$\mathrm{\TeX}$というMathJaxによる数式レンダリングの領域がありますが、これは数式表示の後に書いています。




このアプリケーションについて

数式表示のプログラミングした後で、それを画像化するツクリですが、

数式UI(エディタ)を設置して、そこに画像化ボタンを設置するのもアリだと思います。

実際、ホームページではそのような数式UIがあります。
UIの機能の中に画像化がある感じです。

ですが、数式から画像を生成するところだけを取り沙汰して単体のページとするのもアリだと思います。




所感

今回は、既存の数式UIの画像化を向上させるきっかけとなりました。

(以前は、300×300で、しかも数式レンダリングの途中の状態でした)



他の数式画像生成について

ちなみに、Google Chart APIでも$\mathrm{\TeX}$の数式コマンドから画像生成ができるそうなのですが、複数行の数式を表示する方法が見つからないため、MathJaxの優位性により、こちらのアプリケーションの方がオススメです。
Google Chart APIによる画像生成
↓↓↓





posted by Line Segment at 18:00 | Comment(0) | TrackBack(0) | ホームページ | このブログの読者になる | 更新情報をチェックする