旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
ターミナルにリッチなモニターを表示させる
B! 509 0 0 0 以前、 sparkという シェルスクリプトで棒グラフを表示するコマンドを紹介しましたが、 さらに複雑なグラフや地図などもターミナルに表示してしまおうと言う プロジェクトの紹介。 blessed-contrib termui wopr ブラウザに表示させる blessed-contrib nodeがインストールされている必要がありますが、 nodeが入っているなら取り敢えず $ git clone https://github.com/yaronn/blessed-contrib.git $ cd blessed-contrib $ npm install $ node ./examples/dashboard.js を実行してみてください。 ターミナル上に こんな感じのものが表示されると思います。 追記: 2015/11/30 上のgifはGNU screenを立
夏のインターン講義「1営業日で書くJavaScriptコンパイラ」の設計と実装 - クックパッド開発者ブログ
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし（青木）はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
Beep.js
Beep is a JavaScript toolkit for building browser-based synthesizers.
まだmechanizeで消耗してるの? WebDriverで銀行をスクレイピング（ProtractorとWebdriverIOを例に） - 詩と創作・思索のひろば
今日はスクレイピングの話をします。 今回のターゲットは三菱東京UFJダイレクト。金融機関もウェブサービスを提供するようになり、金にまつわる情報を電子化しやすくなりましたが、かれらが API を提供しているわけではないので、私たちのほうで取得・加工をしてやる必要があります。今やウェブサイトであれば当然のように JavaScript を使っているわけなので、いわゆる mechanize、つまり HTML の解釈をおこない、リンクのクリックやフォームの送信をシンプルに実装するようなやり方でのスクレイピングはすでに無理筋だといえます。 もちろん今日においてはブラウザオートメーションという方法がすでにありますので、これを利用してやれば、なんの憂いもなく実際に人間が使うようなブラウザをプログラマティックに操作することができます。現在は Selenium WebDriver がデファクトで、これが使用す
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
「for やめろ」またはイベントループと nextTick() - Block Rockin’ Codes
ものすごく遅レスですが、LLDiver で @esehara さんの LT であった話。 forやめろ、あるいは「繰り返し」という呪縛から逃れるために 簡単に言うと、 1~10 までを出力する方法を複数考えるというもの。 for, while, 再帰, goto etc.. と出て、途中で終わっちゃったので結論はよくわかりませんでしたが、 Node ではどれも使わずにできるな、と思ったのでちょっと例を出してみます。 ちなみに、タイトルでネタバレしている通りイベントループの話です。 そしてよくある「イベントループとは何か」「なぜ止めてはいけないのか」「process.nextTick() とは何か」「setImmediate() と何が違うのか」 などを解説する良い例だったので、書いてるうちに実はそっちがメインの解説となりました。 サンプルの実行結果は Node v0.11.13 です。(書
js-xlsx で js で excel のファイルを生成する - tokuhirom's blog
js-xlsx で js で excel のファイルを生成する Excel ファイルの生成、めんどくさいですよね。CSV の生成めんどくさいですよね。HTML を出力した上でさらにやるのはだるい、というわけで、HTML の DOM を解析して JS で XLSX 生成してダウンロードさせたらいいんじゃね?と思ってそういうのやれるやつ探したら、js-xlsx ってのがあった。 これをつかって、HTML のレポートから XLSX を生成するコードを書いた。なかなかうまく動く感じしてる。 http://tokuhirom.github.io/js-xlsx-demo/ td タグに class を指定すると数字カラムになる、みたいな感じになってるのがいいかんじです。 js-xlsx で生成したXLSXは、FileSaver.js で保存させてます。 デモで利用している JS は以下のようなもので
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] | DevelopersIO
位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] はじめに ブラウザにて位置情報を取得し、その情報を別のクライアントへPush通知する処理の サンプルをRuby on Railsで作成してみました。 なんらかの業務で、ある社員が持つ端末より位置情報を取得し、本社側でリアルタイムで その情報を把握する、というような用途を想定しています。 アプリの機能としては JavaScriptにて、Geolocation APIを使用して位置情報を取得する websocket-railsを使い、WebSocketでサーバ側へ送信する サーバ側は、受け取った位置情報をwebsocket-railsを使い、別画面へPush通知する の3つに分けることができます。 これらの機能を実装するポイントについて書いていきたいと
![位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4ba9673af464883e264d1d320af2d2947fae03d/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Frails.jpg)
JavaScriptでセキュアなコーディングをするために気をつけること
kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング （以下、XSS）などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。
PyPy.js: Now faster than CPython
OK OK, I couldn't resist that title but it probably goes a bit far. Let me try for a little more nuance: PyPy.js: Now faster than CPython, on a single carefully-tuned benchmark, after JIT warmup. It has been the better part of a year since I first started hacking on PyPy.js, an experiment in bringing a fast and compliant python interpreter to the web. I've been pretty quiet during that time but ha
はてなブログの読者(URL)を一覧表示するスクリプト - Sprint Life
はてなブログのプロフィールのページ(ブログのURL/about)には、そのブログの読者になっている人の アイコンが表示されますが、各アイコンのリンク先になっているURLを一覧表示するスクリプトを書きました。 var textarea = document.createElement("textarea"); textarea.cols = 50; textarea.rows = 10; document.getElementsByClassName("info").item(0).appendChild(textarea); var users = document.querySelectorAll("div.info a"); var count = users.length; for(var i=0; i<count; i++) { textarea.value += users[i]
Game Mechanic Explorer
A collection of concrete examples for various game mechanics, algorithms, and effects. The examples are all implemented in JavaScript using the Phaser game framework, but the concepts and methods are general and can be adapted to any engine. Think of it as pseudocode. Each section contains several different examples that progress in sequence from a very basic implementation to a more advanced impl
vis.js
vis.js community edition * A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptユーティリティライブラリの紹介
geta6 / <div align='center'>超大量絵馬とはなんだったのか</div> - Glide