中古の1戸建を昨年購入しました。（土地も一緒）。上の写真は素人DIY最中です。DIY初心者だけどこれやばい、できるのかと感じてます、春友です。 で、購入した家の用途は住居用ではなく簡易宿、いわゆる旅館業として運営してゆくためのもので購入しま...

Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの

小さなアイコン画像などを一つにまとめて表示はCSSで切り出して行うのがCSS Spriteです。用意する手間があるため二の足を踏むケースも多いのですが、Sprite Factoryを使えばごく手軽に運用ができそうです。 インストールします。Rubygemsでインストール可能です。 実行はsfコマンドで。ディレクトリを引数としてそれ以下にある画像を全てまとめてくれます。 生成されるのはimg.cssとimg.pngです（カスタマイズ可能）。 生成されたCSSです。img.pngのSprite指定になっています。 生成された画像です。全て横につながった画像になっています。 生成された画像と元ディレクトリです。 オプションです。パスやSass形式での出力などに対応しています。 Sprite Factoryはクラス名に元のファイル名がつけられるので、Sprite画像は見ずともクラス名の指定がしやす

PNGDriveはファイルを画像化してサイズを小さくするソフトウェアです。 ファイルを相互に別形式に変換するというソフトウェアは多いですが、PNGDriveはちょっと一風変わっています。任意のファイルを画像化し、デコードできるソフトウェアになります。 メイン画面です。 ドロップしました。Zipファイルの場合、サイズが大きくなってしまいました。ファイルは複数ドロップできます。 テキストの場合は54%まで縮まっています。 面白いのはやはりサーバサイドの仕組みを使わずに画像だけで行っているということでしょうか。画像化されたデータは特に意味がない、砂嵐のようになっていますが、可逆変換なのもユニークです。 PNGDriveはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る インターネット上の圧縮技術としては現在Gzipがメイ

picture-tubeはターミナル上に画像を表示するソフトウェアです。 今年になってくらいからコンソールで無茶をするプロジェクトを多数見かけるようになってきました。何かに取り憑かれているのでしょうか。という訳で今回はターミナルで画像を表示するpicture-tubeを紹介します。 インストールします。npmで一発です。 実行しました。なんか…すごいです。 MOONGIFTでも実行。うん、それっぽい。 ヘルプです。colsで幅を変えられます。 つまりこういうことです。広げるとより細かく表現できるようになります。 カラーにだって対応しています。 やっていることはpng-jsというnode.js向けの画像解析ライブラリを使ってPNG画像を読み込み（そのため使える画像フォーマットはPNGのみです）、その色をターミナル上で再現しているというやり方です。そこにどんな意味があるのか、と聞くのは野暮でし

tiltShift.jsはミニチュア風写真をCSS3で実現するソフトウェアです。 少し前に風景をまるでミニチュアの写真のように加工するテクニックが流行りました。やり方も既に手順化されており、色々なカメラアプリでも楽しめます。そんな加工をCSS3で行ってしまうライブラリがtiltShift.jsです。 イフェクト後の写真です。 左上を解除しました。こちらが元の写真です。 右上を解除しました。 左下を解除しました。 右下を解除しました。 tiltShift.jsは元の画像には一切の編集を行わず、中央をそのままに外側にぼかしをかけることでtilt shiftイフェクトを実現しています（実際にはもっと細かく処理されていますが）。オプションもあり、写真ごとに微調整してみても面白そうです。 tiltShift.jsはjQuery/JavaScript製、GPLのオープンソース・ソフトウェアです。 MO

SeuratJSは画像をピクセルアートに変換するRaphaëlプラグインです。 従来Webサイトにおいて画像は表示して終わりでしたが、HTML5/Canvasの登場によってクライアントサイドでも編集できるようになってきました。そこで紹介したいのがSeuratJSです。画像をモザイクなどのピクセルアートに変換します。 元の写真です（右側）。 じゃじゃーん。丸と四角のモザイクになりました。 こちらも元画像。 アニメーションもつけられます。 こんな画像も… 面白い！ デモです。アニメーションをお楽しみください。 SeuratJSの面白さはサーバサイドの仕組みを使っていない点にあるでしょう。複雑なアニメーションを式だけで実現したり、ステップ数の指定もできます。Webサイトのトップなどで使ったりすると効果的かも知れません。 SeuratJSはJavaScript製、MIT LicenseまたはGPL

