Tag: JavaScript



2014年 9月 25

2014/9/20に開催されたGunma.web #17で話してきました。

発表スライド

コードはgithubに置いてあります。

jquery-vimize

webサイトをvim化するjQueryプラグインです。一応このブログに導入しているので動作確認出来ます。

コマンドはこの辺に書いてあります。

書いたキッカケ

もともと自分が書いたコードがあったのですが、ページトップに移動するコマンドがgだったのをとある方に「ggじゃないんですか?」って言われたのでちゃんと動くように書いてみました。

補足など

初めてのjQueryプラグイン作成なので勢いで書いた感じになっています。作法とかイマイチ分からないのですが、動けばいっか的な感じです。LTネタ思いついた時には1週間前だったのもあってあまり調べていません。

  • 移動はともかく / (or ?) で検索出来るの便利
  • 向いているサイトとあまり向かないサイトが有る
  • :cmdとgコマンドが使えるとやっぱりvimっぽい(気がする)

:cmdはスキなコマンドを追加できるようになっています。

今後

とりあえず :cmd を入力する時に画面には何も表示されないのでそれを直したいですね。あと、ブログのprev next に何かコマンド割り当てたい。

疑問

ところで、JavaScriptで enterキーの動作を他のキーで出来るように書けるのかな? oキーでリンク開けるようにしたい。

よく考えるとスマホファーストの昨今、時代遅れな感も…


Filed under: jQuery,勉強会,雑記

Trackback Uri






2012年 5月 3

120503-0001
https://twitter.com/#!/javascript_j/status/197743453881380865
ココらへんのツイートからふとやってみようかと。
もともとのツイートはこのあたり

SublimeLinter

Kronuz/SublimeLinter – github
リアルタイムで構文チェックを行なってくれる。
JavaScriptの他にも下記の言語に対応している(みたい)

  • CoffeeScript
  • CSS
  • java
  • Javascript
  • Objective-J
  • perl
  • php
  • python
  • ruby

Sublime Package Controlをインストール

SublimeLinterをインストールするには Sublime Package Control をインストール必要がある。
Sublime Package Control – a Sublime Text 2 Package Manager by wbond

SublimeLinterのインストール

Sublime Package Control をインストールすると メニューに preference> Package Control が追加されるので選択する。
メニュー

Install Package を選択。
sublime text2 Package Control

テキストボックスに「SublimeLinter」を入力する。一部でも可。
選択すれば自動でインストール開始する。
Package Control: install package

Node.jsとnpmをインストール

node.js site
JavaScriptでJSHintやJSLintを使うにはNode.jsが必要。
普通にmac用のインストーラー(node-v0.6.16.pkg )をダウンロードしてインストール。

Node was installed at

   /usr/local/bin/node

npm was installed at

   /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

JSHintのインストール

uipoet/sublime-jshint

  • JSHintはJSLintのフォーク。
  • JSLintを作った人はJavaScript Good Partsの著者らしい
    • JSLintはC言語並みにチェックが厳しいみたいなのでJSHintを使う
macbook:~ clicktx$ sudo npm install -g jshint
Password:
npm http GET https://registry.npmjs.org/jshint
npm http 304 https://registry.npmjs.org/jshint
npm http GET https://registry.npmjs.org/argsparser
npm http GET https://registry.npmjs.org/minimatch
npm http 200 https://registry.npmjs.org/argsparser
npm http GET https://registry.npmjs.org/argsparser/-/argsparser-0.0.6.tgz
npm http 200 https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/minimatch/-/minimatch-0.0.5.tgz
npm http 200 https://registry.npmjs.org/argsparser/-/argsparser-0.0.6.tgz
npm http 200 https://registry.npmjs.org/minimatch/-/minimatch-0.0.5.tgz
npm http GET https://registry.npmjs.org/lru-cache
npm http 200 https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/lru-cache/-/lru-cache-1.0.6.tgz
npm http 200 https://registry.npmjs.org/lru-cache/-/lru-cache-1.0.6.tgz
/usr/local/bin/jshint -> /usr/local/lib/node_modules/jshint/bin/hint
jshint@0.6.3 /usr/local/lib/node_modules/jshint
├── argsparser@0.0.6
└── minimatch@0.0.5 (lru-cache@1.0.6)

動作確認

