ラベル JavaScript の投稿を表示しています。 すべての投稿を表示
ラベル JavaScript の投稿を表示しています。 すべての投稿を表示

2011年2月2日水曜日

ChromeでDesktop Notificationしてみた

Chromeのみ。
GmailがChrome Extensionなしで新着通知してくれるようになったのでやってみた。
  • 許可を得ないと機能しない。
  • 許可を得るためにはユーザのアクションが必要。（自動的に許可を求めることはできない）
ということで、初めてボタンをクリックした時は許可を与えてやるべし。
それから、もう一回ボタンをクリックするべし。 
<input id="showNotification" type="button" value="show notification" onclick="showNotification()">
<script>
if (!window.webkitNotifications) {
  document.getElementById('showNotification').disabled = "disabled";
}
function showNotification() {
  if (window.webkitNotifications.checkPermission() == 0) {
    var icon = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzc7Z4tgITpt9OABl3LvK8zrzmRQPhszoIVx67rc6XsNGSnK3S3ZT9BS-FpJFK8fjNFKprTax2o0-lRRMz6f1nqdlsQ5Lb50aDVQSAc5tW_eIa45kTAggLtD2-2mrkEZDrJDvzT2LSAg/';
    var title = 'Chrome Notification Sample';
    var message = 'This works only with Google Chrome Web Browser.';
    var n = window.webkitNotifications.createNotification(icon, title, message);
    n.ondisplay = function() {
      setTimeout(function() { n.cancel(); }, 5000);
    };
    n.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}
</script>
投稿者 たくまけい 時刻: 18:19 0 コメント
ラベル:

2011年1月8日土曜日

開いているページのURLをQRコードにするブックマークレット

開いているページのURLをQRcodeにするブックマークレット(iPhone用)
※iPhone用の場合
  1. リンク先をブックマークに保存した後で
  2. 保存したブックマークのURLの先頭から「javascript:」までを削除すること。
javascript:void((function(){window.location.href='http://takumakei.blogspot.com/2011/01/qrweb.html?qrcodeInputText='+encodeURIComponent(window.location.href);})());
投稿者 たくまけい 時刻: 3:45 0 コメント
ラベル:

2011年1月7日金曜日

QRコードを作るWebアプリ




このページのQRコード

<!DOCTYPE html>
<html>
<head>
<title>QRcode</title>
<style type="text/css">
.qrcodecenter{margin-left:auto;margin-right:auto;text-align:center}
</style>
<script>
function updateQrcodeView() {
  var src = document.getElementById('qrcodeInputText').value;
  var qrcodeView = document.getElementById('qrcodeView');
  qrcodeView.src =
    'http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl='
    + encodeURIComponent(src);
  qrcodeView.style.visibility = 'visible';
  var qrcodeText = document.getElementById('qrcodeText');
  qrcodeText.innerText = src;
}
</script>
</head>
<body>
<div class="qrcodecenter">
<input id="qrcodeInputText" type="text" size="40" placeholder="text here">
<input type="button" value="QRcode" onclick="javascript:updateQrcodeView();">
</div>
<div class="qrcodecenter">
<image id="qrcodeView" style="visibility:hidden">
</div>
<div id="qrcodeText" class="qrcodecenter"></div>
</body>
</html>

2011/01/08 01:18am ちょっと修正
投稿者 たくまけい 時刻: 20:49 0 コメント
ラベル:

2010年12月18日土曜日

WebGLに触れてみる

WebGLとは「JavaScriptとネイティブのOpenGL ES 2.0のバインディング」だそうだ。 by wikipedia

「WebGLを試してみる」がわかりやすくて感動した。

Firefoxよりもchromeが好きなので、Canary Buildをインストールして再生準備完了。

子犬の写真がテクスチャとして貼ってある立方体がくるくる回ってるデモをみた。

早速ソースをみてみたら、VertexShaderとかFragmentShaderが何やってるのかわからなかったけど
メインのJavaScriptの部分はOpenGLを知っていればそれほど苦労せずに読めそう。

気になったのは、OpenGL ES 2.0はOpenGL ES 1.xよりも、いちいち面倒らしいということ。

それでも情報が増えてくれば負担は軽くなっていくだろうし
だれかが、便利な「なんとか.js」を作って公開してくれるだろうから
全力で待っているフリをしてみることにする。
投稿者 たくまけい 時刻: 18:43 0 コメント
ラベル: , ,

2010年11月27日土曜日

HTML5でファイルのドラッグアンドドロップしてみた

jQueryとSyntaxhighlighter使って、HTMLファイルを読みやすくしてみた。
ファイルのドラッグアンドドロップよりも、むしろ、SyntaxHighlighter.highlight()に気づくまで時間かかった。

Chrome 7.0.517.44とFirefox 3.6.10で動いた。
IE8とSafari 5.0.2は動かなかった。

ここにHTMLファイルをドロップする。

Drop your html files here.

<style>
.drophere {
  padding: 0.25em;
  width: 50%;
  border: 1px solid #666;
  background: #eee;
}
.dragover {
  background: #8f8
}
</style>
<div id="dropzone">
<div class="drophere" align="center">ここにHTMLファイルをドロップする。<br/>
Drop your html files here.</div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function(){
  $('#dropzone .drophere')
    .bind('dragenter', function(ev) {
      $(ev.target).addClass('dragover');
      return false;
    })
    .bind('dragleave', function(ev) {
      $(ev.target).removeClass('dragover');
      return false;
    })
    .bind('dragover', function(ev) {
      return false;
    })
    .bind('drop', function(ev) {
      $(ev.target).removeClass('dragover');
      var dt = ev.originalEvent.dataTransfer;
      for (var i = 0; i < dt.files.length; ++i) {
        var file = dt.files[i];
        var reader = new FileReader();
        reader.onloadend = function() {
          $('#dropzone')
          .append(
          $('<pre/>')
          .html($('<div/>').text(reader.result).html())
          .addClass('brush: html'));
          SyntaxHighlighter.highlight();
        };
        reader.readAsText(file, 'utf-8');
      }
      return false;
    });
});
</script>