resizeは画像のアップロード前に事前にCanvasタグを使って縮小処理を行ってアップロードを行うソフトウェアです。 これは面白いアイディア。resizeはアップロード前にCanvasタグを使って画像のリサイズ処理を行い、小さな画像としてアップロード処理を行います。 最初の画面です。まず写真を選択します。できるだけ大きいのが良いでしょう。 アップロードしました。選んだ画像は5MBくらいあります。 ダウンロードしてみると37KBになっています。 最近のデジカメ、スマートフォンでは画像のサイズも大きくなっていますが、実際のWebサービスではそこまで必要としないケースも多いです。そのような場合にクライアントサイドで変換してしまうというのは面白いアイディアではないでしょうか。 resizeはRuby/Sinatra製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）

PixasticはJavaScriptによる画像編集エンジンです。 画像のちょっとした加工であればわざわざ高価なソフトウェアを使うことなくオンラインで実現できるようになってきました。今回紹介するPixasticもその一つ、多彩なイフェクトを画像に対してダイナミックに適用するライブラリです。 元の写真です。 白黒加工を施しました。 画像を重ねる処理です。 色彩を変更しました。 エッジ検出。 垂直反転。 ネガ加工。 ノイズを乗せています。 セピア加工。 ぼかし。 カラーヒストグラム。 明るさを調整。 丸を使ったモザイク。 シャープ。 切り抜き。 ポスタリゼーション。 モザイク加工。 PixasticはPhotoshopでいうフィルター的な機能を数多く実装しています。その処理の殆どは画像全体にかかるものになっていますが、カスタマイズすれば指定範囲にだけイフェクトを行うこともできるでしょう。またオ

MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。 Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。 例。単純にくるくる回転し続けます。 再生、停止、逆再生もサポート。 コールバックを使って順番にアニメーションさせることもできます。 アニメーションの素材になる画像はSprite画像になっている必要があります。それをJavaScriptを使って順番に変更していくことでアニメーションのように見せることができます。カスタマイズもできるので色々な見せ方に使えそうです。 MovieCrop.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Web上でアニ

InstantSpriteはWebブラウザ上でSprite画像を作成するソフトウェアです。 複数の小さな画像をくっつけて、それをCSSで切り分けるのがSprite画像です。画像編集ソフトウェアやサーバサイドで行うソフトウェアがありますが、今回はWebブラウザのクライアントサイドで行うInstantSpriteを紹介します。 ファイルをアップロードしました。実際にサーバにアップロードされる訳ではなく、クライアントサイドで処理されるようです。 くっついた画像です。 CSSのSprite設定も出力されます。 InstantSpriteは画像をまとめてアップロード（ドラッグアンドドロップ）するだけで自動でくっつけた上でCSSの設定が出力されます。定期的な更新には向かないかも知れませんが、これまでの画像を一気にSprite化したいといった時にはぴったりかも知れません。 InstantSpriteはJ

はてなブックマークのコメントより。 昨日お伝えしたGladius DBの対抗馬として紹介したい。こちらもまた、テキストファイルをDBとして扱うことができる。さらにGladius DBへの挑戦なのか、ベンチマークを公開している。 今回紹介するオープンソース・ソフトウェアはtxtSQL、テキストベースのデータベースソフトウェアだ。 txtSQLはGladius DBとは異なり、SQL文を解釈しない。独自の関数にアクション（SELECT/INSERT/UPDATE/DELETE等）、テーブル名、データ、WHERE句などを指定して渡す必要がある。 そのため、既存のアプリケーションを乗り換えるには修正が必要になってしまうのが難点だ。だが、新規開発であれば関係ないだろう。また、その結果として高速性が売りだ。Gladius DBの10倍近いパフォーマンスが出ている。 面白いのは、サンプルアプリケーション

本日Chromeのバージョン21がリリースされ、getUserMediaが実装されたようです。 getUserMediaを使うと、javascriptを使ってカメラにアクセスできるようなので、やってみました。 参考にしたページは以下 getUserMedia API <body> <video autoplay width="640" height="480"></video> <img src="" width="640" height="480" > <canvas style="display:none;" width="640" height="480"></canvas> <div id="wrapper"> <button id="capture">capture</button> <button id="stop">stop</button> </div> </body> <

