jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

JavaScript

Videoタグで埋め込まれた動画の再生スピードを変えたい

今回は、ウエブ上に置かれている動画の操作について、ちょっとしたやり方を書きます。自分自身へのメモ代わりです。 動画の再生 インターネット上の動画コンテンツは以前はFlashというプラグインを利用して閲覧することが多かったのですが、最近はvideoタグ…

Unity C#で時間の取得

突然ですが実験的な研究のフレームワークとしてUnityを使い始めました。Unityはコーディングなしでも手軽にゲームを作成できる強力なツールです。(なんでUnityなのかはまた別の機会に書きます。)今回は、Unity内で時間を取得する方法をまとめておきます。 …

Windows 7 にnode.jsをインストールしようとしてはまったこと

node.js はサーバーサイドのJavaScript環境のためのライブラリです。その使い方は、既に色々なウェブページで紹介されています。 第一回 Node.jsでどんなことができる?|マルチデバイスLab. - Multi Device Lab. いまアツいJavaScript!ゼロから始めるNode.…

JavaScriptを利用してリスト要素の順序をランダム化

前にR言語を利用してリスト要素の順序をランダム化というのをやりました。 R言語を利用してリスト要素の順序をランダム化 - jnobuyukiのブログ今回は同じことをJavaScriptでやってみます。 やり方その1: 任意の二つの要素を並べ替える 配列の中から適当に2…

文字ごとのフォントを変えてみる

特定の要素やある段落のフォントを設定するのはCSSで簡単に設定できます。しかし、今回は一続きの文の各文字のフォントを変えてみます。こういう時はJavaScriptが便利です。 テキストボックスの設定(HTML) 今回は、入力された文を読み取って、各文字のいろい…

アルファベットをキーコードに変換

キーを押して入力されたときに、キーコードを取得することは簡単です。今回は、既にアルファベットとして入力されている文字をキーコードに変換してみます。 キーコード表 キーコード表は、キーボードのキーに対応する数字をまとめた表です。以下の通りです…

SVG上のテキストの反転表示

今回はSVGオブジェクトの上に設定したテキストをいろいろな向きに反転する方法をまとめます。 ポイントは次の2点です。 text要素ではなくその上位のg要素で反転させる 反転に伴ってテキストが移動するので補正する 反転はテキスト要素ではなくg要素 SVGオブ…

ブラウザのHigh DPI対応

最近のラップトップPCは、非常に高い解像度のスクリーンのこともあります。今回は、高解像度のために多少手こずった話をまとめておきます。 指定したサイズにウインドウが生成されない 問題の発端はこれでした。Chrome拡張を利用したアプリを作成する際、man…

レスポンシブに改行タグを無効化 2

前回に引き続き、レスポンシブな環境で、改行タグを効果的に無効化する方法を考えます。前回提案した方法は、大まかに表示幅を設定しました。今回は、表示されているテキストの幅と表示可能領域の幅を厳密に比べます。表示可能領域が、テキスト幅より狭くな…

form内のbuttonとform外のbuttonの違い

入力フォームを記入して、別のプログラムへ送信するときのボタンですが、formの中にあるか外にあるかで動作が異なります。若干はまったので、メモ代わりにまとめておきます*1。 formの中のbutton formの中にbuttonを設定するとクリックしたときに、submitさ…

JavaScriptでクロスブラウザ対応(2)

今回は、JavaScriptでテキストデータをファイルに書き出す方法とその際のクロスブラウザ対応*1を紹介します。 テキストデータをファイルに書き出す JavaScriptではFileAPIを利用してローカルファイルへアクセスできます*2。 今回は、File APIの中のBlobとい…

D3.jsを利用してセレクトボックスで任意の項目を初期値に設定する

HTMLでは、セレクトボックスで、多肢選択の質問ができます。選択肢をセレクトボックスに設定するのは、簡単ですが、任意の項目を初期値にする際に、ちょっとはまったので、メモを残します。 セレクトボックスの設置 まずはHTMLでセレクトボックスを作ります…

Reveal.jsでスライドの背景画像を設定する

JavaScriptをベースにブラウザでプレゼンテーションスライドを作るにはReveal.jsが便利です。今回は、スライドに背景画像を追加する方法を紹介します。 sectionに追加パラメータを設定する。 背景画像を追加したいsectionにdata-background="ファイル名"を追…

JavaScriptでクロスブラウザ対応(1)

