タグ

tipsとHTML5に関するnaga_sawaのブックマーク (3)

  • Webアプリの限界を超える方法 - Qiita

    他の投稿はこちら Webアプリの限界を超える方法(セキュリティ編) ブラウザで(WebUSBもActiveXも使わずに)FeliCaリーダーを読み込む ブラウザでブラウザを操作してスクレイピングを行う Webブラウザでシリアル通信を行う Webアプリの限界 経験豊富なwebプログラマなら、Webでは実現困難な機能を知っているでしょう。 ローカルの特定のパスに存在するファイルを自動的にアップロードしたい、 ブラウザからクローラーを起動して情報収集したい、などなど。 Webをよく知らない顧客や、技術不足のSEがそんな機能を開発しろと言い出します。 あなたは「セキュリティ上の理由から、ブラウザでそんなことは出来ない」と断ってきたことでしょう。 それ実現できます。そう、WebSocketならね。 WebSocket WebSocketがどのようにWebアプリの限界を突破するか、説明しましょう。 W

    Webアプリの限界を超える方法 - Qiita
    naga_sawa
    naga_sawa 2018/03/22
    ローカルアプリ前提/ブラウザとローカルアプリをWebSocketで橋渡しすると色々できそう
  • HTML5でルビ付き表示を行う方法(FirefoxとChromeのルビの扱い) - 結城浩のはてなブログ

    ケイクスでのWeb連載『数学ガールの秘密ノート』が始まりました。ところで記事の中で、ルビの扱いがブラウザで微妙に違うことにお気づきでしょうか。まずはこちらをご覧ください。 第1回 文字と恒等式(前編) はじめの方に、女子高生テトラちゃんのセリフ「……先輩は恒等式(こうとうしき)のお話をしてくださいましたよね」が出てきます。この「恒等式」の部分は、以下のようにマークアップしています。 <ruby> 恒等式 ←1. 単語 <rp>(</rp> ←2. カッコ開き <rt>こうとうしき</rt> ←3. ルビ <rp>)</rp> ←4. カッコ閉じ </ruby> ルビに対応していないブラウザ(Firefox)では、上記の1,2,3,4が表示されます。 ルビに対応しているブラウザ(Chome)では、上記の1,3を使ってルビ付きで表示されます。 その結果、以下のように表示されます。Firefox

    HTML5でルビ付き表示を行う方法(FirefoxとChromeのルビの扱い) - 結城浩のはてなブログ
    naga_sawa
    naga_sawa 2012/11/02
    Firefoxでもそれなりに見られるルビの書き方
  • 無職のプログラミング HTML5 Canvas + jQuery でドラッグ&ドロップ

    タイトルのとおり、drag&drop を HTML5 Canvasで実装してみた。 こちらで公開しています → HTML5 Canvasでドラッグ&ドロップ スタートボタンを押して実行してください。 実装してみてわかったことを簡単に解説する。 1. ソースコード 作成したソースコードは以下のとおり。jQuery は ver1.4.2 を使用。 ・html および共通の Canvas 描画クラス dtest.html  dtestcom.js ・drag&drop処理(1px 移動するごとに Canvas 更新) dtest1.js ・drag&drop処理(1/24秒ごとに Canvas 更新) dtest2.js 2. Canvas 更新方法について 「mousemove イベントが発生するたび更新」 → 「1px 移動するごとに更新」 → 「1/24秒ごとに更新」 の順にCPU負荷が小

    naga_sawa
    naga_sawa 2011/11/19
    Canvas 上でのDrag&Drop操作
  • 1