http://www.sys-arts.net/qwak/amazon の動きが変だったので調べてみたらいつの間にかAPIが404を返すようになってた・・・ なんか設定が悪いのかなと思って解説サイトを探すと Google トレンドのデータを取得する方法 Google トレンドの方は何とか生きてる模様 急上昇ワードは反応無し なのでここからデータを拾う方式に変更 サービス終了のお知らせ Google Readerは大々的に騒がれたのにこっちの方は全然騒がれなくてちょっと悲しい

有料機能を使うと、 Google検索の月間検索数取得、 高精度AIによる提案、 より深いSEO競合分析などもできます！

僕が実際にときどきお世話になるものを中心に、類語、関連語、連想語、共起語などのキーワードツールを紹介します。 僕は、何かしらの原稿を書くとき（ライティング）での利用が多いのですが、リスティング広告の出稿キーワードなどでも利用できます。 辞書、独自エンジンによるシソーラス、類語、連想語 Weblio類語辞典 Weblio提供の類語辞典、シソーラス「Weblio類語辞典」。「類語玉手箱」と「Weblioシソーラス」を利用しているとのこと。「お隣キーワード」などの横展開がちょっとありがたいです。 Yahoo!類語辞書（Yahoo!辞書内） Yahoo!辞書の中のひとつ「Yahoo!類語辞書」。Yahoo!辞書は、言葉の意味を調べるのによく利用しているので、その流れで類語辞書も利用しています。Weblio類語辞典よりも多く言葉を返してくることもあります。 連想検索エンジン reflexa Pref

2021年08月31日をもって機能提供を終了させていただきました。 長きにわたりご利用頂き、誠にありがとうございました。

Hatena Developer Center についてはてなは「はてなブログ」「はてなブックマーク」をはじめするはてなのサービス群を、より深く使うためのAPIを提供しています。 Hatena Developer Centerでは、これらのAPIを扱うための開発者向け情報を公開しています。APIを使うことで、はてなが持つ情報・機能を利用した様々なアプリケーションやサービスを作ることができるようになります。 開発者の皆様のアプリケーション/サービスにおいて、より豊かなユーザー体験を提供するために、はてなのAPIをご活用ください。 おすすめのAPI

Hatena Developer Center についてはてなは「はてなブログ」「はてなブックマーク」をはじめするはてなのサービス群を、より深く使うためのAPIを提供しています。 Hatena Developer Centerでは、これらのAPIを扱うための開発者向け情報を公開しています。APIを使うことで、はてなが持つ情報・機能を利用した様々なアプリケーションやサービスを作ることができるようになります。 開発者の皆様のアプリケーション/サービスにおいて、より豊かなユーザー体験を提供するために、はてなのAPIをご活用ください。 おすすめのAPI

Googleアルゴリズムの200の要素を発見しましょう！（Let’s Try to Find All 200 Parameters in Google Algorithm） は2009年に書かれた記事ですが、パンダアップデートが適用された今現在（2011年4月）でも重要項目が多く書かれているもので。 多くはGoogleの特許（合衆国特許出願0050071741）に基づいていますが、筆者のアンが自身の解析結果や予測を盛り込んでいる事で、より実践に近い内容になっています。 SEO初心者の方は、これからのウェブ制作の軸に、SEOエキスパートの方はもう一度自身のサイトを見直す目次として確認してみてはいかがでしょうか。 ドメインに関する13要因 ドメイン年齢 ドメイン取得からの長さ ドメイン登録情報（Who is情報）の表示/非表示 ドメイン種類（サイトレベルドメイン（.com や co.uk） ト

サイトのボリュームが大きくなってくると何ページがインデックスされているか気になってくるものです。 インデックスされていないページは検索結果で表示されることがないので、SEOにおいては存在しないに等しいとも言えます。 あなたはインデックスされているURLをどうやって調べていますか？ その数字は正確だと思いますか？ 今日のテーマは、「Googleにインデックスされたページの正確な数」を調べる方法です。 Googleと書きましたが、Yahoo!でもBingでも同じことが言えるはずです。 一言でいうと、そんな方法はありません（タイトルが“釣り”っぽくてゴメンナサイ）。 インデックス数を調べる2つの定番手段についてその注意点を説明します。 “site:”コマンド インデックスを調べるのに真っ先に思いつくのが、”site:”コマンドです。 しかし、”site:”コマンドは何度も言っているように信頼でき