Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
JavaScript初学者へ向けて 【Goodpatch Advent Calendar 2015 4日目】 - it's an endless world.
この記事はグッドパッチのエンジニア陣がお届けするGoodpatch Advent Calendar 2015の4日目の記事です。 昨日はsagarayaのSwiftについての記事でした。 qiita.com 本日は表題の通り、JavaScript初学者に向けてのお話ができればと。 お前だれよ？ 株式会社グッドパッチで、グロースデザイナー/フロントエンドエンジニアという肩書きで働いています。 今年はメインの仕事以外にも、幸いなことにschooさんにお声がけいただいてJavaScriptの初学者向けの授業を作ったり、(まだ刊行されてはいませんが)JavaScript初学者向けの本を執筆する機会をいただけたりと実りの多い一年でした。 schoo.jp 実は私がJavaScriptを書きはじめたのはほんの数年前だったりします。 そんな自分が初学者にものを教えるのもどうかとは最初は思ったのですが、自
gulp問題ひきずり：ウォッチがまたおバカ過ぎる - 檜山正幸のキマイラ飼育記 (はてなBlog)
「最近のビルドツールって何なの？」において、gulpは「腕力はあるが知性を持たない」、ゴレライ的というかゴライアス的というか…、そんなツールだと述べました。二、三、後から思ったことがあるので追加します。 内容： プロジェクトは肥大しちゃうことがある ウォッチをいちいち手で書くのかよー OMakeと比較してみる ウォッチはこうでなきゃ じゃ、OMakeがいいのか？ プロジェクトは肥大しちゃうことがある 「そもそも大した事はしないのでシンプルなツールgulpでも十分」ということなら、「そうですよね」と同意して話はオシマイです。でもね、gulpを使うプロジェクトが、ほんとに小さくて簡単なものなんでしょうか。 目の前に、10種のプログラミング言語が混じった2000ファイルのソースコード群がいきなり与えられたとき、「よしっ、gulpを使おう」とはならないと思うのですが、小さなプロジェクトが（良くも悪
gulpで手軽にEJSテンプレートをHTMLに変換 - Qiita
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
JavaScript の過去と現在、ガチな JS アプリケーション設計
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
BMSをブラウザで遊べるWEBサービス『bmsjs』のα版を公開いたしました - undefined
概要 bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。 bmsjs.net BMS? 元々は、KONAMIの音楽ゲーム『beatmania』を模したシミュレータにあたる『BM98』用の譜面データフォーマットとして開発されたため、現在では同様のシミュレータ（BMSプレイヤー）に用いる譜面データ（曲データ）、あるいはゲームシステム全体を指す場合が多い。2000年代中盤頃までは、「ネットユーザーのPCには何かしらのBMSプレイヤーが入っている」と言われるほどの一大ムーブメントを巻き起こしていた。[要出典]現在はブームが沈静化しているものの、未だに新作BMS楽曲が作られるなどの根強い人気を保っている。かつてのBMS作曲家の中には、プロに転向した者や著名なボーカロイドプロデューサーも多い。 wikip
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
Electron(旧atom shell)基礎+入門
Who Electronとは Electronの特徴 Electronの基礎 Electronの内部構造 Electronの問題 まとめ
年に数日だけ発現する日付の自動補正を発端とした罠 - Qiita
var d = new Date(); d.setFullYear(2015); d.setMonth(3); // 0オリジンで4月 d.setDate(1); d // Fri May 01 2015 … 5月になっている ちょうど投稿日の2015/3/31のような日付で実行すると再現するのですが、 3行目のsetMonthの所で2015/4/31になり、即時補正されて2015/5/1になります。 特定の日時が欲しい時はコンストラクタを使うか、先にsetDate(1)としておくのが無難そうです。 JavaScriptに限らずsetMonth、next monthといった単語が目に入ったら「もし31日に実行したら…」と想像する癖をつけるのが良いと思います。 日付の自動補正関係は時限爆弾になるので気をつけたいですね。 罠についてはこちらも参考になります。 JavaScript の Date
コマンドパスを自動で通し npm install -g しない - Qiita
追記 @hokaccha さんの指摘反映 npm install -g cosidered harmful 何かコマンドラインツールなどが必要なために npm install -g を強要するリポジトリがたまにある。 もっと面倒なのは、依存するツールがあるくせに README とかに書いてない場合だ。リポジトリにある設定ファイルからこちらが察して入れてやらないといけない。 グローバルに入れるツールは package.json の管理外なので、そこのバージョンは指定できない。 入れれば済むなら良いけれど、同じコマンドを他のリポジトリでも使っているような場合、求められるバージョンが違ったりすると面倒だ。
npm で依存もタスクも一元化する - Qiita
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべにっき ♨
古き良きインターネットアプリケーションであるマウスストーカー*1をリアクティブプログラミングの技術を活用して実装してみるという取り組みをしましたのでご紹介します。リアクティブプログラミングというと主語が大きめですが、ここではbacon.jsを使ってるくらいの意味です。 できたもの まずは完成したマウスストーカーを紹介します。チェーンのように連なった星がマウスカーソルの軌跡を辿ってついてきます。工夫してうごかすとなかなか綺麗です。下のボタンを押すと実際にこの画面でマウスストーカーを有効にすることができます(requestAnimationFrameに対応したPCブラウザのみ)。いろいろ動かして遊んでみてください。 このページでマウスストーカーを有効にする 実装 このマウスストーカーがどのように実装されているか紹介します。ソースコードはGitHubに公開していますので、適宜ご参照ください。手元
JavaScript for OSX Automation AppleScriptの代替をJavaScriptでやるサンプルのカレンダー | Advent Calendar 2014 - Qiita
OSX Yosemite で AppleScript がJavaScriptで書けるようになったので アドベントカレンダーで、たくさんサンプルを書いていきたいと思います。 JavaScriptですべてを加工して書こう。 windowsがCOM / ActiveX で成し得なかった、夢ですね。 Windows/ OSX / ブラウザ ・・・すべてをJSで記述するという夢でした。 JSこそ、人類の夢なのだ。
JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com
これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
301 Moved Permanently
XSS再入門
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
