はてなブックマーク

近年のウェブのモダンといわれている開発環境では、コマンドラインのツールが主流になってきています。 コマンドラインというのは、マウスやグラフィカルなUIを使わず、キーボードとテキスト入力だけでコンピューターを操作するUI、いわゆる "黒い画面" です。 慣れていないと、ついそっと閉じるボタンを押したくなりますよね。 だけど、慣れてくると、マウス操作をするよりも、いろんなことが簡単にできるようになって、より効率的にパソコンを操作することができるようになります。 まずは "黒い画面" に 慣れる ことがだいじ！ ということで、1時間でざっくりコマンドラインの操作に慣れる練習メニューを考えてみました。 黒い画面の立ち上げ方 黒い画面は、OSによって立ち上げ方が違います。 Mac では "ターミナル"、Ubuntu では、"端末" というアプリがはじめからインストールされていますので、これが使えます

JavaScriptネイティブな実装 Image() クラスに、イベントハンドラ onload() が用意されているので、これを利用する。 <script type="text/javascript"> function cont_loadImage( imageSrc ){ var img = new Image(); img.onload = function(){ alert( 'Image is NOW loaded!'+"\n" +'Original width: '+this.width+'px'+"\n" +'Original height: '+this.height+'px'+"\n" ); var targetBox = document.getElementById('cont_image'); targetBox.innerHTML = ''; targetBox.

ちょっと前に、恋に落ちるテキストエディタ "Sublime Text 2" に恋をしました。 恋ってほど恋してもいないんですが、もともと Windows で EmEditor を愛用してたのですが、Mac に移行したので使えなくなってしまい、そのかわりとして Sublime Text 2 を使うようになったのでした。日本語にもう少し寛容になってほしいとか、細かいところにちょいちょい不満はありますが、これも好意の裏返しということで、概ね満足しています。 ということで、お世話になることになった Sublime Text 2 で、プラグインを作ってみたので、手順をご紹介。 結構カンタンです。 そもそも "Sublime Text 2" については、参考URLをいくつか載せておくのでこちらを参照してください。 Sublime Text (本家/英語) Sublime Text 2ってエディタがすご

LinuxOSがまるっと動くという小型の基板 Raspberry Pi に興味をひかれ、いじくってみることにしました。これまでに Arduino をさわったことはありましたが、Arduino は Processing ベースの独自言語でプログラムを書きますので、ツッコんだことをやろうとするとややハードルが高いかも知れません。Linux が動くということは、既にあるさまざまなプログラムやリソースが使える、ということだと思うので、期待高し、です。 初心者なので、書籍『Raspberry Piで遊ぼう!』を参考に進めていきたいと思います。 用意するもの とりあえず今回は、起動して終了するところまでをやってみます。そこまでの操作に必要な最低限の機材は次の通りです。 Raspberry Pi 本体 まずは Raspberry Pi の本体が必要です。Type A と Type B があります。Typ

ハードウェアのセット「Arduinoをはじめようキット」は、入門書「Arduinoをはじめよう」の流れに合わせて構成された内容になっている。ので、合わせて入手した。Amazon で購入できる。 届いたはじめようキットの中身はこんな感じ。 今回やってみる入門手順で使用するのは、マイコンボード Arduino Uno R3 の本体と、パソコンと接続するための USBケーブル(A→Bタイプ)、あとLEDを1つ。 その他にも、ブレッドボード、いくつかの抵抗、ジャンパワイヤ、タクトスイッチなど、どう使うかよくわからないが、たくさんの部品がはいっている。たぶんそのうち使うことになるだろうけど、いまはそっとしておく。 開発環境セットアップ Arduinoの開発環境は、Windows, Mac, Linux 向けに用意されているが、今回は Mac OS X 10.8.3 Mountain Lion で入門

マイクロソフトがあんまり好きじゃないとか、お金ないんだから OpenOffice.org でいいんじゃないかなどと思ったり、まぁお世話になってる割に、なぜかあんまり好かれない Microsoft Office。 とはいえしかし、日々の業務でこれを捨てられずにずーーーーーーっとやってきたことは間違いなく、なんやかんやと便利だということを認めざるを得ない。 この便利な Office 製品、とりわけ Excel は、数字記録したり集計したり、さらには図まで描いたりと大活躍。これをもっと上手く使いこなしたら、もっといろんなものをすごーーーく便利にできるんじゃないだろうか？ ということで、今回はPHPからエクセルファイルの読み書きを行うライブラリ PHPExcel を試してみることにした。 ライブラリを選ぶ PHPExcel に入る前に、PHPでエクセルを読み書きできるライブラリは、実は他にもいくつ

久しぶりに、いつもの VMware Player × Ubuntu 8.04 の使い捨てLAMP環境 でイタズラしようと思ったら、新しい Ubuntu 12.04 のディスクイメージが公開されてた。おぉっ！と思って落としてみたのだけど・・・、VHD形式のディスクイメージでの配布になったようで、そのまま VMWare Player で起動できず、ひと手間かかったので、大したことじゃないけどそのメモ。 手順は以下の通り。 VMWare Player をインストールする まず、VMWare Player のダウンロードページから、VMWare Player を入手する。すでに VMWare Player がインストールされている場合は不要。 今回動かしたホストマシンは、Windows 7 (64bit) なので、 VMware-player-5.0.0-812388.exe をインストールした。

コンピュータプログラムの世界では、1970/01/01 00:00:00 は『UNIXエポック』などと呼ばれる特別な時刻。この時刻から数えた秒数のことを『UNIXタイム』と呼ぶ。PHPやPerlでは、 time() っていう関数でUNIXタイムを知ることができる。 JavaScript では、Date.getTime() というのを使うんだが、これが実は注意が必要。 PHP や Perl で取得できるUNIXタイムは、単位が "秒" なんだが、JavaScriptでは "ミリ秒" で返ってくるという点が異なる。 だから、JavaScript で PHP のような秒単位のUNIXタイムを使いたい場合は、1000で割るとちょうど近い値が取れる。 次の例は、2つの時刻情報を比較して、30日以上過去かどうかを調べたい場合。 // 【×】間違った例 var dateNow = new Date(20

コヤナギ トモヤ ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。 ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。 PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

HTMLのフォーム要素のうち、複数行入力欄 <textarea> で、編集したテキストの量にあわせて高さを自動調整するスクリプトを作ってみた。 実装サンプル いきなりだけど、完成したソースから。 実装サンプルは下記。 実装サンプル <script type="text/javascript"> function PxTextareaAdjuster( textarea ){ var textarea = textarea; textarea.style.overflow='hidden'; var defaultHeight = textarea.offsetHeight; function adjustTa(){ textarea.style.height = defaultHeight+'px'; var tmp_sh = textarea.scrollHeight; while( t

久しぶりの技術屋っぽいエントリでわくわくしております。 最近流行っているらしい node.js を試してみた。 お試し環境構築 例のごとく、使い捨てのVMware×Ubuntu環境を使って実験する。 ただし、node.js はウェブサーバーなので、Apache上で動作させるものではない。 Apacheと同居させることもできるようだが、今回は初めてなのでシンプルに行きたい。Apacheはインストールせず、ポート80で node.js を稼動させることにする。 node.js のインストール まずは、こちらの記事の資料1. node.jsとnpmのインストールを参考に node.js をインストールしてみる。 Linux用とWindows用の手順を用意してくれているが、今回はサーバーがUbuntuなので、Linux用の手順に従う。 $ sudo apt-get install build-es

response.writeHead(statusCd, otherHeaders); HTTPレスポンスヘッダーを出力する。第1引数にステータスコード、第2引数にその他のヘッダーのキーと値を渡すようだ。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/html'}); response.end('Hello World\n'); }).listen(80); response.write(str), response.end(str) HTTPレスポンスボディを出力する。 response.write(str) は、HelloWorldアプリケーションには登場しなかったが、HTTPレスポンス

<<- 前回『基本的な機能に触れてみる編』 node.js 入門の続き。WebSocketをはじめる前に、データの読み書きができないと様々不便だと思ったので、やってみた。 ドキュメントのファイルシステムの節を参考に、ファイルの読み書きをやってみる。 導入 まず最初に、ファイルシステムモジュール 'fs' のインスタンスを作成する。 この fs にファイルの読み書きをするための機能が詰め込まれているっぽい。 「同期」と「非同期」がある 関数名をざっと眺めると、それぞれ ****Sync() という関数が対で用意されている(例：fs.readFile() と fs.readFileSync() など)。 Sync が付いていない方が「非同期」の関数で、付いている方が「同期」の関数のようだ。 ドキュメントには、非同期メソッドでは順序の保証はありません、また、非同期の形式は常に最後の引数として完了

「みはじの法則」は、「み:みちのり(=距離) 」、「は:速さ」、「じ:時間」 の関係を表す、算数の公式です。 小学校の課程で教わり、多くの人が日常的に実用しているであろうお馴染みの「みはじの法則」ですが、そこにプロジェクトマネジメントの概念を当てはめてみると、プロジェクトが炎上するメカニズムをシンプルに理解することができます。 この記事では、プロジェクトはどのようにして炎上状態に陥るのか、プロジェクトを炎上させないために何を守ればよいのかについて、「みはじの法則」を使って考えてみたいと思います。 思ったこと、考えたこと、突然閃いた何かなど、頭の中に漠然とあるイメージを、文字にして書き留めてみるのは良いことです。 言葉ではなかったぼんやりしたイメージが言葉になったとき、頭の中にあった時とはどことなく少し違っているような感じがするけれど、それでも後から読み返して思い出すことができるようになるし

スマホ(スマートフォン)向けのウェブサイトは拡大ができないもんだと思っている人が、周りにいっぱいいて、びっくりしたので書いてみた。 それは誤解です。 そんなことないです本当は。 なぜ拡大ができないのか？ iPhone や Android のブラウザには、viewportという、ウェブページの表示の所作を制御する機能がある。その機能の１つに、user-scalable(ユーザーが拡大縮小できるか)という項目があり、これを no にすると、拡大を禁止することができる。 これを書かなければ、拡大縮小は普通にできる。 つまり、スマホサイトで拡大が出来ない理由は、「デザイナが拡大させない様にしたから」だ。 拡大できないことに気づいた人は、拡大したかった人 スマホ上で、ウェブサイトを拡大表示するニーズはあるのか、と、しばしば議論になる。 これについて、答えは明白だ。 拡大できる必要があるとかないとか、

SentOS に PHP5 を yum で入れた場合に、SQLite を使いたくて、でもなかなか使えなくて苦労した。その時のメモ。 phpize と pecl を使えるようにする まず、phpize と pecl を利用できるようになってないとダメらしい。使えるようになってない人は、この手順で使えるようにしないといけない。 参考にさせて頂いたのはこちらのサイト。

CSS3のHTML要素を自在に変形させられる機能 transform をやってみた。 transform と transform-origin transformプロパティ は、変形の支点を指定する transform-originプロパティ とセットで使用する。 変形の支点を指定する transform-origin 最初に、transform-origin を指定する。 transform は、回転や歪みを指定するが、その支点をどこに置くかを指定するのが transform-origin だそうだ。 <style type="text/css"> .transform{ -moz-transform-origin:center center; -webkit-transform-origin:center center; -ms-transform-origin:center cent

Excel VBA のお勉強中でして、やってみたことの断片的なメモを残します。 Excel VBA から、テキストファイルを開いて変数に入れたり、変数の中身をファイルに保存したりする方法。 ファイルをオープンして中身を変数に格納する ファイル選択ダイアログを開いて、開くファイルを選択してもらう。 Dim vntFileName As Variant vntFileName = _ Application.GetOpenFilename( _ FileFilter:="テキストファイル(*.txt),*.txt,CSVファイル(*.csv),*.csv" _ , Title:="ファイルを選択してください。" _ , MultiSelect:=False _ )

Windows で Laplus とかを使って *.tgz や *.tar.gz のファイルを解凍したときに、@LongLink というファイルが作られることがある。どうも上手く解凍できなかったようだが・・・、これはなんだろう？ と思ってググってみると、次の親切なページを発見。 @LongLink - Wellvil.com このページの説明によると、次のようにある。

ASCII.jp の記事『iPhoneのGPSをJavaScriptで操ろう』を参考に、iPhoneのSafariでGPS(位置情報サービス)情報を取得してみた。 位置情報を扱う navigator.geolocation GPSの位置情報を扱うAPIは、navigator.geolocation というオブジェクトにまとめられている。 Geolocation API は、W3Cによる標準仕様なようだ。W3Cの仕様書 Geolocation API Specification(英語) をよく読むと、詳しいことがわかりそう。("Candidate"だから、勧告候補段階なのかな？) 取得の仕方は2通り 単発で一回だけ取得する方法と、定期的に更新し続ける方法があるようだ。 単発で一回だけ取得する getCurrentPosition() <script type="text/javascript

ちょっとしたアレやコレを、ちょびっとだけ試したい時に、サクっと作れて、壊れちゃっても痛くなくて、試し終わったらすぐに破棄できるお試しLAMP環境を作る手順をまとめた。 VMware Player をゲットしてインストール まず器づくり。VMwareのサイトからVMware Playerをダウンロードして、インストールする。(この記事の編集時にはWindows版を使用) UbuntuのVMware版をセットアップ 2012年8月28日追記 新しい Ubuntu 12.04 の仮想マシンイメージは、この手順だけでは VMWare Player で開けないようです。新しい手順を こちらの記事にまとめたので、合わせて参照してください。 Ubuntuのサイトで、VMware用仮想マシンイメージを配布している。ちょっとバージョンは古くて Ubuntu 8.04 だが、使い捨て用なので別にいいことにする

JavaScript でURLエンコードする方法を何度も何度も調べてる気がするので、いい加減メモる。 groundwalker.com さんが、詳しく比較してくださっている。 エンコードする関数には、 escape(), encodeURI(), encodeURIComponent() の3種類、それぞれ対応するデコード関数 unescape(), decodeURI(), decodeURIComponent() が用意されている。 次の文字列は、http://www.aaa.jp/?text=あ ああ を escape()した結果。(JavaScriptがONじゃないと見えません)

PHPで Google Analytics API を使ってみたので、そのメモ。ドキュメント Google Analytics Developer Docs を見て進めた。 概要 Google Analytics APIを使う方法は、JavaScriptとか、Javaとか、HTTP Protocol とか、いろいろ用意されているみたい。今回は、PHPからアクセスしたいので、HTTP Protocol をやってみる。 まずは Google Analytics API に認証する APIを使う前に、Google Analytics API にログインしなくてはならない。認証する方法は、Data Export API - Authorization に書かれている。 認証方法は 「ClientLogin」「AuthSub」「OAuth」と、よくわからないが3種類あるようだ。今回は、HTTP Pr

先日、CSS3入門の手始めとして、border-radius を使ってみた。今日はその続き。border-image を試してみる。 border-image は border-radius と同様、CSS3の新しいプロパティで、ボーダーに画像を適用する。「ボーダーに画像」というのがいまいちピンとこなかったのだが、使ってみるとこれはなんとも便利だ。 デモページはこちら。 今回は素材として画像を使うが、適当な画像ではちょっとわかりにくいと思ったので、なるべくわかりやすいサンプル画像を用意した。 基本的な使い方 基本的な使い方は次のようにする。 .borderimg01{ border-image: url("border-image.gif") 40 / 40px stretch; -moz-border-image: url("border-image.gif") 40 / 40px st