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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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