GraphQL.jsでMutation

2018-07-27T00:00:00+09:00 JavaScript GraphQL

graphql.jsを使ってMutationをやってみる

GraphQLスキーマを定義して利用する方法

2018-07-12T00:00:00+09:00 JavaScript GraphQL

graphql.jsでスキーマを外部定義して利用する方法をメモる

graphql.jsを使ってみた

2018-07-03T00:00:00+09:00 JavaScript GraphQL

graphql.jsを使ってみた

※あくまでgraphql.jsのAPIを使ってやってみただけなので、GraphQLそのものについてはドキュメントを読みましょう

almin+react-routing-resolver

2018-06-22T00:00:00+00:00 JavaScript almin

hatebupwaを読んでる時に気になったreact-routing-resolverを使ってみた

※almin自体にはあまり触れないのでドキュメント参照

webpackでTypeScriptプロジェクトをビルド

2018-06-17T00:00:00+09:00 JavaScript webpack

前回のちょっとした続き

※前回はこちら

っていうのをやってみた

ES7でのfunction bind

2018-05-29T00:00:00+00:00 JavaScript

import React from "react";

export default class SampleComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <button onClick={this.onClick.bind(this)}>click</button>
      </React.Fragment>
    )
  }

  onClick() {
    // 省略
  }
}

って書く事ありませんかと。ようは「this.onClick.bind(this)」って書くのダルくないですかってことなんですが

ES7 Decoratorsを試す

2017-11-30T18:00:00+00:00 JavaScript

ES7から導入?されるDecorator(Javaでいうアノテーション的なやつ?)を使ってみた

webpackで変数を注入

2017-11-09T00:00:00+09:00 JavaScript webpack

webpackでビルドされるJSファイルにDeinePluginを使えば変数を注入出来る模様

ServiceWorkerを使ったアプリケーションキャッシング

2017-11-07T08:00:00+09:00 JavaScript

参考1: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja

参考2: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle?hl=ja

PWA(Progressive Web Apps)などで、Webアプリケーションをネイティブアプリケーションのような内部にリソースを持つようにWebアプリケーションでもそういうリソースをServiceWorkerでキャッシュさせて利用する事が出来るとのことなのでちょっとやってみた

※上記参考を必読推奨

※あくまで個人的なメモです

ServiceWorkerでオレオレ証明を使って検証する場合

2017-10-12T07:40:00+09:00 JavaScript

PWA(Progressive Web Apps)を検証している時に若干つまづいたのですが、ちょっとした懸賞でnode.jsでhttpsサーバーを作りそれでserviceworkerの検証をしていた所どうやらHTTPS関連のエラーでつまづいてしまうことがあったのでそれに関することをメモしておく

LiftOff

2017-06-09T18:00:00+09:00 JavaScript

launcherなどを作る時とかに便利っぽそう?

babel6(ES6)のテストコードカバレッジ

2015-11-15T19:59:31+09:00 JavaScript react.js

参考: https://github.com/douglasduteil/isparta

mochaでES6でかつReact.js(JSX)なクラスをテストする際にコードカバレッジが欲しいと思ったので調べてみた所、ispartaを使う事で可能らしいのでやってみた

reduxを使うReact Componentのテスト

2015-11-10T19:59:35+09:00 JavaScript react.js redux

ドハマりしてたけど結局ドキュメントに書いてるっていうオチなメモ

※詳しい事は記事末尾にある参考を参照

babel6の件

2015-11-01T13:49:50+09:00 JavaScript react.js

babel6からなにやら仕様が変わった模様で

npm runで複数のscriptsを動かす

2015-09-17T19:58:13+09:00 JavaScript Node.js

https://www.npmjs.com/package/npm-run-all を使えば可能らしいのでやってみた

angular.js $animateCss

2015-08-28T21:58:53+09:00 JavaScript angular.js

$animateCssを使えばkeyfames構文のような形式でアニメーション定義出来るっぽいのでやってみた

angular-cache

2015-07-17T08:11:22+09:00 JavaScript angular.js

angular.jsには$cacheFactory?っていうのがあるけれどもおそらくはlocalStorageとかにキャッシュしたりするような機構は備わっていないはず。でそういうのを出来るようになるangular-cacheっていうのを使ってみたのでメモ

ES7のawait

2015-07-10T07:58:37+09:00 JavaScript

参考: ES7 の Async/Await を使ってみた

ES7からawaitが使えるようになるとのことでやってみた

browserify+babelifyでのオプションの指定

2015-07-08T21:38:41+09:00 JavaScript

例えばbabel.jsでes7.asyncFunctionsを使う場合にはオプションの定義と一定のモジュールが必要なそうで

Google Cloud Endpoints(Java)を使ってみた

2015-06-24T17:03:46+09:00 Java Google App Engine JavaScript

公式ドキュメント: https://cloud.google.com/appengine/docs/java/endpoints

今までGoogle App Engineを使ってWeb API的なのを定義する際、Slim3を使ってOAuthServiceで認証情報を取得してJSONでレスポンス返す的な事を一から実装してたりとかしてたけど、今時そんな事しなくてもGoogle Cloud Endpointsを使う事で同等な事をさらっと出来るようになってるらしい

っていう事でドキュメントを読みつつやってみた

angular.js directiveのbindToController

2015-06-20T16:45:37+09:00 JavaScript angular.js

参考: AngularJS1.4とbindToController

参考から引用すると

Directiveを自作する時に、コントローラーへ値を引き渡し、バインディングするには$scopeが必要でしたが、これが$scopeいらずで行えるようになりました。ng-controllerのas構文では先行して可能だったことがDirectiveでも可能になったんです。また、1.4では、どの値をバインディングするのか、どの値をバインディングしないのかを明確に定めることができるようになりました。

との事。要はdirectiveで指定されるcontrollerにdirectiveが持つscope等で指定したパラメーター等をcontrollerのプロパティとして伝播し利用する事が1.3からbindToControllerを使って可能になり、1.4からはbindToControllerのパラメーターの設定によりバインディングの設定等が行えるようになったよ的な事かと

っていう事でやってみる

ng-infinite-scroll

2015-06-19T00:00:00+09:00 JavaScript angular.js

公式: https://sroze.github.io/ngInfiniteScroll

スクロールによるページング処理に関してみたいな事をangular.jsでやってくれるライブラリがng-infinite-scrollっていうのがあるのでさらっと使ってみた

ECMAScript6でangular.js

2015-06-17T01:29:42+09:00 JavaScript angular.js

angular.js(1.x)を使ってるけどJavaScriptをbabel.jsを使ってECMAScript6で書きたい。そういう場合どうすれば良いのか色々調べてみた

※angular.jsアプリケーション全体をES6で書いて検証した訳ではないので本当に問題が無いかは不明

※あくまで開発よりはビルドする方法なネタ

babel.jsでECMAScript6

2015-06-02T16:14:42+09:00 JavaScript

参考: http://yoshiko-pg.github.io/slides/20150425-jsfes/

babel.jsのLearn ES2015を読みつつECMAScript6を色々勉強してみた

※一部省略しているのもあり

npmだけでディレクトリを監視してテストを自動実行させる方法

2015-05-18T00:00:00+09:00 JavaScript Node.js

一定のディレクトリを監視しつつ、変更があったらテストを実行するコマンドを勝手にやってくれるようなパターンをnpmだけでやるにはどうすればいいのか調べた所npm-watchっていうのがあるらしい

