jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

HTML5

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

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

音の印象を尋ねるウエブページの構築

本日は、音声を聞いて、その印象を尋ねるウエブページをHTML5の標準技術で(プラグインや別のサービスなし)作ることを試みます。これができると音声を聴取する調査がぐっと簡単になりますよね。## 概要 音声を提示する 反応を取得する 音声を提示する 音声…

R言語でデータフレームの一部を参照する方法

今回は、データフレームオブジェクトの一部を取り出す方法を紹介します。ほんの少しの違いですが、取り出した結果を他の処理に利用するときには重要な違いになるので、割と大事な内容です。 R言語のオブジェクト R言語では、いろいろな構造のオブジェクト(…

R言語でウェブページから情報を抽出

今回は、R言語を利用してウェブページからデータとなる情報を抽出する(いわゆるスクレイピング)方法をまとめます。 参考にしたページ abrahamcow.hatenablog.comqiita.com XMLパッケージ ウエブページを書くための言語であるHTMLは、タグ形式で表現される…

ウェブフォントの使い方(2):表示タイミングを制御する場合

ウェブフォントを利用すると個性的なテキスト表示ができますと前に書きました。 ウエブフォントの使い方 - jnobuyukiのブログいろいろ実験してみたところ、表示に関して、ブラウザのレンダリングでうまくいかないところがあったので、シェアします。 ウェブ…

ウエブフォントの使い方

ウエブフォントを使うと、個性的なテキスト表示が可能です。やり方はとても簡単なのでメモとしてここにまとめておきます。 font-faceの設定 フォントの属性をCSSのなかでfont-faceとして設定します。font-familyでは後でフォントを呼び出すための名前を設定…

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

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

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

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

ブラウザのHigh DPI対応

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

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

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

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

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

多言語対応したウエブページで使う強調

今回は、多言語対応したウエブページで単語をどのように強調するかを考えます。個人のブログでは、多言語使用はほとんど問題にならなそうですが、多言語の文章をいかに等しく表現するかという問題として考えると面白いので、メモ代わりに書いてみます。 多言…

HTMLとCSSを利用した文中の文字の強調

今回は、文中の特定の単語を強調する方法をまとめておきます。 文中の文字の強調 英語の文であれば引用符””で囲んだり、下線を引いたり、文字をイタリック(斜体)やボールド(太字)にしたりします。日本語の文でも、これらの形式で単語が強調されることが…

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()を有効にし続けることで、リスク…

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

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

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

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

加法混色と減法混色

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

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

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

Google Chartsのtransitionアニメーション

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

D3.js transition()でtranslateとcx,cyの上書きの違い

D3.js の面白い点の一つが、transition によるアニメーションです。DOMツリーの中の任意のノードを選択し、位置、色、大きさなどを変更できます。色々なtransition を試しているうちに、少しコツがあることに気づいたので、今回はそれを紹介します。 transit…

audio要素の使い方

今回はHTML5のaudio要素の使い方を簡単に紹介します。ウエブ上で音声ファイルを実行したい場合、HTML5以前は何らかのプラグインを導入する必要があったようです。しかし、HTML5でaudio要素が導入されて、その必要がなくなりました。ウエブ上では、Web Audio …