今回は、クロスブラウザ対応が必要な項目としてオブジェクト内の文字列の取得と設定をとりあげます。極めて基本的なオブジェクトにも関わらずクロスブラウザ対応が必要です。 (追記2014/10/15: その後調べた結果、クロスブラウザ対応の状況が変わっているこ…

Javascriptでブラウザの判別

今回は、クロスブラウザ対応(異なるブラウザで動作や表示をそろえること)に向けて、JavaScriptで使用中のブラウザを調べる方法をまとめておきます。 ブラウザごとにJavaScriptの動作や表示が違うのはなぜ? ブラウザはそれぞれ異なるJavaScriptエンジンが…

ChromeでshowModalDialog()を使い続ける方法

HTML5の標準で動くjavascript関数にshowModalDialog()というのがあります。この関数がChromeのバージョン37から使えなくなっているのですが、しばらくの間使い続ける方法を紹介します*1。 2014/09/19追記:showModalDialog()を有効にし続けることで、リスク…

JavaScriptで出てくる二回連続の否定演算子!!

たまに他の人が書いたコードを見ているとはまることがあります。今回の二重否定も、ネット検索して調べるのに意外と時間がかかったのでメモとして残します。 否定演算子! 変数の値の判定などで論理演算子をよく使いますが、否定演算子の!は、真偽の値をひ…

スライド内容をmarkdownで記述するreveal.js

今までにいくつかreveal.jsを利用したプレゼンテーションスライドの作成について投稿してきました。何回かreveal.jsを使ってプレゼンテーションを作成した結果、以下のようなことを感じています。 スライドの作成をテキストエディタだけでできるのは便利。 …

Chrome Dev Editorを使ってウエブアプリ開発

今回は、JavaScriptやHTML5を利用してウエブアプリケーションを作成する際にとても便利なエディタの紹介です。 Chrome Dev Editor Chrome Dev EditorはGoogleが開発したウエブアプリケーション作成用のテキストエディタです。通常のテキストエディタと同じよ…

キー押しによる時間の取得

今回は、キーボードを押したときに時間を取得する方法を紹介します。 キーボード押しの判定 キーボードが押されたときに、何かイベントとなる関数を実行するにはdocumentのonkeydownというパラメータを利用します。 document.onkeydown = function(presskey)…

D3.jsを利用してセレクトボックスのオプションを配列から取得

今回は、セレクトボックスの選択肢を任意の配列の情報から取得する方法を紹介します。このやり方を覚えておくと、データをインタラクティブに可視化する際に便利かもしれません。 HTML: セレクトボックスの設定 セレクトボックスにidをつけておくと後でd3.js…

加法混色と減法混色

今回は色を混ぜるという話です。色を混ぜるといっても二種類のやり方があるので、それを整理しながら、D3.jsでSVGオブジェクトの色を変換する方法を紹介します。 混ざると明るくなる加法混色 混ざると明るくなるのは、いわゆるRGBに基づく色の場合です。光の…

SVGオブジェクト上のテキストの改行

SVGオブジェクトでたくさんのテキストを表示をする場合、\nのような改行コードが認識されません。 仕様で改行ができないようです。でもD3.jsを利用すれば比較的簡単に改行を行うことができます。 テキストの準備 ここでのポイントはテキスト全体を改行位置で…

Reveal.js 文字列幅(折り返し位置)の変更

Reveal.jsはスライドプレゼンテーションのためのJavaScriptライブラリです。 以前、Reveal.jsを利用したプレゼンテーション - jnobuyukiのブログで基本的な使い方を紹介しました。今回は、もっとよいプレゼンを目指すためのTipsです。 画面の幅に対しての文…

数量の正規化:方法の違いは何を意味するか?

大量のデータをまとめて、視覚的に表現すると、データが持つ特徴を直感的に理解できることがあります。今回は、データを視覚化する際に施される「正規化」について考えます。wikipediaの正規化の定義は以下のようになっています。 正規化(せいきか、英: nor…

Google Chartsのtransitionアニメーション

グラフにアニメーションを適用して、分かりやすく示すと言えば、このブログでは今のところd3.jsの独壇場です。でも、もちろんそれ以外のライブラリも利用できます。今回は、Google chartsのtransitionを使ってみます。 ポイント:インスタンス生成は最初の一…

Google Chartsを利用したヒストグラムの作成

Google Chartsでは、前に紹介した棒グラフ以外にもいろいろなグラフのAPIが用意されています。今回は、分析の初期段階でよく使うヒストグラムの作り方です。ポイントとしては、驚くほど簡単につくれるということ。なぜか?それは前回の棒グラフのコードの大…

D3.jsを利用したテーブルの作成

集計したデータを表にする場合、Tableノードのtr,th,tdノードに数値を埋めていく必要があります。 これを自動化するためD3.jsを利用してみましょう。 HTML Tableノードの構造 一番外にくるのがtableノードで、その内側にtrノードが来ます。trノードは一行に…

Reveal.jsを利用したプレゼンテーション

学会発表などでスライドをつくるための定番ソフトウエアといえば、パワーポイントとキーノートです。最近は、Preziを使う人も増えてきました。 Prezi - Presentation Software JavaScriptライブラリを利用すれば、どちらの形式のスライドも作れます。パワー…

ビット演算子の使い方(初歩)

JavaScriptを扱うようになるまで、ビット演算子のことは「聞いたことがある」というくらいに知らなかったのです。少し調べてみたら便利そうなので、ここで使い方をまとめます。 ビット演算子とは? 要は二進数、0と1で構成される32ビット列への操作です。つ…