Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
Windows でファイル作成日時をスクリプト言語から操作するために setctime.exe を作った
Windows でたくさんのファイルの作成日時を変更したくなったときに、Perl・Ruby・Python などのスクリプト言語を使おうとしたんだけど、作成日時を変更するための関数がなくて困った。 そもそも UNIX にファイルの作成日時がない stat(2) で取得できる情報のうち時刻に関するものは次の 3 つがある。 atime: 最終アクセス日時 (access time) utime: 最終更新日時 (modify time) ctime: 最終変更日時 (change time) 名前からすると ctime が作成日時 (creation time) っぽいけど、ctime はファイルを更新したときとか chmod や chown したときなどに自動的に現在時刻に更新されるようだ。 atime と utime は utimes(2) で任意の時刻に変更できるんだけど、ctime を
K-means 法を D3.js でビジュアライズしてみた
クラスタリングの定番アルゴリズム K-means 法（K平均法）の動作原理を理解するために、D3.js を使って可視化してみました。 図をクリックするか [ステップ] ボタンを押すと、1ステップずつ処理を行います [最初から] ボタンを押すと、最初の状態に戻ります [新規作成] ボタンを押すと、N (ノード数) と K (クラスタ数) の値で新しく初期化します 古いブラウザーではうまく表示できない可能性があります (IE 10、Firefox 25、Chrome 30 で動作確認しています) K-Means 法とは 英語版 Wikipedia の k-means clustering - Wikipedia, the free encyclopedia の手順に沿って実装しています。 英語版の手順をザックリと書くとこんなイメージになります。 初期化: N 個のノード (丸印) と K 個の
D3.js の Data-Driven な DOM 操作がおもしろい
D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG
ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
GitHub で clone するときは SSH じゃなく HTTP を使ったほうが高速
GitHub には clone するための URL として [HTTP]、[SSH]、[Git Read-Only] の 3 つが用意されている。 いままで、SSH に慣れているという理由だけで [SSH] を利用していたのだけど、「SSH は転送速度が遅い」という問題がある。 SSH だとこんなに遅い… さっき、[SSH] で clone してみたら 20～60 KiB/s 程度の速度しか出なかった。 $ git clone git@github.com:nitoyon/tech.nitoyon.com.git Cloning into 'tech.nitoyon.com'... remote: Counting objects: 8856, done. remote: Compressing objects: 100% (2125/2125), done. remote: Total
Jekyll の 0.12.0 でシンタックス ハイライトが便利になった
※ これは Jekyll アドベントカレンダー の 25 日目の記事です このブログの生成にも利用している Jekyll が約 1 年ぶりにバージョン アップして 0.12.0 になった。RubyGems に公開されているので、gem update で更新できるはず。 この記事では、0.12.0 で個人的に注目している「シンタックス ハイライトに関する改善点」を 2 つ紹介する。 Jekyll の良さについては、俺の最強ブログ システムが火を噴くぜ で記事にしているので、知らない人はそちらからどうぞ。 Redcarpet 2 のサポート まず 1 つ目は Redcarpet 2 のサポート。 Redcarpet は GitHub の中の人によって開発されている Markdown パーサーて、GitHub Flavored Markdown が使えるのが大きな特徴。 これまでも Jekyll
俺の最強ブログ システムが火を噴くぜ
ブログを「はてなダイアリー」から、自分のサーバーに移転しました。 せっかく移転するなら、2012 年の流行を取り入れた挑戦的なブログにしてみたい！と思い、構想から半年、ついにこの日を迎えることができました。 せっかくなので、凝ったところを自慢させてください。 これが俺史上最強のブログ システムだ ブログ システムとして Jekyll を採用 Jekyll のプラグインを自作 (はてな記法対応、英語ブログとの統合) 履歴管理は GitHub を利用、git push で自動でデプロイ コメント欄には DISQUS を採用、旧ブログへのコメントはインポート済み HTML5 マークアップ、CSS3、レスポンシブ Web デザインでのモバイル対応 盛りだくさんですね。 詳しく説明していきます。 ブログ システムとして Jekyll を採用 最近では WordPress を選ぶのが普通でしょう。Wo
UTF-8 対応の msysGit 1.7.10 リリース！ いよいよ Windows で git できるよ!!! - てっく煮ブログ
git先日、msysGit（Git for Windows）がいよいよ公式に UTF-8 をサポート！ という記事で「UTF-8 対応のコードがコミットされた」ことをお伝えしましたが、ついに、UTF-8 対応の新バージョン、msysGit 1.7.10 がリリースされました。いよいよ Windows でも日本語ファイル名を扱えるようになったので、「git では "詳細設計所仕様書.xlsx" をコミットできないんでしょ？」とブーブーいってた人を説得できる材料はそろいました!!!!それを記念して、この記事では UTF-8 対応の msysGit 1.7.10 を試してみた ブーブーいう人を黙らせるための「GUI で git する Windows 向けツール」まとめの2本立てでお送りしたいと思います。UTF-8 対応の msysGit 1.7.10 を試してみたさっそく Google Code
もし100万人のフォロワーを持つ有名人にサイトを紹介されたら - てっく煮ブログ
twitter を眺めてたら、昔自分が作った Color Illusion Generator を外国の人が取り上げてくれていた。発信源をたどってみると、110 万人ものフォロワーを持つ認証済みアカウントの有名人さんが紹介してくれていたようだった。 この @peeweeherman さんはアメリカのコメディアン「ポール・ルーベンス」氏のようだ。Wikipedia によると、1990 年ごろに子ども向けテレビ番組で「ピーウィー・ハーマン」というキャラクターで人気になったらしい。日本でも和光証券(現みずほ証券)の CM にも出演していたようだ。日本だと、ガチャピンさん(@GachapinBlog)が子ども向け番組で人気だったし、フォロワーも 114 万人いるので、立ち位置がかなり近い。つまり、今回の件は日本人に分かりやすくいうと「ガチャピンが twitter で自分のサイトを紹介してくれたらど
経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
Google Maps で鈴鹿サーキット試走
Google Maps API を利用した便利なサービスが数々発表されているけど、別に遊びのために活用してもいいよね。 そんな思いから作ってみた、レーシングゲームです。 地図データを元に走るので、ゲーム史上いまだかつてないコースの再現性があります。 ただ、作者に車の知識があまりないため、車の走行に関してはかなりいい加減ですがご容赦ください。一応、ゲームバランスは調節したつもりです。 推奨環境 以下の環境で動作チェックを行っています。 Windows 版 Internet Explorer 6.0 (JavaScript有効) Windows 版 Firefox 1.0 (JavaScript有効) 遊び方
てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。
asActionScript 3.0 でコマンドライン開発してる人は必携の rascut を導入してみた。Flex 開発や AIR 開発でも使えるよ。rascut は id:secondlife さんによる fcwrap 後継バージョン。ファイル修正から自動的にプレビューまでできたり、trace() の出力をコンソールに出力してくれたり、かなり便利。以前、勝手が分からずにかなり苦労したけど、最近、RubyForge にアップロードされてからは gem 一発で超簡単になったよ。前準備Flex SDK と fcsh を準備しましょう。fcsh にはパスを通しておきましょう。Flex SDK については ActionScript 3.0メモ さんを参照あれ。fcsh については fcsh で Apollo を高速コンパイル あたりを参照あれ。Flex 3.0 SDK には fcsh が付属してる
Box2DFlashAS3 の単純なサンプルと使い方 (2.0.2版) - てっく煮ブログ
box2d, asBox2dFlashAS3 はバージョンによって API が激しく変わっていてなかなか困りものだ。2.0.0 なら gihyo.jp の 特集：Box2DでActionScript物理プログラミング が分かりやすくてよいんだけど、2.0.1 で重要な API が改名されていて、そのことがパッケージには書いていない。「Box2dFlashAS3 どうなってるんだ」と思ったら、どうやら Box2D 本家の API 変更に素直に追従しているだけのようだ。本家側ではそこそこドキュメントはそろっているようなので、ドキュメントが欲しい人は Box2D 付属のクラスライブラリや Box2D User Manual を見たほうがよいかもしれない。今回は Box2dFlashAS3 ver 2.0.2 の単純なサンプルを作った。クリックすると始まるよ。（表示されない場合はリロードしてくださ
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
Google Earth でもドライビング！ [tech.nitoyon.com]
Google Map でレーシングはおかげさまで多くの方に好評でした。2D の平面がファミコン世代の心をくすぐったのでしょう。 しかし、人間の欲は果てしないもの。やはり 3D 空間でドライビングしたいですよね！ デモ 百聞は一見にしかず。こちらの動画をご覧ください。 遊び方 Google Earth の最新版（4.0.2080β 以降）がインストールされている必要があります。4.0.2080βは、2006年9月14日に公開された日本語や建物の 3D 表示に対応したバージョンです。バージョン番号を確認するには、メニューから「ヘルプ」→「Google Earth について」で確認できます。確認後、一旦、Google Earth を終了させてください。 Google Earth Plus や Pro での動作は確認していませんが動くと思います。残念ながら Mac では動きません。Windows
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
