SVGを画像化する
昨今のクライアントサイドでは、動的な画像のレンダリング、アニメーション、拡張・縮小を求められることが多々あります。そのような際にSVGは利用しやすい形式です。一方で、画像として内容を保存したくなることもあります。そのような場合に使える、SVG画像をPNG画像に変換する方法を簡単に述べます。 SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）は画像形式の１つです。XMLをベースにした二次元ベクターデータで画像を描きます。ベクターデータとは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって再現する方式」です。その大きな特徴は「拡大・縮小しても画質が損なわれない」ことです。 Illastratorなどでも作れますが、JavaScriptで簡単に作れます。実際にSVGを業務などでがっつりと利用するの
Chrome Dev Summitで披露された高速化のテクニックの数々（所感を含む） - アシアルブログ
こちらのブログではご無沙汰しています。田中です。今週はサンフランシスコにて開催されたChrome Dev Summitに参加させていただいていました。今年はweb.devの発表や新しいPageSpeed Insightsなど、例年にも増して盛りだくさんの発表が行われましたが、特に「スピードの改善テクニック」が数多く披露されたように思います。 Chrome Dev Summitのプレゼンテーションはすべて濃厚で、しかも多くの内容は「web.dev」に詳しく説明されています。ここでは、2日間にわたって行われたセッションを振り返りながら、高速化に関する内容をざっくりと追っていきたいと思います。 以前と比べて、WebサイトのJavaScriptコード量は8倍に膨れ上がっている V8の言語機能を今後も最適化していく：Promise、Async & await、フレームワーク対応等 ReactのHoo
PHPで使えるレコメンドエンジン
皆さん、こんばんは。笹亀です。 先日、MacBookProの13インチでRetinaディスプレイを搭載したとっても魅力的なモデルが発表されました。 自分のMacBookProが13インチでもう3年くらい使用しているので、買い替えたいと悩んでます。 PCはエンジニアの商売道具ですから、多少のわがまましても購入してもバチはあたらないかと思ってます＾＾； 本日はレコメンドエンジンについてご紹介したいと思います。 主にPHPで利用できるという目線で使ったことがあるもの、使ったことがないものの両方をご紹介します。 レコメンドというのはよく「この商品を買った人はこの商品も買ってます」とか見受けるかと思いますが、商品などをおすすめするような機能のことを言います。 ただ、一般的に無料（オープンソース）で提供されている独自のロジックにより複雑な計算などをさせてレコメンド機能を実装したい場合などにはあまりむか
CakePHP2で簡単にACLを使う方法
チョーシドウダ？カラダァ？どうも、高橋です！ 今朝、CakePHP2.3.0-beta版がリリースされましたね！ 今回のリリースでは、パフォーマンス、セキュリティ、使いやすさを向上させる新機能が追加されました。 また完全に下位互換があるので、2.2系からのマイグレーションは（おそらく）容易でしょう。 というわけで、早速Cake2.3を使ってACLを実現してみたいと思います。 イメージが掴みにくいと思ったのでデモを作成しました。（がんばりました！ ログイン：http://s1.asial.co.jp/~yuya/blog/20121029/users/login username: adminuser / password: 0000 ACL管理 ：http://s1.asial.co.jp/~yuya/blog/20121029/admin/acl またCakePHPのセットアップについて
Ludia (PostgreSQL + Senna) で全文検索
PostgreSQL: CREATE TABLE ludia_test ( id serial primary key, name text, contents text ); CREATE INDEX fulltext_contents_index ON ludia_test USING fulltext(contents); MySQL: CREATE TABLE ludia_test ( id integer not null auto_increment primary key, name text, contents longtext ); CREATE FULLTEXT INDEX fulltext_contents_index ON ludia_test(contents); MySQLでは、text型ではおさまりきらない作品もあったので、contentsをlongtext型
使えるとちょっと便利なSSHのTIPS
こんにちは、牧野です。久々の、9か月以上ぶりのブログです。。 仕事では、ここ1年近くずっっとインフラ関係のことをやっていました。 今日は、SSHに関するTIPSを紹介します。 １. 特定のサーバーにSSHログインする時に、特定の設定を使用する ホームディレクトリ/.ssh/configファイルに設定を書いておくと、特定のサーバーにログインする時に、自動的に特定の設定を使うようにできます。 SSHのオプションをサーバーによって分けたい時に入力が楽になります。 以下は、xxx.yyy.zzz.aaaでアクセスする時に使う秘密鍵をid_rsa_testに設定しています。 .ssh/config Host xxx.yyy.zzz.aaa IdentityFile /home/asial/.ssh/id_rsa_test ２. ホストキーをチェックしないようにする LinuxからサーバーにSSH接続
screen(だけ)の時代は終わり。tmuxでリモートコンソールを便利に使うTips
※ コメントをいただきましたので、一部本文を修正させて頂きました。 １．サーバー・クライアントモデルというのはネットワーク接続なイメージになってしまいますので、取り外しました ２．mouse-utf8に関してコメントを頂いたので補足しました ３．タイトルを「screenの時代は終わり。tmuxでリモートコンソールを便利に使うTips」から「screenだけの時代は終わり。tmuxでリモートコンソールを便利に使うTips」に変更しました（変な誤解を受けられた方がいらっしゃったため） お久しぶりの田中です。最近、ずっと大型案件に携わっていた関係で、あまりブログ等でのアウトプットができていませんでした。これからはドンドン書いていきますので、どうぞよろしくお願いします。本日はGNU screenと同様の機能を持つtmuxを紹介します。 GNU screenやtmuxは、1つのターミナル画面上に複数
PHP+Kestrel+Supervisorでお手軽タスクキューイング
こんにちは、久保田です。 ウェブサービスでは、ユーザのアクションに従ってバッチ処理を行わなければならないケースがままあります。この記事では、バッチ処理の手法の一つであるタスクキューイングをPHPとKestrelとSupervisorを利用して行うやり方の導入を紹介します。 なぜなにタスクキューイング ウェブサービスでは、ユーザのアクションに従って非同期にバッチ処理を行うようなケースがよくあります。 例えばflickrのような写真を共有するウェブサービスで言えば、ユーザが写真をアップロードしたあとに非同期でその画像の複数のサムネイル生成や加工をしなければならないケースがあります。 よく見られるのは、DBにバッチ処理のためのタスクデータを入れておいて、後でcronで定期的に起動するワーカープロセスからバッチ処理を行う方法です。このやり方には、ワーカーを複数プロセスで扱いづらい、処理がリアルタイ
node.jsの開発時に役立つモジュール
こんにちは、中川です。 今回もPHPには一切触れないで、node.jsについて書いていこうと思います。 主に開発時に便利なモジュールを紹介いたします。 ■今回紹介するもの ・nvm ・node-dev ・node-inspector ■nvm ・https://github.com/creationix/nvm node.jsはまだまだ開発途上ということもあり、頻繁にバージョンアップが行われています。 現在では0.2系のstableバージョンと、0.3系の開発バージョンがあります。 複数のバージョンをインストールして、簡単に切り替えられるようにするために、 開発環境では、nvmを使っています。 セットアップは非常に簡単で、 $ git clone git://github.com/creationix/nvm.git ~/.nvm $ . ~/.nvm/nvm.sh
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
UMLを描こう – Vol.1 クラス図
こんにちは，浦本です。 今回はUML(Unified Modeling Language)について取り上げたいと思います。 UMLとは？ UMLとは，システムの設計を様々な切り口でモデル化し図示するためのグラフィカル言語です。 オブジェクト指向設計では，設計概念を表す何らかの設計図が必ず必要になります。 なぜならば，コードだけでは，コンポーネントの構成や，オブジェクトの相互作用を 分かりやすく表現できないからです。 特に，ある程度規模の大きなシステム開発においては，設計図が無い場合， 拡張性やメンテナンス性に乏しいクラスの山が作られがちです。 設計図が無いと，システムが要求を満たしていることを保証するユニットテストも行えません。 そこで，オブジェクト指向設計を，標準化された図として表現できるUMLが役に立つわけです。 最低限必要なのはクラス図とシーケンス図 UMLには10種類以上もの図があ
Silverlightで動画プレイヤーを作ってみた
MicrosoftのSilverlightを使ってみました。 Hello Worldを出しただけじゃ面白くないので、簡単な動画プレイヤーを作ってみました。 SilverlightではXAMLと呼ばれるXMLベースのファイルで視覚的な構造を定義し、それをJavaScriptを使って動かします。 Flashとは違いテキストのままで動作させることが出来るので、コンパイル作業は必要ありません。 Silverlightはマルチプラットフォーム・クロスブラウザ対応ということですが、現状だと結構動かない環境もあるようです。Windows2000などでは動作しないかもしれないです。 Silverlightで構築するときは、基本的に以下の５つのファイルを使用します。 Silverlight.js ・・・Silverlightの本体 Default_html.js ・・・基礎部分。ほぼ編集することはない。
jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる
こんにちは。サイフをなくしてヘコんでいる松田です。 今回はトレイン・トレインで使用することになった、入力補完ライブラリ「jquery.suggest」を使ってみたいと思います。 入力補完機能とは、テキストフィールドにある程度文字を入力すると、その文字が含まれた単語のリストを表示してくれるという機能です。サジェスト機能とも呼ばれます。 Googleサジェストを使ってみればどんなものか分かると思います。 「javascript suggest」などで検索してみると、 ・suggest.js ・AjaxAutoSuggest ・jquery.suggest などなど、いくつか候補が出てきます。 この中から選別したわけですが、suggest.jsはサーバーと通信を行わなずに、最初に読み込んだリストから取り出すだけなのでダメ、AjaxAutoSuggestはデザインが凝り過ぎでトレイントレインの雰囲
リバースプロキシでSSL証明書のコスト削減！
192.168.1.157 example.com 192.168.1.157 1.example.com 192.168.1.157 2.example.com 192.168.1.157 3.example.com $SERVER["socket"] == "xxx.xxx.xxx.xxx:443" { ssl.engine = "enable" ssl.pemfile = "/etc/lighttpd/ssl/server.pem" url.rewrite-once = ( "^/([^//]+)/(.+)" => "http://$1.example.com/$2") } proxy.server = ( "" => ( ( "host" => "xxx.xxx.xxx.xxx", "port" => "81" ) )
coLinuxでUbuntu 7.04をネットワークインストール
こんにちは、スパイシーチキン担当の熊谷です。スパイシーチキン担当ということで、今日のお昼ご飯はもちろんスパイシーチキンです。そろそろ飽きてきたといいながらも、スパイシーチキン、まだ食べています！ 以前も書きましたが、私の開発用PCやメインのノートPC上で動作しているcoLinuxではDebian etchを使用しています。Debian etchは比較的最近リリースされたということで、以前の安定版のように古くさい？という感じはあまりしなくなり特に不満はありません。しかし、例えばデスクトップ環境として使うとか、保守性も大事だけどもう少し新しさが欲しいとか、定期的な新しい安定版に興味があるとか。そんな欲求が出てきてしまう今日この頃、だったらUbuntuを使ってみようじゃないかと思い立ったわけです。 私にとってUbuntuは、バージョン4.10や5.04の頃にデスクトップ環境としてメインで使用して
jQueryで長いURLやメールアドレスを折り返して表示する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>linkwrapper.jsのサンプル</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.linkwrapper-1.0.3.js">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gitを使い始めたらやっておきたい便利な設定いろいろ