私の私による私のための記録

前回 はブログっぽいことを書いてしまって、役に立たない内容なので、今回はセットアップを残そうと思うのです。 Svelte これについてはまだ始めたばかりなので、よくわかってませんが、PugとStylusを使うことだけは決めてます。 Svelte自体やセットアップについては 世の中の詳しい人 に聞きましょう！ Pug と Stylus を使うには PugやStylusを使うには svelte-preprocess をインストールすればいいらしい。 Getting Started を参考にセットアップしていこう！ 開発環境のセットアップと"svelte-preprocess"のインストール $ npx degit sveltejs/template myApp $ cd myApp $ npm install -D svelte-preprocess "Pug"および"Stylus"のインストール $ npm install -D pug $ npm install -D stylus 次に rollup.config.js に修正を加えるのです。 "rollup.config.js"の追加修正 import sveltePreprocess from 'svelte-preprocess'; ... export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js' }, plugins: [ svelte({ preprocess: sveltePreprocess(), compilerOptions: { // enable run-time checks when not in production dev: !production } ...

 Svelteって知ってますか？かっちょいい！WEBフレームワークですぞ。 ※書いていたら、ダラダラした内容になってしまったので、セットアップは 次のブログ に書きました。 注） これ以降はつまらない昔話です。。。暇じゃない人は読まないほうがいいと思います。読んだりして文句を言わないでくださいな ★ これは老後の楽しみに書いているだけなので・・・ まあ、私のような昔人間には新しい環境を整えるのはなかなかハードルが高いものです。 ましてや、仕事で使うわけでもなく、趣味となればなおさら。。。 昔はJavascriptを一からガシガシ書いていたものです。。。「 Ajaxテクニックブック 」なる本が、私の本棚にはありますよ（笑）。「 Web2.0を実現する 」ってサブタイトルがついてるよ。WEB2.0って。。。ぷぷぷ。恥ずいね。prototype.jsをつかって色々やってますな。 prototype.jsを知らない人も今はたくさんいるんだろうね。。。WindowsExplorerという厄災ブラウザがお亡くなりになられたので、prototype.jsの使命も終わったのですね。時代を感じますな。。。 その後、すぐにjQueryが出てきたので、この本は必要なくなったのです（悲）なので、ほとんど読んでません。もう、役に立ちませんし、本自体はキレイです（笑） インデントでスタイル指定インデントでスタイル指定 jQueryが出てきたときには感動しました。そして、時代は進み・・・Vue.jsとはAngularとか色々と仮想DOMを使うWEBフレームワーク等が出てきて。。。Angular.jsをちょっと学習したら、次期バージョンは仕様がガラッと変わっちゃうし、もう、覚えんるの面倒くさいってなって、しばらく離れてましたよ！！ で、ある時WEBを散歩してたら、Svelteに出会ったんですね。。。 まだ、これからお付き合いを始めるところなのですが、いい感じです！！使いたくなりました。趣味で、ですけど（笑） しかーし、私はPUGとStylusにかなり依存する体になっちゃってるんですよね。 知ってます。 Pug って、これ使い始めるとHTMLで書くのが面倒になっちゃうんだよね〜。だって、 インデントでタグ付け 出来るんだよ。Pythonみたいでいい感じなのですよ。 HTMLの最大のウィークポ...

なんか、このブログの雰囲気が前と違うようなとは思っていたものの。。。 SyntaxHighlighterがなくなっていたとは！！ しかも、CDNでリンクしていたので、ページ表示がめちゃくちゃ重くなってた（笑） なので、 highlight.js を使うことにする。 まずは Usageのページ に従って、ヘッダーに以下を追加する。 スタイルは、 Demoページ から好きなのを見つけるのだ。 今回は、Draculaにしてみた。スタイルシートのファイル名は小文字で始まるらしい。なので「dracula.min.css」とする。 そして、言語別にjavascriptを追加するらしい。 ここではPythonを追加してみた！こちらもファイル名は「python.min.js」となる。 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/dracula.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script> <!-- 個別に使用する言語を追加する --> <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/python.min.js"></script> <script> hljs.highlightAll(); </script> 後はハイライトさせたいコードのところで、 (コード自体はテキトーに書いて実験！) <pre><code class="python"> class HelloWorld: def hello(self): print("Hello,World!...

