JavaScript

Promiseとasyncとawait

Promiseとasync、awaitの使い方を理解するために書いたサンプルコード。 setTimeoutを使って1秒後に画面に文字列を出力する。 Promiseとthen() Promiseオブジェクトの生成とthen()メソッドの利用例。 <html> <head> <meta charset="utf-8"/> <title>Promiseとthen()</title> </head> <body> <button onclick="main()">Run</button> <div id="output"> </div> <script> function print(text) { …</body></html>

DjangoフレームワークとVue.js (Vuex)を使ってアプリケーションを作る

以前作成した DjangoフレームワークとVue.jsを使ってアプリケーションを作る - 偏った言語信者の垂れ流し の、Vuex対応版です。 よかったらGitHubでStarをつけてください! github.com controllerとしていた部分を、VuexのStoreに書き換え、Vueコンポーネン…

DjangoフレームワークとVue.jsを使ってアプリケーションを作る

DjangoフレームワークとVue.jsでアプリケーションを作る例として、テキストを編集保存するシンプルなノートアプリケーションを作ってみました。 github.com Djangoのサーバーサイドレンダリングを使いつつ、Vueを組み合わせる一例として参考になればよいかな…

$scopeをng-controllerの外から参照する

メモ。AngularJSの$scopeをng-controllerの外から参照する方法。 angular.elementを使ってDOMをラップしたオブジェクトを取得し、scopeメソッドを呼ぶ。 AngularJS: API: angular.element 試したのはAngularJS 1.2.27。 test.html <html> <body> <button type="button" onclick="test()">test</button> <div ng-app="myApp"> </div></body></html>

PhantomJSを試してみる

スクレイピングとかテストに便利ってことで聞いてたPhantomJSを試してみる。 PhantomJSはヘッドレスのWebKitをJavaScriptAPIで使えるようにしたもの。ライセンスはNewBSD。 PhantomJS | PhantomJS PhantomJSにはJavaScriptの実行環境が含まれているが、Node.…

ページタイトルとURLを表示するブックマークレット

ちょっとほしくなって作ってみた。Chromeで動作確認。 javascript:(function(){var title = document.title; var url = document.location.href;var elem = document.createElement("div");elem.setAttribute("style", "position: fixed;top:0;left:0;font-s…

GoogleMaps API V3を使ってルート検索など

今更な感じですが、使う機会があったのでメモ書き。 Google Maps JavaScript APIのV3を使ってルート検索を行うまで。 ルート検索は google.maps.DirectionsService を使って行います。V2の場合は GDirections だったのかな。 <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> </meta></head></html>

DateのsetMonthではまった

javascriptのDateのsetMonthにやられたのでメモ。 月末とかではまる。 コード <html><body> <script type="text/javascript"> var d = new Date(); // 8月31日 document.write(d + "<br>"); var month = d.getMonth(); // 8月なので7 document.write(month + "<br>"); d.setMonth(month + 1); // +1ヶ月しようと</body></html>…

markItUp!用のreStructuredTextのセットを作った

マークアップ用のエディタmarkItUp!用のreStructuredTextのセットを作りました。 tokibito / markitup-rst-set — Bitbucket

IEでjsonにやられた

まあIEですから。jsonのレスポンスでタグをエスケープしてないとIEでXSSできてしまうという話。 {test: "<html><script>alert(document.cookie)</script></html>"}こんな感じのレスポンスを返すページをIEで読ませる。 test.py #!/usr/bin/env python from wsgiref.simple_server import ma…

ErlangでComet

メモ。 id:Voluntasから「ErlangでCometサーバを書いたからデザイン頼む」といわれてちょこちょこCSSとか書いてました。 http://www.bitbucket.org/voluntas/timeline/overview/

継承というか

JavaScriptをまともに勉強したのは初めてかもしれん。とりあえず prototype.js はいろいろうんざりさせられた過去があるので jQuery 使ってる。 継承てどう実装するんだろうと思っていろいろ調べてた。JavaScriptだと日本語の情報が結構あるなー。 最初はObj…

TrimPathのJavaScriptTemplatesを使ってみる

JavaScriptで書かれたTrimPathのテンプレートエンジンを使ってみる。 sample.html <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>trimpath template sample</title> </meta></head></html>

The AJAX Libraries API

駄文 - これは - IT戦記 経由で Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | マイナビニュース より、 Googleが人気Ajaxのライブラリのホスティングをしてくれるらしい。 どうせやるのならGoogleCodeと連携して、プロジェクトの…

小さなAjaxライブラリを作ってみた

ごりごりJavaScriptを使う必要は無いけど、Ajaxは使いたいというときに便利かもしれない。 $Ajax = { 'createHttpRequest': function() { if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new A…

フォーカスされたテキストボックスの背景色を変更する

先日の、フォーカスされたテキストボックスの背景色を変更する - 偏った言語信者の垂れ流しをprototype.jsでイベントを登録するようにした。 Event.observe(window, 'load', function(){ function input_focused() { this.style.backgroundColor="#DFF"; } f…

フォーカスされたテキストボックスの背景色を変更する

メモ書き。 フォーカスされたテキストボックスの背景色を変更するには次のようにする。 window.onload = function(){ function input_focused() { this.style.backgroundColor="#DFF"; } function input_blured() { this.style.backgroundColor=""; } len = …

自作プレゼンツール

先日のPython Developers Camp 2008で使用していたプレゼンツールです。 amachangのs6とmichilu.comのreSTの組み合わせを自作コンテナで動くように調整して使ってました。 Windows専用*1です。 コンテナはコマンドラインから動かしたりもできます。 例えば以…

Djangoの管理画面でFCKeditorを使う

django-fckconnectorを利用して、Djangoの管理画面でFCKeditorを使う方法について紹介します。 使用しているDjangoはSVN版(rev.6903)です。django-fckconnectorはrev.9です。FCKeditorはver.2.5です。 django-fckconnectorのインストール SVNで、リポジトリ…

ソースビューワのプログラム一式

instantな状態でソースビューワをまとめてみた。 http:///static/file/instant_wsgicontainer.exe ファイルサイズに注意、19MBあります。公開は期間限定、そのうち中身変わってたりします(多分 展開してstart_container.batを開くと、コンテナが起動します。…

WSGI Containerでソースビューワを作ってみた

コンテナにドロップしたファイルのパスを、AjaxでDjangoに渡してPygmentsでハイライト。結果をExtJSのウィンドウで表示してみた。XHRが何故かPOSTにならなかったので、GETで作ることにした。 まあ、使えるかどうかって言われると微妙な代物ですが。こんなの…

IEでthisがうまく動かない

prototype.jsのobserve()などでイベントを登録した場合に、IEではthisをうまく参照できないのだが、どうやればいいのだろうか。 やりたいことは、JavaScript側でイベント登録をして、呼び出された関数内で自身のエレメントを参照したいのだけど・・・。 追記…

ExtJSのデスクトップをWSGI Containerで動かしてみた

ExtJS 2.0のdesktopサンプルが出ていたので、WSGI Containerで動かしてみた。 表示が少しおかしい。IEで見た場合は問題なかったのでコンテナ側の問題のはずだが、原因がよくわからない。 ウィンドウやメニューは特に問題なく動作したので、チューニングすれ…

WSGI Containerへファイルをドラッグアンドドロップ

WSGI Containerへファイルをドラッグアンドドロップできるようにした。 ファイルをドロップすると、JavaScriptでcontainerFileDrop(list, x, y)を呼ぶ。

コンテナでExtJSのウィンドウを表示してみた

カテゴリタグが多くてごめんなさい。 ウィンドウの表示ができたので、早速コンテナで動かしてみた。ウィンドウの中身をautoLoadで読み込もうとしたけど、Loadingからすすまない。 汎用のAjaxコードで試してみたら普通に通った。 reSTのビューワでも作ってみ…

ウィンドウを表示してみる

ExtJSのサンプルを参考にして、ウィンドウを表示するコード書いてみた。 window.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Window Test</title> <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" /> <script type="text/javascript" src="./adapter/ext/ext-base.js"></link></meta></head></html>

ExtJSの可能性

ここ最近、ExtJSの紹介が各所でされているようで。 まあGUIのコンポーネントがすごいってのはどこでも言われてるので割愛。 ソースをいくつか見たけどクラスやイベントがよくまとまってていいね。ここまでくるとDelphiのRADのような開発環境がほしくなる。パ…

WSGI Containerへファイルを渡す機能など

ちまちまと更新しているWSGI Containerですが、今回は本格的にアプリを作るために必要な機能を少し実装していました。 今回作成した "containermanager.exe" はコンテナの起動と、ドロップされたファイルのパスをコンテナに通知する機能を持っています。 ド…