Preferences->Package Settings->SublimeLinter->Settings – Default から下記の場所を false->trueに変えるとより強調される。

    // If true, lines with errors or warnings will have a gutter mark.
    "sublimelinter_gutter_marks": false,

    // If true, the find next/previous error commands will wrap.
    "sublimelinter_wrap_find": false,

SublimeLinterの動作

エラーがあるところは強調や下線等してくれる。
ただ、jQueryのコードとかになるとエラーばっかりになってしまうのが…。
手動モードにしたほうがいいのかも。

ちなみにちょっと頑張ったんだけど、Perlの構文チェックを有効にする方法が分かりませんでした…。

書籍

SublimeTextの本出たみたいですね!


Filed under: JavaScript,Mac

Trackback Uri






2011年 8月 24

とあるスクリプトで最初の実行時には正常に動作するのだけれど、同一ページを再訪問(リロードではなく)した時に不具合が出た。

webkit系のブラウザで不具合が確認できたのだけれど、どうやらgetElementById()でnullが帰っている様子。

ググってみると同じような現象で悩んでいる人もいるみたい。DOM構築前だとnullが帰る事もあるのが原因のようだ。

onLoadイベントとかはjQuery使っているのなら簡単に実装できるのだけれど、純粋JSで書いているスクリプトだし、他所様に配信するスクリプトなので解決方法を探る。

jQuery使っているのなら、$.ready(function(){…}) でいいのだろうけど、そうはいかない。じゃあ、onLoadイベントに登録すればいい。いいのだけど、onLoadイベントは1つしか実行できないので工夫が必要になる。

  • Javascript onloadが複数ある場合の対処法 ~FancyZoomとCubeブログシールを共存させる : ブログ・カスタマイズ徒然記
  • ここら辺の記事を参考に How to use multiple window.onload events with external scripts – Javascript FAQ – Tek-Tips にある addOnloadEvent を組み込んで対処する。

    処理的には document.write() でかいたHTML中にあるIDが付いたタグの中に別処理で作成したHTMLを放り込むもの。

    実行したい関数には引数を指定しているので、
    addOnloadEvent(function(){ print_image(hoge,fuga) });
    みたいな感じにすればonLoadイベントとして実行してくれる。

    そうすることで、getElementById()でnullが帰らなくなる。


    Filed under: JavaScript

    Trackback Uri






    2011年 6月 12

    とあるスクリプトで javascriptでiframeを書き、そのフレームをさらに書き換える・・・というものがあるのですが、スクリプトをページ内に複数設置すると、chromeでエラーになってしまうので回避策。

    今までは

    document.write('<IFRAME id="フレーム名" name="フレーム名" ....></IFRAME>');

    で描写して、ターゲットとなるiframeを

    var target_iframe = frames[フレーム名];

    で取得していたのですが、これが2度目以降の実行時にundefinedとなってしまう。

    var target_iframe = document.getElementById(ifrname).contentWindow;

    でもやはり取得できず。
    他のブラウザでは問題ないので気が付かなかったのだけれど、chromeのみ症状が出た。

    DOMでiframeを追加

    解決策としてはDOMでiframeを追加する事で望んだ結果が得られた。

    var iframe = document.createElement('IFRAME');
    iframe.setAttribute('id', 'フレーム名');
    iframe.setAttribute('name', 'フレーム名');
    ...
    document.body.appendChild(iframe);

    .. continue reading ..


    Filed under: JavaScript

    Trackback Uri






    2010年 5月 20

    自動でSSLページへ移動させるJavaScript

    ログインページ等でSSLのみのアクセスにしたいページがある場合、リンクをhttpsから始まるURL にしなくてはならないのでちょっと面倒。

    仮想パス(../aaa/bbb/ccc.html)やフルパス(/aaa/bbb.html)で既にサイトを公開している場合には、どこかしらで修正を見逃す場合もある。

    それならhttp でアクセスされた場合はhttps へ移動させればよさそう。
    head内とかに以下のJavascript を設置するだけでOK.

    <script><!-- change ssl protocol
      if (document.location.protocol==="http:")
      {location.replace('https://'+window.location.host+window.location.pathname);}
    //--></script>

    今までのパスを変更しないで済むので多少楽・・・かな。


    Filed under: JavaScript

    Trackback Uri