最近作成しているWEBアプリケーションで、ページの拡大機能をつけようとCSSの zoom を使ってみた・・・ うん、うまくいったと思って、Firefoxで確認してみると、拡大しないぞ！！ なんと！zoomって元々IEの独自実装だったんだね。 Chromeでは動作したので、標準実装かと思ってた・・・・適当に覚えてたよ。 というわけで、いろいろ調べてみると、 transform プロパティの scale() を使えば解決しそうだ。 .css body{ transform: scale(2.0); /* 2倍に拡大 */ } ん？？？ なんと、拡大すると左上が隠れてしまうよ・・・ そうか、じゃあ translate() で移動しようという考えがチラホラ。。。 でも、どのくらい移動していいかわからないし、やり方が野暮ったいよねぇ。 で、さらに調べ見ると MDNにtransform-origin というそれっぽいプロパティを発見！！ .css body{ transform-origin: 0 0; transform: scale(2.0); /* 2倍に拡大 */ } はい、これで無事に拡大できました。 めでたし、めでたし。。。 ふんどしの持ち主 MDN

前回 、lesscをUbuntuに導入したけれど、やっぱり、いちいちコンパイルするのが面倒なので、自動コンパイルする方法を探すことに。。。 すると、 Dead Simple LESS CSS Watch Compiler なる素敵なソフトを発見！！ これを使えば、フォルダ内のファイルを更新すると自動的にコンパイルしてくれるぞ。 # npm install -g less-watch-compiler 使い方は # less-watch-compiler [less監視フォルダ] [css出力フォルダ] で、OK! これで、快適になりましたとさ。めでたしめでたし。 と、思ったら・・・ なんと、cssが圧縮(minify)形式だった・・・ 今回はCSS修正前提の納品物なので、圧縮形式はまずいね。 なので、ソースを修正する。 調べた結果「/usr/local/lib/node_modules/less-watch-compiler/lib/lessWatchCompilerUtils.js」を修正すればいいみたい！ --- /usr/local/lib/node_modules/less-watch-compiler/lib/lessWatchCompilerUtils.js.org 2016-02-17 22:22:47.930907153 +0900 +++ /usr/local/lib/node_modules/less-watch-compiler/lib/lessWatchCompilerUtils.js 2016-02-17 22:23:05.275173726 +0900 @@ -116,7 +116,7 @@ compileCSS: function(file){ var dirname = path.dirname(file).replace(lessWatchCompilerUtilsModule.config.watchFolder, "") + "/"; var filename = dirname +path.basename(file, path.extname(file)); - ...

最近、久しぶりにWEBページを作る仕事があった。 CSSがCSS3になっていろいろ出来るようになったので、うれしい今日このごろ。 マイクロソフトがIEの古いバージョンのサポートやめてくれたおかげで、いいことずくめですな。 で、前から気になってたLESSを導入しようと思って、Ubuntuで使えるコンパイラを探したとさ。 Windowsなら WinLess とかがあって、すぐに導入できるみたい。 Ubuntuでは、 node.js で書かれたのコンパイラlesscを使えば出来ると Onur Güzel さんが教えてくれています。 node.jsのパッケージ管理ソフトnpmを先ずは導入するみたい。この時ついでにnode.jsもインストールされます。 そんでもって、npmでlessをインストールすればOK!ってことらしいです。 # apt-get install npm # npm install -g less ただし、 Ubuntuでは node コマンドの代わりに nodejs コマンドになっている らしいので、ちょっと手を加える必要があるみたい。 Onur Güzelさんはlesscコマンドに手を加えているようですが、私はlesscコマンドに手は加えずnodeコマンドを使えるように。。。。。 # which nodejs /usr/bin/nodejs # cd /usr/bin # ln nodejs node nodeのハードリンクを作成しました。シンボリックリンクにするかは好みの問題で・・・ これで、無事、lesscコマンドが使えるようになるよ。めでたしめでたし。 次は： 自動コンパイル ふんどしの持ち主 Onur Güzel