投稿者 たくまけい 時刻: 2:33 0 コメント
ラベル: ,

2010年6月27日日曜日

JavaScript on Java で Swing してみた

コードを書きまくって指が痛くなり、
もっとサボらなくちゃいけないと思い、
Javaの代わりにスクリプト言語で書くという選択肢にたどり着く。

「Javaの代わりにスクリプト」 == 「Groovy」 かなぁ？

「Javaの代わりにスクリプト」 == 「JRuby」 かなぁ？

そうこうしているうちに、Scripting for Java Platform。こんな機能、知りませんでした。


JS.java
import java.io.FileReader;

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class JS {
    public static void main(String[] args) throws Exception {
        ScriptEngineManager m = new ScriptEngineManager();
        ScriptEngine e = m.getEngineByName("js");
        FileReader source = new FileReader("swing.js");
        try {
            e.eval(source);
        } finally {
            source.close();
        }
    }
}


swing.js
importPackage(java.awt);
importPackage(java.awt.event);
importPackage(javax.swing);

var frame = new JFrame("Sample");
frame.setLayout(new FlowLayout());

var button = new JButton("OK");

button.addActionListener(new ActionListener({
  actionPerformed: function(event) {
    JOptionPane.showMessageDialog(frame, "JavaScript on Java で Swing");
  }
}));

frame.add(button);

frame.setSize(100, 100);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
frame.setVisible(true);


参考
言語の中の言語 - Scripting
スクリプティング機能

ところで、スクリプト言語に換えたところで指の痛みは軽減できないことに気がついた。
「スクリプト使う→打鍵数が減る→プログラムが早くできあがる」だけだった
別ののサボり方を探そう。
投稿者 たくまけい 時刻: 0:01 0 コメント
ラベル: ,

2010年1月19日火曜日

StringプリミティブとStringオブジェクトの微妙な違い

へぇ～。

...JSにはStringオブジェクトと、いわゆるプリミティブ型の文字列がある...
投稿者 たくまけい 時刻: 21:25 0 コメント
ラベル:

2009年8月21日金曜日

QRコードをAS3とかJavaScriptとかで実装したライブラリ

これは便利かも。
AS3とJavaScript
投稿者 たくまけい 時刻: 16:08 0 コメント
ラベル: ,

2009年4月15日水曜日

Flex 3 beta 3でRESTfulの記事みつけた


Flexのインストールからアプリの作成まで、図入りで丁寧に説明してくれている。
読みやすそう。

記事の内容だけでなく、ソースコードの表示に使っているdp.SyntaxHighlighterが気になった。

いいな～
投稿者 たくまけい 時刻: 19:23 0 コメント
ラベル: ,

2009年4月4日土曜日

見え隠れするコード領域 

toggleMyCode.js
<script type="text/javascript">
 function getNS(children, target, found, index){
   if(children.length == index){return null;}
   if(found){return children[index];}
   if(target == children[index]){found=true;}
   return getNS(children, target, found, index+1);
 }
 function toggleMyCode(me){
   var item = getNS(me.parentElement.children, me, false, 0);
   if(!item){ return; }
   var style = item.style;
   if('none' == style.display){
     style.display = 'block';
   }else{
     style.display = 'none';
   }
 }
</script>
投稿者 たくまけい 時刻: 20:08 0 コメント
ラベル: ,

2009年3月31日火曜日

JavaScriptでWYSIWYGエディタへの道