ServiceWorkerを使ったPush APIをやってみた

2015-05-17T00:00:00+09:00 JavaScript

公式ドラフトドキュメント?: http://www.w3.org/TR/push-api/

参考1: http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web

参考2: http://qiita.com/tomoyukilabs/items/8fffb4280c1914b6aa3d

前から気になってたServiceWorkerを使ってPush APIを実装するっていうのが話題になってた気がするので、ざっくりと参考を読みつつやってみた

chrome.identity APIを使ってGoogle App Engine OAuth2を使う

2015-04-22T00:00:00+09:00 Java Google App Engine JavaScript Chrome Extension

参考: http://www.ciiycode.com/0z6ziWjWxjjP/google-app-engine-oauth2-provider

Google Account OAuth1.0aがdeprecated化したのがつい先日くらいの話なので、そのまま放置しておくと問題にもなりそうなので検証してみる

React.jsのCSSアニメーション

2015-04-18T00:00:00+09:00 JavaScript React.js CSS

公式ドキュメント: https://facebook.github.io/react/docs/animation.html

参考: http://qiita.com/koba04/items/236014c955f8af14d3fc

追加されたり削除されたりした際にCSS Transition等を使ってアニメーションが出来るようにしたいとかまぁあるあるパターンだと思いますが、そういうのもサポートされてる模様

react-routerのテストに関して

2015-04-14T00:00:00+09:00 JavaScript React.js

参考: https://github.com/rackt/react-router/blob/master/modules/components/__tests__/Link-test.js

react-routerを使ってのルーティング要件をテストしたい場合、TestLocationっていうのがある模様なのでそれを使っても出来るらしい

っていう事でさらっとやってみた

jestのrunAllTimers/runOnlyPendingTimers

2015-04-12T00:00:00+09:00 JavaScript

参考1: https://facebook.github.io/jest/docs/timer-mocks.html

参考2: http://qiita.com/koba04/items/2f97904b3ca247fc1917

以前に出した上記の参考資料2にも書いてるけど

runAllTimersは全てのTimerで待っている処理を実行させて、runOnlyPendingTimersはその時点でPendingになっているものだけを実行します。 setTimeoutで再帰しているような実装の場合、runAllTimersを使ってしまうと無限ループになるのでその時はrunOnlyPendingTimersを使って1つずつ進めながらテストを書いていきます。

っていう事で検証してみた

jestを使ってReact.jsなスクリプトをテストする

2015-04-11T12:00:00+09:00 JavaScript React.js

公式ドキュメント: https://facebook.github.io/jest/docs/tutorial-react.html

参考: http://qiita.com/koba04/items/2f97904b3ca247fc1917

参考資料1: https://facebook.github.io/react/docs/test-utils.html

参考資料2: https://facebook.github.io/jest/docs/mock-functions.html

React.jsで書かれたコンポーネントをjestを使ってテストしてみる。ただそれだけ

jestの__mocks__ディレクトリに関して

2015-04-11T00:00:00+09:00 JavaScript

前回のjestを使ってReact.jsなコンポーネントをテストするネタを書いたけど、その最後に_mocks_を使うとモック化されるオブジェクトを意図的に別のに差し替えるような事が可能らしいとの事でやってみた

react-router

2015-04-01T00:00:00+09:00 JavaScript React.js

react-routerを使ってみた。