Javascriptのフルスクリーン標準APIを実装しちゃうお話の完結編。 ※久しぶりに、このブログ見てたら、 前回 、 前々回 とコードが間違っていたので、修正しておいた。 f ullscreenElementの頭文字が大文字になってた・・・おそまつ。 で、ついでに修正版全コードと動作サンプルを載せておこうと思う。 ちなみにこのコードは将来、標準化されるであろうAPIを追加しちゃうものなのです。 独自関数は使わず、 Javascriptの潜在的パワー を活かして、 ベンダープレフィックスなし で、動作するよ ★ 次のfullscreen.jsを使うことによって、 requestFullscreen() 、 exitFullscreen() 、 fullscreenElement が利用できるようになるのだ！！ fullscreen.js Element.prototype.requestFullscreen = Element.prototype[( Element.prototype.requestFullscreen || Element.prototype.msRequestFullscreen || Element.prototype.webkitRequestFullScreen || Element.prototype.mozRequestFullScreen || {name:null}).name] || function(){}; document.exitFullscreen = document.exitFullscreen || document.msExitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || function(){}; if(!document.fullscreenElement) Object.defineProperty(document, "fullscreenElement",{ get : function(){ return( ...

HTTP接続で、リクエストを送信しても応答のないサーバがあった。 これが、なぜかわからずハマってしまった・・・ で、あまりにアホすぎて、もう一回やりそうなので書いておく。 その理由は、リクエストの改行コードが「 CR LF 」なのを忘れてた。 LinuxのPythonで書いてたから・・・すっかり忘れてた。 でも「 LF 」だけで応答を返すサーバがいるから、やっちまうんだよな・・・って人のせいにしておこう。 今回はLinux上でのエディタでコーディングしているので改行が「 LF 」、よって「 CR 」を追加するのに「 \r 」を使うのだ。 import socket port = 80 host = "localhost" path = "/" # ソケットの作成 sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) # リモートに接続 sock.connect((host, port)) req = """HEAD %s HTTP/1.1\r User-Agent: MyCode\r Host: %s\r Accept: */*\r \r """% (path,host) sock.send(req.encode("ascii")) data = sock.recv(1024) print(data.decode("ascii")) sock.close() ふんどしの持ち主 昔の私

あ、なんか、__defineGetter__()は MDNを見ると すでに非推奨ぽいな。 なので、 Object.defineProperty を使おうかな・・・ そんでもって、 前回のフルスクリーンのやつ を書き換えておく。 if(!document.fullscreenElement) document.__defineGetter__("fullscreenElement", function(){ return( document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || null); }); これを書き換えて、 if(!document.fullscreenElement) Object.defineProperty(document,"fullscreenElement",{ get : function(){ return( document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || null); } }); こんな感じになりましたとさ、めでたしめでたし。 修正：2016/02/09 [ソース中] FullscreenElement → fullscreenElement 追記： ベンダープレフィックスなしで、フルスクリーン表示 ふんどしの持ち主 MDN

前回 、requestFullscerrn()メソッドを追加を試したので、今回は、フルスクリーンの終了とエレメント取得も追加しておこう、 Internet Explorer Dev Center のソースを見るとベンター毎にFullScreenかFullscreenか(Sが大文字か小文字か)で微妙にちがうな。 前回のものと合体して、書きなおしておく。 今回はいっぱい書くのが面倒なのでjQueryも使った。 Element.prototype.requestFullscreen = Element.prototype[( Element.prototype.requestFullscreen || Element.prototype.msRequestFullscreen || Element.prototype.webkitRequestFullScreen || Element.prototype.mozRequestFullScreen || {name:null}).name] || function(){}; document.exitFullscreen = document.exitFullscreen || document.msExitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || function(){}; if(!document.fullscreenElement) document.__defineGetter__("fullscreenElement", function(){ return( document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || null); }); 上記のコードをJavascriptの先頭の方にいれておけば良い。ここまではjQueryは必要ないよ。 exitFullscreen()はdocumentオブジェクトの呼び出しだったので、そのまま上書きした。ちなみにwebkitには、webki...

JavaScriptで、フルスクリーン表示するには、 MDN を見るとまだ、ベンタープレフィックスがいるらしい。 ならば、ベンダープレフィックスなしで標準APIを使えるようにしたいね ☆ 初めは HAKUHIN's home page さんのコードを使おうと思っていたが。。。 将来、標準APIが採用された時のことを考えると標準メソッドとして使えるほうが良いと思ったので、自分でコーディングしておく。 そうすれば、APIの使い方も再学習しなくて良いし、将来的にはこの追加したJavascriptコードを捨てるだけで、済むからね ★　 (ハイ、ここ重要！！) でも、フルスクリーンのJavascriptをWEBで検索すると、 ほとんどの人は独自関数 にまとめちゃってるみたいですな。 Javascriptの凄さ をもっと活かしてほしいぞ！！ というわけで、requestFullscerrn()メソッドを使えるようにしちゃいます。 // requestFullscreenメソッドを有効にする Element.prototype.requestFullscreen = Element.prototype[( Element.prototype.requestFullscreen || Element.prototype.msRequestFullscreen || Element.prototype.webkitRequestFullScreen || Element.prototype.mozRequestFullScreen || {name:null}).name] || function(){}; 上記のコードをJavascriptの先頭の方にいれておけば良い。 後は、requestFullscreen()メソッドがあるものとして、エレメントから呼べばフルスクリーンになるはず。 <div id="fullScreen"> <h3>Full Screen Demo</h3> </div> var full = document.getElementById("fullScreen"); full.onclick = function(...