JavaScriptのWYSIWYGエディタは世の中にたくさんあるけれど、いったいどうやって実現しているんだろう？
…と気になってしまって夜も眠れなくなりそうになったのでちょっと調べてみた。

最初に見つけたのは、iframeを作ってcontentEditable = trueにする方法だった。

contentEditable.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>contentEditable</title>
<script type="text/javascript">
//<![CDATA[
var o = null;
var f = null;
var d = null;
var b = null;
var la = null;
function findBody(doc){
  for(var i = 0; i < doc.childNodes.length; ++i){
    if(doc.childNodes[i].nodeName == 'HTML'){
      for(var j = 0; j < doc.childNodes[i].childNodes.length; ++j){
        if(doc.childNodes[i].childNodes[j].nodeName == 'BODY'){
          return doc.childNodes[i].childNodes[j];
        }
      }
    }
  }
  return null;
}
function onLoad1(){
  o = document.getElementById('o');

  f = document.getElementById('f');
  d = f.contentDocument;
  b = findBody(d);
  d.charset = 'utf-8';
  b.contentEditable = true;
  b.innerHTML = '<div>HELLO WORLD</div>'
              + '<font style="color:red;">red string</font> '
              + '<a href="http://www.google.com/">google</a> '
              + '<font style="color:blue;">blue string</font>'
              + '<div>editable</div>';
  b.focus();
}
function test1(){
  var s = f.contentWindow.getSelection();
  for(var i = 0; i < s.rangeCount; ++i){
    var r = s.getRangeAt(i);
    la = r;
    var fragment = d.createDocumentFragment();
    var div = d.createElement('div');
    div.innerHTML = '<font style="color:green;font-size:large;font-weight:bold;">'
                  + r + '</font>';
    while(div.firstChild){
      fragment.appendChild(div.firstChild);
    }
    var container = r.startContainer;
    var offset = r.startOffset;
    r.deleteContents();
    switch(container.nodeType){
    case 1:
      container.insertBefore(fragment, container.clidNodes[offset]);
      break;
    case 3:
      var node = container.splitText(offset);
      node.parentNode.insertBefore(fragment, node);
      break;
    }
  }
}
//]]>
</script>
</head>
<body onload="javascript:onLoad1()">
hello
world<br/>
<iframe name="f" id="f" src="about:blank" width="200" height="150"></iframe><br/>
<input type="button" value="test1" onclick="javascript:test1()"/><br/>
<span name="o" id="o">...</span>
</body>
</html>

※注意※IEでは動きません。
投稿者 たくまけい 時刻: 23:44 0 コメント
ラベル:

2009年3月19日木曜日

Bluffでグラフ描画

以下、配布サイト(http://bluff.jcoglan.com/)からの抜粋。

BluffはGruff graphing library for RubyをJavaScriptに移植したもの。
他のライブラリへの依存を最低限にしつつ、Gruffの全ての機能をサポートするようにデザインした。
必要なサードパーティーのスクリプトはJS.Class(約2kb gzip圧縮時)と、Internet Explorerでcanvasをを使えるようにするGoogleのExCanvasだ。
これら２つのスクリプトはBluffと共に提供されている。Bluff自身はgzip圧縮時に約8kb程度。

とのこと。

で試しに書いたスクリプトが以下。

<html>
<head>
<script language="javascript" src="js-class.js" type="text/javascript"></script>
<script language="javascript" src="bluff-min.js" type="text/javascript"></script>
<script language="javascript" src="excanvas.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function drawSample(){
  var g = new Bluff.Line('example', 800);
  //g.theme_keynote();
  //g.theme_37signals();
  //g.theme_rails_keynote();
  //g.theme_odeo();
  //g.theme_pastel();
  //g.theme_greyscale();
  //g.hide_line_markers = true;
  g.hide_dots = true;
  //g.hide_legend = true;
  g.minimum_value = 0;
  g.maximum_value = 200;
  g.x_axis_label = 'Year';
  g.y_axis_increment = 25;
  g.zero_degree = 90;
  g.title = 'グラフ描画サンプル';
  g.data('Apples',  [1,2,3,4,4,3,4, 1,2,3,4,4,3,4]);
  g.data('マンゴー',[3,4,5,6,7,8,9, 10,12,13,140,15,16]);
  g.data('Oranges', [4,8,7,7,3,1,4, 4,8,7,7,3,1,4]);
  g.data('なにか',  [100, 120, 100, 119, 98, 102, 100, 100, 120, 100, 119, 98, 102, 100]);
  g.labels = {0:'2003', 4:'2004', 8:'2005', 12:'2006' };
  g.draw();
}
</script>
</head>
<body onload="drawSample()">
<canvas id="example" width="100%"></canvas>
</body>
</html>
投稿者 たくまけい 時刻: 10:44 0 コメント
ラベル:
登録: 投稿 (Atom)