※React.jsな構成の考え方とかとりあえず反映せずにざらーって書いてるので(ry

※やたらと長い上に書いた本人以外わかりづらいと思うので公式ドキュメント読んだ方が良い

angular.resumeBootstrapの再考

2015-02-09T00:00:00+09:00 JavaScript angular.js

以前もちょっとだけangular.resumeBootstrapについて書いてたけどざっくりしてるし改めて色々やってみた

chrome.gcm

2014-10-24T00:00:00+00:00 Chrome Extension JavaScript Java

参考1: https://developer.chrome.com/apps/cloudMessaging

参考2: http://docs.monaca.mobi/3.5/ja/manual/backend/push_config/gcm/ (※主に設定の有効の仕方等)

ちょっと前にはchrome.pushMessagingっていうAPIが公開(って言っても一年以上前)されてたはずなのですが、現在これがどうもlegacy扱いになっている模様で現在はchrome.gcmを使うのが良いっぽそう。確かpushMessagingの方はwebstoreを経由してインストールしたアプリで無いと使えないのかどうかまでは覚えてないが、gcmはcrxパッケージングした拡張であれば使う事が可能らしい

っていう事でやってみた

※おそらくはChrome Sync(ChromeでのGoogleアカウントのログイン機能)をやっておかないと出来ないのかも知れない

ng-strict-di

2014-09-02T00:00:00+00:00 angular.js JavaScript

参考: angular1.3から追加されるng-strict-diを使ってminifyに強くする。

っていう本が出るそうで、その関連でng-strict-diっていうのがあるとのことを知ったので色々検証してみた。詳しくは上記の参考サイト見りゃいい

directiveのmultiElement

2014-07-25T00:00:00+00:00 angular.js JavaScript

<!DOCTYPE html>
<html ng-app="sample">
  <head>
    <script src="https://code.angularjs.org/1.3.0-beta.16/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="SampleCtrl">
    <div directive1-start></div>
    <div directive1-end></div>
  </body>
</html>

みたいなのがあった場合において

ng-directiveのscope

2014-07-20T00:00:00+00:00 angular.js JavaScript

参考: AngularJSのdirectiveとは

<html ng-app="sample"
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div ng-controller="SampleCtrl">
      <h4>controller: {% raw %}{{message}}{% endraw %}</h4>
      <div directive1>
        <h4>directive1: {% raw %}{{message}}{% endraw %}</h4>
        <div directive2>
          <h4>directive2: {% raw %}{{message}}{% endraw %}</h4>
        </div>
      </div>
    </div>
  </body>
</html>

っていうのに作ったng-directiveに対してscopeを設定するかしないかで何が変わるのか検証してみた

スクロールによるページング処理に関して#2

2014-07-13T00:00:00+00:00 JavaScript

参考: 要素が画面上に見えているかどうかを調べる

jquery.inview: https://github.com/protonet/jquery.inview

スクロールによるページング処理に関してではスクロールして末尾に達したら問答無用でロードを実行するような仕組みになっているけど、要素が見えているかをチェックしたりする事も一応出来るし、それをサポートするjQueryプラグインも存在する

※上記のinviewとか以前に検証したjQueryで特定のセレクタとかが見えているに対してなんかするやつとか

っていう事でちょいとやってみた(inviewとかを使わずに参考のを見つつ)

angular.jsをやってみる (26) - ngMessages -

2014-07-06T00:00:00+00:00 angular.js JavaScript

公式リファレンス: https://docs.angularjs.org/api/ngMessages

要は入力フォームなどの検証メッセージを表示ような要件なUIをサポートしたりするようなライブラリな模様(※angular1.3.x系からの物な模様。1.2.x系のドキュメントには無いので)

scope.$evalで引数を設定する方法

2014-07-02T00:00:00+00:00 angular.js JavaScript

参考: https://docs.angularjs.org/api/ng/service/$parse

angular.jsでng-initのような式評価を使う」の続き的な所として、scope.$eval(attrs.ngCall)をすればng-initのような式評価で実行させる事が出来るっていうのは前回で書いたが、例えばそのngCallで呼び出される$scope等に定義した関数等の場合に引数にdone等のようななんらかの処理を完了させるようなコールバックを引数に渡せるようにしたいとかっていう要件な場合な件を調査してみた

angular.jsでng-initのような式評価を使う

2014-07-02T00:00:00+00:00 angular.js JavaScript

参考: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInit.js#L63

angular.jsで

のようにngInit Directiveで指定した式を評価して実行したいようなangular.js Directiveを作りたい場合

スクロールによるページング処理に関して

2014-07-01T00:00:00+00:00 JavaScript jQuery

参考: http://yurubu.org/jquery-autoload/513

んまぁTwitterとかであるスクロールでコンテンツの末尾に到達すると次のページのコンテンツを出してくれる仕組み的なの。参考サイトを見ればどうやって実現すれば良いのかは分かるので書く必要性無いと思うのですが一応メモ

engine.io

2014-05-20T00:00:00+00:00 JavaScript Node.js

参考: Engine.IO単体でチャットを作った

上記の参考に触発されてやってみた

angular.jsをやってみる (25) - $httpProvider.interceptors -

2014-05-17T00:00:00+00:00 angular.js JavaScript

たまたまドキュメントを見ていたら、$httpで処理されるリクエストやレスポンスなどにインターセプターを利用してfilter的なことできるっぽい。ということでやってみた

angular.jsをやってみる (24) - ng-non-bindable -

2014-05-12T00:00:00+00:00 angular.js JavaScript Ruby Rails

参考: AngularJSとサーバーサイドテンプレートの混在とngNonBindable

※上記の参考を必読することをオススメ

上記参考にも書いてるのですが、例えばクエリーなどにおいてangular.jsが処理されるような記法なクエリーが含まれているとXSSになるっていう話があるのですが、実際自分でやってみた。

※実検証はRails4を使ってやった

angular.jsをやってみる (23) - ngTouchを使ってスワイプイベントを利用 -

2014-04-14T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ngTouch

スマートフォン等においてカルーセルビュー的な例でスワイプする事でビューを切り替えたり出来るようにしたいとかの場合にはngTouchを使う事で出来る模様

angular.jsをやってみる (22) - $exceptionHandler -

2014-04-12T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ng/service/$exceptionHandler

例外とかがスローされた際には$exceptionHandlerっていうサービスに処理が委譲されるようになっている模様。でデフォルトでは$log.errorでエラー内容が処理されるようになっているとの事

angular.jsをやってみる (21) - $logProvider -

2014-04-12T00:00:00+00:00 angular.js JavaScript

$logを使えばログ(console.メソッド)に対応するのを利用できるただそれだけな模様なのだけど、デバッグメッセージ(console.debug|$log.debug)に関しては$logProviderで設定する事により発生しない模様

angular.jsをやってみる (20) - $q -

2014-04-10T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ng/service/$q

以下の例だと非常に微妙なんだけれども、例えば

var Sample = (function() {

  var values = ["hoge", "fuga", "foobar"];

  function Sample() {
  }

  Sample.prototype.getName = function(cb) {
    setTimeout(function() {
      var index = Math.floor(Math.random() * values.length);
      cb(values[index]);
    }, 1000);
  }

  return Sample;

})();

なんていうのがあった場合に

angular.module("app", [])
  .factory("SampleFactory", function() {
    return {
      getName: function() {
        var name;

        var sample = new Sample();
        sample.getName(function(value) {
          name = value;
        });

        return name;
      }
   };
  })
  .controller("SampleController", function($scope, SampleFactory) {
    $scope.name = SampleFactory.getName();
  });

だなんてやってもSampleFactory.getNameで返される値はundefinedにしかならない。そりゃその値が返される際にまだコールバックが発生していないのでname変数は初期化すらされずundefinedになるっていうオチ

んまぁこういうパターンだと別にfactoryしなくても良いケースなので分かりづらいけど、要は非同期処理等が行われるにあたって、それが完了した際に通知するような仕組みを利用しなければ正常に値が取得できないような場合には$qなDeferredオブジェクトを利用する事で可能っぽい。っていう事で$qを使って上記コードを書き換えると

angular.jsをやってみる (19) - 動的に追加したエレメントに対して$animate.enter -

2014-04-08T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ngAnimate/service/$animate

例えばクリックイベントによりノードを追加したりするにあたって、ngAnimateなアニメーションを利用したい場合とかに$animate.enter等を利用する事で出来るっぽいのでやってみた

とりあえず、わかりやすい例としては画面上に通知的なのを出す。それをクリックイベントにてエレメントを追加し$animateを使ってfadeIn/fadeOutなアニメーション的な事をする

angular.jsをやってみる (18) - $emit -

2014-04-06T00:00:00+00:00 angular.js JavaScript

前回のangular.jsをやってみる (17) – $broadcast -の続き。$broadcastと$emitを同時に書くとごちゃごちゃになる気がしたので分けた次

で前回で$broadcastはそれを実行したスコープから下への子孫内スコープのイベントをfireするっていう形だったのですが、$emitはその逆というか自身のスコープから親のスコープへのイベントをfireするっていう事な模様

という事でやってみた

selenium-webdriverを使ってChrome Extensionのテスト

2014-04-05T00:00:00+00:00 Chrome Extension JavaScript Node.js

selenium-webdriverを使えばChrome Extensionの操作テストとか出来たりする模様なのでやってみた

angular.jsをやってみる (17) - $broadcast -

2014-04-04T00:00:00+00:00 angular.js JavaScript

公式リファレンス: http://docs.angularjs.org/api/ng/type/$rootScope.Scope

※ややこしいので公式リファレンス読むかググった方が良い

node.jsのEventEmitter的なのという説明が正しいかは知らないけど、そんな感じでイベント通知による処理を促したり出来る模様。で今回は$broadcastのみ。$emitは次回(ややこしいので)

angular.jsをやってみる (16) - ngAnimate#2 -

2014-04-03T00:00:00+00:00 angular.js JavaScript

angular.jsをやってみる (15) – ngAnimate -では単にng-enterやng-leaveなどのCSSを利用する事でアニメーションを利用する事が出来たわけだけど、これをJavaScriptなangular.moduleによってコントロールする事も出来る模様。という事で前回同様なフェードイン・フェードアウトをやってみた

angular.jsをやってみる (15) - ngAnimate -

2014-04-02T00:00:00+00:00 angular.js JavaScript

参考: AngularJSでちゃちゃっとアニメーションを試す - AngularJS Ninja

公式リファレンス: http://docs.angularjs.org/api/ngAnimate

んまぁ名前からしてCSS3?なアニメーションな機能をサポートするものっぽい。単純にng-repeatしている部分なエントリーをフィルターし、出る際にフェードインさせたり、消えたりする際にフェードアウトさせたりをやってみる

angular.jsをやってみる (14) - $scope.$apply -

2014-03-31T00:00:00+00:00 angular.js JavaScript

参考: AngularJS のデータバインドを支える $apply

公式リファレンス: http://docs.angularjs.org/api/ng/type/$rootScope.Scope

angular.jsにある$httpを使ってXHRするようなケースパターンだと$applyは内部的に行われているらしいので必要ないらしいのですが、$httpを使わずに独自でXHRを使ってHTTPリクエストを行いレスポンスを取得して結果をビューにバインドしたいようなケースの場合には$applyをしないとデータバインドが正常に行われない模様。というか行われないではなくてされてはいるけど、それが反映されない状態になってるだけなのかなと

という事でやってみた。ちょっと前に書いてたTwitter APIを使ったChrome拡張なやつでangular.jsを使ってはいるが$httpを使ってないケースなのでこれがちょうど良いのではと

angular.jsをやってみる (13) - $sceとngSanitize -

2014-03-28T00:00:00+00:00 angular.js JavaScript

※ややこしいので公式ドキュメント読んだ方がいい

<div ng-controller="SampleController">
  <span>{% raw %}{{message}}{% endraw %}</span>
</div>

的な感じになってて

angular.module("app", [])
  .controller("SampleController", function($scope) {
    $scope.message = '<span style="color: red">hoge</span>';
  });

みたいにすると、$scopeとかに含まれるHTMLとかはエスケープされて出力されるらしい

angular.jsをやってみる (12) - angular-mocks.jsを使ったテスト -

2014-03-27T00:00:00+00:00 angular.js JavaScript

今まで

angular.jsのkarmaを使ったテスト
protractorを使ったangular.jsのe2eテスト

っていうのをやってたけど、angular-mocks.jsを使う事での単体テストすることも可能な模様なので色々整理する辺りな所としてやってみた

angular.jsをやってみる (11) - $interval -

2014-03-27T00:00:00+00:00 angular.js JavaScript

window.setIntevalをangular.jsでラップした物らしい。http://docs.angularjs.org/api/ng/service/$interval を見つつやってみた

angular.jsをやってみる (10) - ngCookies -

2014-03-26T00:00:00+00:00 angular.js JavaScript

http://docs.angularjs.org/api/ngCookies を使えばCookie的な利用をする事も出来るらしい。っていう事で使ってみた

angular.jsをやってみる (9) - $resourceのparamsDefaultにおける@接頭辞 -

2014-03-20T00:00:00+00:00 angular.js JavaScript

前回のangular.jsをやってみる (8) – $resource -でも述べているように、paramsDefaultのパラメーターには@な接頭辞を持つデータ指定を利用する事が出来る

angular.jsをやってみる (8) - $resource -

2014-03-19T00:00:00+00:00 angular.js JavaScript

REST and Custom Servicesを見つつやってみる。でRESTfulなWebサービス的なのが必要なので今回はRailsで適当なのでっち上げてやってみる。つまりangular.jsとかソッチ系も全部Railsプロジェクト内に作る

angular.jsをやってみる (7) - route -

2014-03-18T00:00:00+00:00 angular.js JavaScript

Routing & Multiple Viewsな辺りのドキュメントを見つつやってみた

angular.jsをやってみる (6) - service -

2014-03-17T00:00:00+00:00 angular.js JavaScript

provider同様にserviceを使ってオブジェクトを注入する方式を利用する事もできる。で似たようなのでfactoryっていうのもあるけど、angular.jsをやってみる (1)でやってるのでそこはパス。無論、「serviceとfactoryの違い」に関しては後述するので

angular.jsをやってみる (5) - provider -

2014-03-16T00:00:00+00:00 angular.js JavaScript

http://docs.angularjs.org/guide/providers な辺りのドキュメント見つつやってみた

angular.jsをやってみる (4) - filter -

2014-03-10T00:00:00+00:00 angular.js JavaScript

angular.jsとかで

<div ng-repeat="sample in samples | filter:searchText">
  {% raw %}{{sample}}{% endraw %}
</div>

的にパイプでフィルターを指定したり出来る訳だけど、それを実装する方法

mocha-phantomjsでlocalToRemoteUrlAccessEnabled

2014-03-03T00:00:00+00:00 JavaScript

ってイケるんやろかと思いつつやってみないと信用しないタイプなのでやってみた

Chrome拡張のブラウザアクションなアイコンを回転させる技

2014-02-22T00:00:00+00:00 Chrome Extension JavaScript

Google公式なGmailな拡張ではメールを受信したりするとブラウザアクションなアイコンが回転するようになっている。これどうやってやってるのか非常に気になったのでその拡張のソースを見てやってみた

supervisord (4) - eventlistener -

2014-02-17T00:00:00+00:00 supervisord Python JavaScript Node.js

参考: http://blog.hakutoitoi.com/?p=396

supervisordで管理しているプロセスが落ちたりだとか(規定されている?)一定時間毎に何かコマンドを動かしたい時とかに使える模様

gulpでmocha-phantomjs+jscoverage

2014-02-14T00:00:00+00:00 JavaScript Node.js gulp

以前に「mocha-phantomjs+jscoverageでコードカバレッジ出力」な流れをgruntに移植するっていうのをやったのですが、それのgulp版

Chrome Native Messaging

2014-02-08T00:00:00+00:00 C++ Chrome Extension JavaScript

https://developer.chrome.com/extensions/messaging.html#native-messaging っていうのがある模様なので色々やってみた

Twitter Bootstrap+sidr.jsによるスライドコンテンツ領域に関して

2014-02-08T00:00:00+00:00 CSS JavaScript

簡単に言えば

じゃなくて

っていうようにTwitter Bootstrapのナビゲーションバーもスライドさせずに下のコンテンツ部だけをスライドさせるようなUIな仕組みにしたい場合

nginxでwebsocket

2014-01-12T00:00:00+00:00 JavaScript nginx Node.js

nginx1.3から正式サポートされたらしいのでやった事無かった為やってみただけ。前回のAndroidでsocket.ioで使ったのをちょいと修正して使う

Androidでsocket.io

2014-01-11T00:00:00+00:00 Android Java JavaScript Node.js

socket.io-java-clientを使えば出来るらしいのでちょっと要件検証目的でやってみた。ちなみにsocket.ioサーバーはnode.jsなやつを使う

Spring WebMVCをやってみる (10) - gsonを使う -

2013-12-15T00:00:00+00:00 Java Spring Framework JavaScript

例えば

  • @ResponseBodyアノテーションがついてるメソッドでStringじゃなくてオブジェクトだとかをぶん投げたりとか
  • @RequestBodyアノテーションがついてるメソッドの引数でStringじゃなくてオブジェクトだとかを指定したりとか

っていうケースな場合にJSONで投げられる事を前提とするのであれば、MessageConverterな方式を利用する事でサポート出来るらしいのでやってみた

Spring WebMVCをやってみる (7) - @RequestBody -

2013-12-11T00:00:00+00:00 Java JavaScript Spring Framework

まぁアノテーション名で分かるようにHTTPリクエストボディを引数にマッピング出来る的な感じの解釈で良いんじゃないかと。例えばJSONデータをぶっこんでコントローラーでパースして利用するような場合とかに使うとかなんですかね

とりあえずやってみた

CasperJSを使ったJavaScriptのテスト

2013-12-04T00:00:00+00:00 JavaScript

今までだと

zombie.js
sodaを使ってみる
mocha+webdriverjs(+selenium)でテスト

てな感じでテストしてみたりしてきた訳だけど、CasperJSっていうのを使っても出来るらしいのでやってみた

angular.js+chrome_ex_oauth

2013-11-18T00:00:00+00:00 angular.js Chrome Extension JavaScript

angular.jsを使いつつ、chrome_ex_oauthを使ってTwitter APIを使うデモとか出来るんじゃないかなーって思ってやってみた

Event Pagesでchrome.contextMenus

2013-11-03T00:00:00+00:00 Chrome Extension JavaScript

以前作った https://github.com/kinjouj/chrome-extension-twify で説明する

angular.jsをやってみる (3) - directive -

2013-10-26T00:00:00+00:00 angular.js JavaScript

http://docs.angularjs.org/guide/directive を読みつつドキュメント読みを遂行してみる

protractorを使ったangular.jsのe2eテスト

2013-10-25T00:00:00+00:00 angular.js JavaScript

AngularJSのkarmaを使ったテストでも書いたけど、そういうのをパパっと?出来るprotractorっていうのがあるらしいので使ってみた

※angular.jsを使ったページに関しては前回(上記リンク先)と同様な感じで、テキストフィールドとng-repeaterによる作用をしているだけなのを利用する

angular.jsをやってみる (2) - $interpolateProvider -

2013-10-22T00:00:00+00:00 angular.js JavaScript

{% raw %} angular.jsで$interpolateっていう機能を使う事で{{ model.name }}っていうのが評価されて出力されるわけだけど、デフォルトではstartSymbolが{{で、endSymbolが}}っていう事になってる。$interpolateProviderを使うことでこの設定を変える事も出来る模様 {% endraw %}

angular.jsをやってみる (1)

2013-10-21T00:00:00+00:00 angular.js JavaScript

以前からちょいちょいネタに出したりしてるけど、angular.jsの公式ドキュメントを読みつつ勉強を進めてみようかと。今回はbootstrap+conceptual overviewなセクションを読みつつ(※directiveな仕様なやつは今回は除外、別途で書く予定)

<canvas>でチャートを出力する

2013-10-09T00:00:00+00:00 HTML5 JavaScript

参考: http://www.mdn.co.jp/di/articles/2366/?page=11

特にjqplotだとかchart.jsだとかそういうのを使わずに<canvas>でJavaScriptでグダグダしつつチャートをレンダリングするっていうようなのをやってみただけ。まぁグダグダすぎるのでgistで管理

Rails assets pipeline

2013-10-08T00:00:00+00:00 JavaScript Ruby Rails

何やらRailsを使っててJavaScriptとかをgemとかで配布してRailsプロジェクトに組み込んだりするっていうのがあったりするわけで。例えばTwitter BootstrapのCSSとかJSとかをGemfileにそういうgemを定義する事でサクッと出来るっつー訳。でその仕組み的なのがRails assets pipelineっていうのかなと、これCoffeeScriptとかならコンパイルして使えるようにする事も出来るらしいとの事(今回はやらないけど)

とりあえずこの仕組みを使ってangular.jsなプロジェクトを別にしてRailsプロジェクトに組み込むっていう事をしてみる

jquery.fullPageを使ってみた

2013-10-03T00:00:00+00:00 JavaScript jQuery

https://github.com/alvarotrigo/fullPage.js

前に「jquery.onepage-scrollを使ってみた」っていうのをやったけど、それと同等的な物。こいつでは横スクロールな構成も作る事が出来る

jquery.onepage-scrollを使ってみた

2013-09-26T00:00:00+00:00 JavaScript jQuery

https://github.com/peachananr/onepage-scroll

っていうのを使う事で、画面1ページづつスクロールして見れるWebサイトみたいなのを実現できるっぽいのでやってみた

testem+mocha+coverjsでコードカバレッジ

2013-09-13T00:00:00+00:00 JavaScript

基本ベースは「mocha+coverjsでコードカバレッジ

まぁtestem環境上でそれをやるだけって話なんですが、そういう機能的なのがあるのかは定かじゃないですが上記先とどうようにやれば良いんじゃねかと

angular.jsのkarmaを使ったテスト

2013-09-10T00:00:00+00:00 angular.js JavaScript

AngularJSなコントローラーとかの単体テストに関しては

describe("...", function() {
  it("...", function() {
    var scope = {};
    var controller = new SampleController(scope);

    // 以下省略
  });
});

的な事が http://docs.angularjs.org/tutorial/step_02 には既に書いてあるから良いんだけど、で実際HTMLと組み合わせて処理とかをテストするにはどうすれば良いのかがこのセクションの次に書いてあるe2eテストっていう方式を採用すれば出来るらしい。んまぁそういう事じゃないような気もするのだけど

んまぁとりあえずやってみたんでレポート

karma(mocha+chai)を使ってみる

2013-09-02T00:00:00+00:00 JavaScript

karmaを使ってみた。で最近JSなテストとかだと主にmocha+chaiを使って書く事が多いので (別にjasmineでも良いんだけど)

mocha+coverjsでコードカバレッジ

2013-08-30T00:00:00+00:00 JavaScript

mocha-phantomjs+jscoverageでコードカバレッジ出力でも似たような事をやっているのだけど、そっちはmocha-phantomjs。で今回は単純にphantomjsとかを使わずにブラウザで実行できるmochaなreporterを使ってコードカバレッジ出力を行なってみる

ざっくりとindexedDBを使ってみる

2013-08-25T00:00:00+00:00 HTML5 JavaScript

今作ってる物ではWeb SQL Databaseを採用しているのだけど、これindexedDBが良いんじゃないのかっていうのを思ったので今更ながらちょいと調査的にやってみた

PhantomJSのlocalToRemoteUrlAccessEnabled

2013-06-23T00:00:00+00:00 JavaScript

さっき知ったのですが、phantomsjsのオプションでlocalToRemoteUrlAccessEnabledをtrueにするとクロスドメイン間の通信をXMLHttpRequestとかでも出来るらしいとの事

XMLHttpRequestで取得した画像バイナリをJavaScriptでロードする

2013-04-17T00:00:00+00:00 HTML5 JavaScript

タイトル通り、HTTPで取得した画像のデータをXMLHttpRequestで取得してそれを画面にレンダリングする方法

Twitter Bootstrapとjquery.sidr.jsを組み合わせてみる

2013-04-13T00:00:00+00:00 CSS JavaScript jQuery

http://www.ideaxidea.com/archives/2013/04/sidr.html というのがあるのだけど、Chrome Extension+Twitter Bootstrap活用で使えないかと思いやってみた

mocha+webdriverjs(+selenium)でテスト

2013-04-03T00:00:00+00:00 JavaScript Node.js

やってみた。テスト対象は以前に作ったJavaScriptなカレンダービューがあるブログシステム(独自)

chrome.pageLauncher

2013-03-31T00:00:00+00:00 Chrome Extension JavaScript

っていうのが追加されている模様。但し、stableなやつでもAPI自体はあるけど実際に使うとなるとこの記事の書いてる段階だとunstableじゃないと出来ない

yuidocでアンダースコア(アンダーバー)を使うと消える件

2013-03-18T00:00:00+00:00 JavaScript

var Sample = (function() {

  /**
   * @class Sample
   * @constructor
   */
  function Sample() {};

  /**
   * @method getUser
   * @return {Object} current user by localStorage(sample_current_user)
   */
  Sample.prototype.getUser = function() {
    return localStorage.getItem("sample_current_user");
  };

  return Sample;

})();

みたいなコード及びyuidocなドキュメントアノテーション?を書いた状態でyuidocすると

「mocha-phantomjs+jscoverageでコードカバレッジ出力」な流れをgruntに移植する

2013-03-17T12:00:00+09:00 grunt JavaScript

今までは

jscoverage lib
mocha-phantomjs -R json-cov test/runner.html | json2htmlcov > coverage.html

な感じなのを普通に実行してカバレッジを出力していた。こういうのもどうかと思うので、最近というかちょっと前だと思うけどGruntっていうNode.jsベースなビルドタスクツールな感じなので移植してみた

mocha-phantomjs+jscoverageでコードカバレッジ出力

2013-03-17T00:00:00+09:00 JavaScript

っていうのをやってみた

Backgridを試してみる

2013-03-09T00:00:00+00:00 Backbone.js JavaScript

http://wyuenho.github.com/backgrid が気になったので使ってみた

chrome.appなPattern&Practice

2013-03-08T00:00:00+00:00 Chrome Extension JavaScript

Chrome Extensionとかだとウィンドウ出してなんか出すっていう場合だとブラウザアクションとかが良くありえるパターンだと思うのですが、 https://github.com/GoogleChrome/chrome-app-samples によるとchrome.app.windowなのを作ってアプリの画面を新しいウィンドウを作ってそこに出すっていうパターンもある模様。

superagentでリダイレクトをフォローしない

2013-03-06T00:00:00+00:00 JavaScript Node.js

何やらsuperagentっていうのがある模様。ちょっと使ってみたのだけどいろいろハマったのでメモ

mochaとchaiでJavaScriptをテスト

2013-03-05T00:00:00+00:00 JavaScript Node.js

http://visionmedia.github.com/mocha

http://chaijs.com

を使ってnode.jsでもbrowserでテストランナーなHTMLを読み込んでもテスト出来るテストフレームワークな感じ(正式的にはどういうスタンスなのか個人的に不明)。使ってみるとする

mocha-phantomjs

2013-03-05T00:00:00+00:00 JavaScript

https://github.com/metaskills/mocha-phantomjs っていうのがある模様なので使ってみた

jQueryで特定のセレクタとかが見えているに対してなんかするやつ

2013-03-03T00:00:00+00:00 JavaScript jQuery

http://www.appelsiini.net/projects/viewport っていうのがあるらしい。githubは https://github.com/tuupola/jquery_viewport

Backbone.jsのRouter/Historyを使ってみる

2013-02-26T00:00:00+00:00 Backbone.js JavaScript

フラグメントハッシュ等を利用した画面転移的な事が出来るらしい。公式ドキュメントだけじゃ微妙だったので

http://qiita.com/items/13f3d1f71d31f3e78123

http://tnakamura.hatenablog.com/entry/20111026/backbone_router

を参考に

Backbone.Viewに突っ込んでみる

2013-02-25T00:00:00+00:00 Backbone.js JavaScript

Backbone.Collection、Backbone.Modelときて、んでもってBackbone.Viewに突っ込んでみる

Backbone.Modelに突っ込んでみる

2013-02-24T00:00:00+00:00 Backbone.js JavaScript

前回同様ドキュメント読みつつ色々やってみた

Backbone.Collectionに突っ込んでみる

2013-02-23T00:00:00+00:00 Backbone.js JavaScript

色々ドキュメント読みつつ進めてみた

Backbone.jsを始めてみる

2013-02-22T00:00:00+00:00 Backbone.js JavaScript

タイトル通り、以前から勉強しようと思ってたBackbone.jsを始めてみる事に。でこれどう説明すれば良いのかが微妙だけど、「RESTful WebアプリケーションのためのJSサイドのMVCフレームワーク」的な感じかなと。一応色々機能があって(ry

とにかく、 http://backbonejs.org を読みつつ進めてみる

chrome.extension.onMessageとsetTimeout

2013-01-30T00:00:00+00:00 Chrome Extension JavaScript

https://groups.google.com/group/chrome-api-developers-jp/browse_thread/thread/80b45919bb86f9a0 という問題があるっていうの目にしてはいたけど実際実検証とかしてなかったのでメモ

zombie.js

2013-01-28T00:00:00+00:00 JavaScript Node.js

※defunctじゃないよww

以前にsodaを使ってJavaScript UI Component?な所をシステムに結合した状態でテストするっていうのをやったんですが、sodaをやる前からzombie.jsっていうのがあるのは知ってたんですがやらず嫌いなのもどうもなっていう事で使ってみた。要件はまったく同じでJavaScriptなイベントが実行されるリンクをクリックしたりして検証してみたりしてみる

NPAPIをざっくりやってみる (1)

2013-01-24T00:00:00+00:00 C++ Chrome Extension JavaScript NPAPI

多分続編はあると思います。まだ色々やってない事も沢山あるので

mongodbを使ってみる (9) - JSファイルでごにょごにょ -

2013-01-19T00:00:00+00:00 JavaScript MongoDB

外部でJSなファイルを作ってmongoでごにょごにょするケース

mongodbを使ってみる (7) - MapReduce -

2013-01-17T00:00:00+00:00 JavaScript MongoDB

MongoDBにもれなく付いてくる(笑)MapReduceを使ってみる。ただ使っても面白くないので

  • fluentdを使ってnginxのアクセスログをtailする
  • fluentdでパースされたアクセスログをfluent-plugin-mongoを使ってMongoDBにプッシュする
  • MongoDB MapReduce APIを使って、アクセスカウント統計を作る

という流れで

node.jsでdocument/window依存なスクリプトをグダる (2)

2013-01-14T00:00:00+00:00 JavaScript Node.js

node-jqueryがwindowなグローバルがあればXMLHttpRequestをロードしてくれるっていう事実が発覚したのですが

それは置いといて、node vm contextな扱いとかでrunnerなJS作ってnode.jsでjQueryを扱うテストとか色々出来ないかなーっと模索しているのですが、とりあえずやってみた(但し、QUnitとか除外)

node.jsでdocument/window依存なスクリプトをグダる

2013-01-13T00:00:00+00:00 JavaScript Node.js

例えばJavaScriptなUIコンポーネントというかなんかを書いて、それをテストする際にはQUnitだとか、操作エミュレーションではSelenium使ったりすると思うのですが。でnode.jsを使ってdocumentやwindowに依存するスクリプトを実行する場合どうするかって話。んまぁ要件により様々だとは思いますけど

でnode.jsのモジュールでjsdomっつーのがあって、それを利用してあーだらこーだらできねーかなーって思って色々やってみた

Chrome Extension開発を勉強してみる (23) - Event Pages -

2012-12-17T00:00:00+00:00 Chrome Extension JavaScript

何やらそういう仕様がある模様で。詳しい概要は省略するけど、要は「常に常駐しないバックグラウンドページ」っていう感じな模様

Chrome Extension開発を勉強してみる (22) - chrome.alarmsを使う -

2012-12-16T00:00:00+00:00 Chrome Extension JavaScript

Chrome Extensionで定期実行処理をやる場合だとchrome.alarmsを使う方が良い模様(理由はEvent Pagesに関係する模様。これに関しては後日)

でchrome.alarmsはバージョンによってはexperimentalになってたりする。例えばUbuntu12.04でChromiumだとchrome.alarmsはexperimentalでChromeだと正式で使用できる。又、ChromiumとかだとperiodInMinutesが使用できないとか色々あるみたいで

ということでminumum_chrome_versionを23辺りに設定して使う

Chrome Extension開発を勉強してみる (21) - chrome.experimental.commands - の補足

2012-12-03T00:00:00+00:00 Chrome Extension JavaScript

どうやら独自のショートカットだけでなく、Browser ActionやPage Action等のショートカットも設定出来る模様

sodaを使ってみる

2012-11-19T00:00:00+00:00 JavaScript Node.js

何やらNode.jsでSeleniumを使った検証が出来る模様な https://github.com/LearnBoost/soda っていうのがあるらしいので、ちょいと使ってみた

FuelPHPをやってみる (13) - Controller_Hybridを使う -

2012-11-16T00:00:00+00:00 FuelPHP JavaScript PHP

Controller_Template + Controller_Rest = Controller_Hybridらしい

Eclipse BIRTを使ってみる (4) - Scripted DataSetを使う -

2012-11-12T00:00:00+00:00 Eclipse BIRT Java JavaScript

例えば、データベースを利用しないでデータセットにJavaオブジェクトからの実行結果(List<Object>)をバインドしたい場合、Scripted DataSetを使う事でJavaオブジェクトを介した結果をデータセットにバインド出来る模様。なのでやってみた

Chrome Extension開発を勉強してみる (21) - chrome.experimental.commands -

2012-10-10T00:00:00+00:00 Chrome Extension JavaScript

を使えば簡単にブラウザにキーボードショートカットを定義出来る模様

Chrome Extension開発を勉強してみる (20) - chrome.experimental.identity -

2012-09-30T00:00:00+00:00 Chrome Extension JavaScript

chrome.experimental.identityを使う事でGoogle APIsを使う際にアクセストークンを取得したり出来るらしい。っていうかそもそもがmanifest_versionが2からは外部URLのスクリプトをロードするのですらCSPにより制限されているので(ry

Sinon.JSを使ってXMLHttpRequestをテスト

2012-09-29T00:00:00+00:00 JavaScript

Sinon.JSのfakeServerを使えばレスポンスをエミュレートする事も出来るらしいのでやってみた

Chrome Extension開発を勉強してみる (19) - chrome.experimental.socket -

2012-09-27T00:00:00+00:00 Chrome Extension JavaScript

chrome.experimental.socketなAPIを使って、TCPサーバーと接続してみる

Chrome Extension開発を勉強してみる (18) - chrome.experimental.infobar -

2012-09-26T00:00:00+00:00 Chrome Extension JavaScript

chrome.experimental.infobarなAPIを使ってみる

jqplot

2012-09-17T00:00:00+00:00 JavaScript

Google Analytics APIからアクセスデータを取得し、それを http://www.jqplot.com を使ってバーチャートとラインチャートをレンダリングしてみた

Google API Client Library for JavaScriptを使ってAnalytics APIに接続するメモ (2) - dimensionsとかmetricsとか -

2012-09-06T00:00:00+00:00 JavaScript

続き。今回は単純にAnalytics APIな件だけ、要件として、「アクセスされたページとアクセスした人の位置情報及びカウントを表示」。単純にgapi.client.analytics.management.profiles.list以降だけを修正する

Google API Client Library for JavaScriptを使ってAnalytics APIに接続するメモ

2012-09-05T00:00:00+00:00 JavaScript

ちょっと要件があって色々調べてました。そのメモなんですが、Google APIsの認証方式ってOAuth2だと思うのですが、OAuth2のRefresh Tokenだとかそういう所に関しては今回はノータッチです

でまるっきりやってる事は https://developers.google.com/analytics/resources/tutorials/hello-analytics-api と同じです。なので「英語ドキュメントなんて楽勝だぜ」ていう方はこの記事を読まない方が良いです

Native Client(NaCl)をやってみる (5) - C++を使う -

2012-08-27T00:00:00+00:00 C++ JavaScript Native Client

今までのはC言語でやってましたが、それをC++でやってみる

Native Client(NaCl)をやってみる (4) - dlopen(dlfcn.h)を使う -

2012-08-26T00:00:00+00:00 C JavaScript Native Client

Native Clientのデモにはdlopenっていうのが入ってるのですが、これを単純にやってみる。っていってもこれをそのまま動かすんじゃなくて、作ったtest.cをlibtest.soにして、それをNative Clientから使う(恐らくはNative Client環境のコンパイラを使わないと動かせれないんだと思われる。検証してないけど)

Chrome Extension開発を勉強してみる (17) - oauth.jsを使ってDropbox API -

2012-08-20T00:00:00+00:00 Chrome Extension JavaScript

タイトル通り。Chrome Extensionでoauth.jsを使いDropboxのアプリ領域なストレージにアクセスしてみる

Slim3でrespond_toもどき

2012-08-19T00:00:00+00:00 Java JavaScript

IndexController.java

package server_director.controller.profile;

import org.slim3.controller.Navigation;

import server_director.controller.ServerDirectorController;
import server_director.model.Profile;
import server_director.service.ProfileService;

import com.google.appengine.api.users.User;

public class IndexController extends ServerDirectorController {

    ProfileService service = new ProfileService();

    @Override
    protected Navigation run() throws Exception {
        User user = service.getUser();

        if (!service.isLogin() || user == null) {
            return redirect(service.createLoginURL("/profile"));
        }

        Profile profile = service.getProfile();

        requestScope("profile", profile);

        return forward("/WEB-INF/jsp/index.jsp");
    }
}

まぁてな感じで継承しているクラス以外は普通のSlim3コントローラークラス。もちろんコントローラー側でJSONに変換したりっていう処理は含まれない(あるがJSONに変換する処理自体はModelに。それは以下参照)

Chrome Extension開発を勉強してみる (16) - chrome.extension.connect -

2012-08-17T00:00:00+00:00 Chrome Extension JavaScript

chrome.extension.connectを使って、chrome.extension.sendRequestやonRequest等と同様な事をやってみる

Chrome Extension開発を勉強してみる (15) - chrome.storageを使う -

2012-08-14T00:00:00+00:00 Chrome Extension JavaScript

※Chromeのみ対応でChromiumは非対応な模様 (Daily Build版のやつは未検証)

タイトル通り、chrome.storage APIを使ってみた

Chrome Extension開発を勉強してみる (14) - file:// へのアクセスに関して -

2012-08-08T00:00:00+00:00 Chrome Extension JavaScript

permissionsに設定すればfile://なスキームアクセスも可能なのだけど

"manifest_version: 2"とContent-Security-Policy

2012-08-06T00:00:00+00:00 Chrome Extension JavaScript

前記事のChrome ExtensionでTwitter OAuthを利用してAPIを利用するっていうデモにおいて、manifest_versionを2にすると動かないっていうのが判明。理由がContent Security Policy(CSP)っていうのにひっかかるかららしい。例えば

Chrome Extension開発を勉強してみる (13) - oauth.jsでTwitter API -

2012-08-02T00:00:00+00:00 Chrome Extension JavaScript

oauth.jsを使ってTwitter APIを利用するのは前にもやったのですが、その際にはAccess Tokenをhttp://dev.twitter.comから発行してそのままコピペしてやったのでAccess Tokenを取得して云々するという所を完全にすっ飛ばした。なので今回はその処理を含めてやってみる

Chrome Extension開発を勉強してみる (12) - コンテキストメニューでブックマークを高階層で表示する -

2012-07-30T00:00:00+09:00 Chrome Extension JavaScript

単純に右クリックメニューで(ブラウザに保管されている)ブックマークが見れるようにする。で前回に書いたようにメニューをネストしつつ表示出来るようにしてみる

Chrome Extension開発を勉強してみる (11) - 多階層なcontextMenus -

2012-07-29T00:00:00+09:00 Chrome Extension JavaScript

というように多階層なコンテキストメニューにしたい場合

Chrome Extension開発を勉強してみる (10) - chrome.privacy -

2012-07-19T00:00:00+09:00 Chrome Extension JavaScript

chrome.privacyを用いてプライバシー情報に伴うようなデータの送信を抑制したり出来る模様。例えばリファラーを送信しないとか

Chrome Extension開発を勉強してみる (9) - webRequest -

2012-07-18T00:00:00+09:00 Chrome Extension JavaScript

webRequestを使う事でロードしている(しようとしている)のを取得したり、ヘッダーを書き換えたり出来る模様(但し、書き換えられるヘッダーは限られるっぽい)

Native Client(NaCl)をやってみる (2) - NativeClient側でメッセージ受信 -

2012-07-15T12:00:00+09:00 C JavaScript Native Client

前回のはNative Client側からメッセージングでデータを送信して、それをNative Clientを使ってる側から受信するっていうのをやりました。今度はそれを双方向性にしてみようと思います。まぁ単純に

  • Native Client側からHTML側にデータを送る
  • HTML側からNative Client側にデータを送る (で受け取ったらデータをHTML側に送る)

Native Client(NaCl)をやってみる

2012-07-15T00:00:00+09:00 C JavaScript Native Client

Native Clientを使ってC(又はC++)で書いたコードをChromeブラウザ上で動かしてみた

Chrome Extension開発を勉強してみる (8) - ominibox -

2012-07-14T00:00:00+09:00 Chrome Extension JavaScript

Chromeにはomniboxっていうアドレスバーにアクションを追加して候補を補完してくれたりする機能がありますが、これを作ってみる。

Chrome Extension開発を勉強してみる (7) - NPAPI -

2012-07-13T00:00:00+09:00 C++ Chrome Extension JavaScript NPAPI Python

nixysaを使ってNPAPIのC++なコードを拡張で使えるようにしてみる

Chrome Extension開発を勉強してみる (6) - Page Action -

2012-07-13T00:00:00+09:00 Chrome Extension JavaScript

ページアクションを使ってみる。ページアクションって何なの?として

てな感じでURLバーの右側に付けられるアイコンをクリックする事でポップアップなページを出せる事が出来る模様。但し、グローバルに常に出すような場合にはページアクションではなくブラウザアクションを採用するのが正しい模様。とりあえず上記の[S]なアイコンが出せるまでをやってみる

Chrome Extension開発を勉強してみる (5) - content script + background page -

2012-07-11T00:00:00+09:00 Chrome Extension JavaScript

コンテントスクリプトとバックグラウンドページを使って、表示画面中にある画像へのリンクをマウスオーバーした段階で別タブで開くっていうのをやってみる

Chrome Extension開発を勉強してみる (4) - onRequest+sendRequest -

2012-06-06T00:00:00+00:00 Chrome Extension JavaScript

chrome.extension.onRequestとchrome.extension.sendRequestを使って見る

Chrome Extension開発を勉強してみる (3) - 右クリック拡張でTwitter intent -

2012-05-31T00:00:00+00:00 Chrome Extension JavaScript

実際に使ってるのを例に書いてみる

要件

見ているWebサイトをTwitterのツイートフォームにタイトルとURLをツイートするのを支援する拡張機能。方式として右クリックメニューに拡張アプリのアイコンと名前を出してそれを選択する事で新しいタブにてツイートフォームのページを表示させる。サイトによっては共有ツールが無い場合があり、サイトをツイートしたりするのが何かとめんどくさいので(以前に)作ってみた

Chrome Extension開発を勉強してみる (2) - background pageでWebSocket管理 -

2012-05-28T00:00:00+00:00 Chrome Extension HTML5 JavaScript

とりあえず要件から

要件

WebSocketを使って送信されたメッセージを受信してHTML5 Web Notification?で表示する。又、サーバーがオチてる場合に再接続できる機能がある事

Chrome Extension開発を勉強してみる (1) - background_pageとgetBackgroundPage -

2012-05-21T00:00:00+00:00 Chrome Extension JavaScript

バックグラウンドページに関してなんですが、そいつ本体自体の話ではなくてブラウザアクション等からバックグラウンドページに定義されているJavaScript等を取得して実行する方法

Node.jsのrequire.cache

2012-05-07T00:00:00+00:00 JavaScript Node.js

Node.jsのrequireは読み込んだ後にその.jsファイルをキャッシュするような事は以前書いた。でこれ不都合な場合もある。それが「テストケース時にモジュールのprototypeを意図的に書き換えた場合にその後のテストケースにも影響する」っていうところがあるようで。

Node.jsのrequire

2012-05-03T00:00:00+00:00 JavaScript Node.js

  • requireで参照された場合に特定の処理を行わない
  • nodeコマンドによるスクリプト実行だと通常どおり処理を行う

というもの。なぜこういうのが必要になったのかと言うと、単純に実行を行うスクリプトとそれに伴うオブジェクト定義等を行うスクリプト(module.exportsする)を分けてしまえば良いだけの話になるのだけど、それをする為だけにわざわざスクリプト別にするという明らかにめんどくさい事の必要性ってないよねって思う所。んで、そうすると「じゃあこれどうやって単体テストするの?」って話になるわけで。なので1と2で処理を分ける、つまりrequireをした時は特定の実行コンテキストに及ぶ処理は行わない、そうする事でオブジェクト定義側を単体テストで流し込む事が出来るでしょうと。じゃあそれNode.jsでどうやるのって話。ドキュメントにそれらしいのがある

http://nodejs.org/docs/v0.6.15/api/all.html#all_accessing_the_main_module

「require.main === module」とい式自体がnodeコマンドにより実行された場合はtrueで、逆にrequireを使って処理された場合はfalseになるっぽい。という感じでやれば良いらしい。という事でテスト的に書いてみると

WebKit JavaScriptCoreで遊んでみる

2012-03-03T00:00:00+00:00 C JavaScript

相変わらず適当に。とりあえずWebKitGTK(3)で表示しているJavaScriptを評価して結果を取得して表示するだけ

Perl(Protocol::WebSocket)にJava(weberknecht)でつなぐ

2012-01-25T00:00:00+00:00 HTML5 Java JavaScript

要はPerl(Protocol::WebSocket)で作られたWebSocketサーバーにJavaのweberknechtっていうWebSocketライブラリを使って接続してブラウザ側で送信されたメッセージング等を取得したり出来るかっていう検証をやってみた

XMLHttpRequest.prototype.open by Unit Test

2011-12-20T00:00:00+00:00 JavaScript

nativeなメソッドっぽいのをコピーして云々してもエラーにしかならないみたいなので

webkitdirectory

2011-12-11T00:00:00+09:00 HTML5 JavaScript

webkitdirectoryとFile APIを使ってディレクトリにある画像を読み込んで<canvas>で表示するメモ

jQuery.bindの引数

2011-12-04T00:00:00+00:00 JavaScript jQuery

jQueryを使ってリンクを作ってonclickイベントを発生させたい場合にはbindを使えば良いけど、このイベントにデータを引き渡したい場合には第2引数にJavaScriptのObject型を渡して第3引数側にfunctionを指定する。そのfunctionの引数にはEventなObject型を持つ