Vim で javascript 書くためにやってる設定 | バシャログ。
杉の木を伐採しまくるバイトを始める夢を見ました・・・。みなさん、こんにちは nakamura です。 前回 Vim で PHP 開発するための設定 を書きましたが、今回は Vim で javascript を書くための設定をいくつかご紹介しようと思います。（基本は前回 PHP 用に行った設定の javascript 版です） 関数名などの自動補完 PHP と同様に辞書ファイルを用意して neocomplecache で補完するだけです。辞書ファイルは以下からjavascript.dict と jQuery.dict を拝借して $HOME/.vim/dict/ に置きました。 config/vim/dict at master · guileen/config · GitHub （ただちょっと古いんだよな～・・・。自動生成するスクリプト軽く書こうかな・・・。） .vimrc autocmd
ライブラリを使わないでDOMにアクセスするJavaScriptを書いたときにはまった2つのこと | バシャログ。
タスク管理するのに手帳を使おうとして2週間で挫折したので、iPhone & Mac でできないか挑戦している tanaka です。 最近、諸事情により jQuery などのライブラリ を使わずに DOM を操作する JavaScript コードを書く機会がありました。ある程度はライブラリなしで書いたこともあるし、そんな大変じゃないだろう…と思っていたら、想定外に時間がかかってしまいました。(多くはレガシーなIE対応ですが…)そんなわけで、ライブラリを使わないで JavaScript を書いたときに遭遇した問題2つを紹介します。サンプルコードはQUnitでテストを書き、テスト実行＋コードリーディングすることでIEとそれ以外のブラウザの違いが理解できるようにしました。 IE 7以下で setAttribute('class', [classNames])/getAttribute('class
vim から PHP_CodeSniffer を利用する方法 | バシャログ。
ノートパソコンを、自転車に乗りながら持ち運べるように、バッグを買った tanaka です。 今日は、PhpStorm で CakePHP のコーディングスタイルを自動チェックする - バシャログ。に関連して、vim で PHP_CodeSniffer を実行する方法を紹介します bpearson/vim-phpcs ･ GitHub を使う 実際使うにあたっては、プロジェクトごとにコーディングルールが自動設定できるか？という点が重要だと思います。bpearson/vim-phpcs ･ GitHubというプラグインを試したところ、後述する、vimrcの設定と組み合わせることで、できました。 とりあえずこれをインストールします。 インストールについては一般的なインストール方法と同じなので省略します。GitHubなので、Shougo/neobundle.vim ･ GitHubを使って簡単にイ
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
コーディングの効率化に効くと評判のツールを手軽に試せるサイト(+アドオン)4つ | バシャログ。
桜はまだか。hakoishiです。 さて、web制作界隈は次々に便利なツールが登場してきます。 「便利と評判のあのツール、使ってみたいけど導入が手間で…」 そんな時、web上で手軽に試せるツールがあったりすると嬉しいですね。 ってことで、今回はそういったツール達のご紹介です。 zen-codingを試す JavaScriptフレームワーク各種を試す LESSを試す vimを試す zen-codingを試す マークアップ効率化 - zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog) 「基本的な記法」まで移動して、各デモ欄の文末でtabを押してみてください。結構感動しますよね。 編集するとそれも反映されますので、いろいろ試してみてください！ 【参考】 物足りなくなったら、こちらも。 kzms2 zen-coding editor JavaScriptフ
PhpStormでjsTestDriverを使ったテストを実行する | バシャログ。
いま、テスト駆動JavaScriptを読んでいます。テストツールを使ってJavaScriptをマスターしようという本です。そして後半ではアプリケーション開発にテスト駆動開発を適用するみたいです。中級技術者向けと書いてあるだけあって、少しはJavaScriptの本を読んだことが私でも、結構難解です。でも読み甲斐があります。そして、JavaScriptのコア、パターン、テスト、非同期処理、など多くのことが学べる本です。 この本では、ほぼ全編にわたってjsTestDriverが使われています。私はPhpStorm使いなので、今日はjsTestDriverプラグインで、この本のコードを動かすのを紹介します。 インストール とても簡単です。Settings(またはpreferences)→Plugins→Browse Repository...ボタンを押します。 インストールできるプラグインの一覧が
WebStorm (PhpStormでも可)のコードテンプレート機能を使う | バシャログ。
PhpStorm / WebStormを布教したいと思いつつ、PhpStormを使っているtanakaです。今日は、JavaScriptのプログラムを書くのを楽にするコードテンプレート機能(JetBrains製品ではLive Templateと言います)の解説をします。WebStormでももちろん使えます。 Live Templateを使うとこんな風に便利 たとえば、jQueryのコードを書いていて、次のようなコードを書きたくなったとします。 $('#target').click(function () { // awesome effect }); $('#target').click の部分は毎回違うのですが、function () { ... }てのは毎回一緒ですね。私はこの部分を"af[Space]"の3回タイプで呼び出せるようにしています。つまり、 ここで af[space] と
jQueryのためのテストツール QUnit でテスト駆動開発入門を写経する | バシャログ。
こんにちは！まだまだ開発者テスト修行中のktanakaです。 今日は、jQueryについてくるユニットテストツールのQUnitで遊んでみます。 QUnitの概要 QUnitはjQueryプロジェクトの為のユニットテストツールです。(QUnit - ABOUTより)有名な各種xUnitフレームワークよりチェックのための関数も少なく、シンプルに書けそうな感じです。そしてなによりブラウザ上でテストが走ります。 Using QUnitを見るとテストに必要なものがわかりますが、必要なファイルは、jquery.js, QUnitのテストランナー(testrunner.js)とスタイルシート, テスト対象のコードとテストコードです。 Moneyオブジェクトの例を写経 いきなりjQueryプラグインのテストとか心臓に悪そうなので、普通のテストをやってみます。(dollar.test.js) ちなみにこのエ
github のキーボードショートカットが何気にすげー便利な件 | バシャログ。
ボジョレーなのかボージョレなのかいい加減はっきりしてくださいよ！・・・どうもこんにちは nakamura です。 ちょ～っとマニアックなネタですが、github 上での操作を少し楽にしてくれるキーボードショートカットの機能が何気に便利だったので、よく使いそうなものを中心にいくつかご紹介しようと思います。よくよく見てみると『なんじゃこりゃ！？』っていうようなすごい機能があったりして github は面白いですね～。 使用例 j, k - 一覧でのフォーカス移動 Issues やコミット一覧で、フォーカスを上下に移動します。↑、↓が面倒くさい人向け。Vim ライクですね。 s - 検索フォームにフォーカス 画面右上の検索フォームに一瞬でフォーカスしてくれます。 w - ブランチの切り替え ブランチ、タグの切り替えウィンドウを開いてくれます。↑、↓でも選択できますし、テキスト入力で絞り込みもでき
ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった！後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book
jQuery 1.7の on() off()について調べてみた | バシャログ。
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
SE・プログラマが知ってると便利な脆弱性チェックツール 5 つ | バシャログ。
東京ラーメンショー2011 いきてーーー！みなさんこんにちは、nakamura です。 今日はプログラマだったりサーバ管理者だったり（もしくはその両方だったり）する方にお勧めしたいサイトとツールをいくつかご紹介します。細かい脆弱性のチェック等どうしても手間が掛かるものが多いですが、今回ご紹介するツールをうまく使うとその辺りだいぶ効率よくできると思いますよ！ WEB アプリケーション関連 XSS Me XSS Me :: Add-ons for Firefox XSS のテストをある程度自動化してくれる Firefox のアドオンです。残念ながら Firefox3.0.* 系の頃に開発が止まってしまっているようですが、僕の環境では install.rdf の書き換えで問題なく動作しています。（Windows7 64bit + Firefox7.0.1） SQL Inject Me SQL I
[vim] plugin の管理に neobundle.vim を使ってみる | バシャログ。
忍び寄る冬の気配に戦々恐々な nakamura です。早く沖縄オフィス作ってくださいよ。 そこまでヘビーに使い込んでいるわけではないですが、基本 Linux 上では vim をエディタとして使っています。プラグインなんかもムチャクチャいっぱいありまして、確かに vim をメインのエディタにする気持ちも分かるってなもんですが、前々からメンドクサイなぁと思っていたのがそのプラグインの管理です。今日はその辺りを自動化してくれる neobundle.vim をご紹介します。 インストール プラグインのインストール・アップデートなどを簡単にしてくれる neobundle.vim ですが、それ自体はまず手動で設置する必要があります。（一旦インストールしてしまえば、その後は neobundle.vim 自体も自身で管理できます） 今回はホームディレクトリの .bundle 以下でプラグインを管理するとし
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
モダンなIDE PhpStormのPHPエディタ機能 | バシャログ。
いまさら、ニンテンドーDSのレイトン教授シリーズを1作目からプレイしているtanakaです。今日は、もう半年弱つかってるIDE PhpStormのPHPエディタのお気に入りポイントを紹介します。コードの不備を指摘してくれるので、使っていて安心できますよ お気に入りその1 ローカル変数が使われているかチェックしてくれる 代入した変数が使われているかチェックしてくれる機能…っていうと、他のIDEでもあるかもしれません。上の画像を見てください。$val1 は後で使われているので、警告されません。$val2は使われていないので、警告が出ます。最後が渡しのお気に入りのポイントで、$val3に注目してください。直接ソースコードで参照してはいませんが、compact関数で利用されていることがきちんとチェックできています。CakePHPフレームワークで、コントローラからビューにデータを渡すときに、このco
[Titanium Mobile]設定情報などをアプリ内で共有するためのメソッドを作る | バシャログ。
とかく不健康な生活になりがちなので週に1,2回ジムに通うことにしたtanakaです。 今回は、Titanium Mobile でアプリ内の設定値を書いたり読んだり出来るしくみを考えてみました。 次のような感じで使えるものを考えます。 Ti.App.Conf.set('jojo3', 'オラオラオラオラ'); Ti.API.info(Ti.App.Conf.get('jojo3')); // →出力：オラオラオラオラ Ti.App.Conf.set('jojo3', '無駄無駄無駄無駄'); // 設定を上書きする Ti.API.info(Ti.App.Conf.get('jojo3')); // →出力：無駄無駄無駄無駄 Ti.Appにメソッドをぶら下げているのは、アプリ全体で、共有できるからです。 このようにデータを読み書きできる機能を実現するためのコードは以下の通りです。 app.js
jQuery.load()をChromeで使う時にちょっとハマったこと | バシャログ。
こんにちは。さすがに見ないだろうと昔撮ったVHSビデオを、捨てるにあたってじっくり見てしまったminamiです。 小ネタです。HTMLファイルにちょっとした文言を読み込みたいときに重宝するjQuery.load()ですが、Chromeでうまく動かない場合があります。ちょっと引っ掛かってしまったので回避方法を調べました。 サンプルを作ってみた ものすごく簡単に以下のようなスクリプトを書きました。data.txtから読み込んだテキストを、div#txtPlaceに読み込みます。これをローカルでチェックしてみます。 function loadText() { var dataPath = "data.txt"; $("#txtPlace").load(dataPath); } firefox IE8 出ました。 出ません。なぜ！？参考ページを見ると、 Chrome: ローカルWebページからのア
Titanium Mobile を使って、シンプルなRSSリーダーを作る | バシャログ。
こんにちは！最近はTitanium MobileでiPhoneアプリを作りたいと思っていろいろ遊んでいるtanakaです。 Titanium Mobile は スマートフォンアプリ(iPhone, Android)を作るためのツール群です。 Titanium Mobile を使うと JavaScript を使ってネイティブアプリケーションを作ることができます。 今日はシンプルなRSSリーダーを作る方法をご紹介します。 完成イメージ アプリの大まかな仕様 iPhone をターゲットにします RSSの取得に Titanium.Yahoo.yql を使います 取得した記事一覧を TableView で表示します 記事タイトルがタップされたら記事ページを表示します 準備 開発環境には次の準備が必要です。 iOS SDK(+XCode), Titanium Developer (Titanium を
jQuery.parseJSON()について | バシャログ。
こんにちは、「検索と発見のためのデザイン」(オライリー・ジャパン)を買いました。同じ著者の「アンビエント・ファインダビリティ」は発見可能性の広い枠組みを考える読み物でしたが、こちらは実際に検索システムをデザインするときの枠組みを提供してくれる本って感じです。 さて、今日はそんなユーザー寄りのデザインの話ではなくjQueryの実装の話です。 最近のjQueryライブラリには、Ajax通信でサーバーから取得したデータをハッシュ(JavaScriptのオブジェクト)として利用できるようにするためにjQuery.parseJSON() というメソッドがついています。(1.4.1〜)これ以前はXMLHttpRequestの処理とセットになっていて、JSONのパースだけ単体で利用できないようになっていました。(…といってもJSON文字列をevalしているだけだったようですが…) jquery-1.2.
JavaScriptからActionScript3.0を呼び出す際のメモ | バシャログ。
もう暑いとか言う気力も失せたminamiです。 ページのJavascriptからFlashのActionScriptを呼び出す方法を最近まで知らなかったので備忘録的に書きます。 ExternalInterface.addCallback()を使う ActionScriptからJavascriptを呼び出すにはExternalInterface.call()という関数を使いますが、 JavaScriptからActionScriptを呼ぶ際にも同じクラスのExternalInterface.addCallback()という関数を使います。 ExternalInterface.addCallback()はActionScript メソッドをコンテナから呼び出し可能なものとして登録することができます。 記述のサンプル AS側の記述 // flash.external.ExternalInterfa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
