タグ

ブックマーク / blog.asial.co.jp (10)

  • 透過がサポートされたnode-webkit(NW.js)でガジェットを作ろう

    こんにちは、古見澤(コミザワ)です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascriptCSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何?という方は、前回の記事も合わせてお読みください。 HTML5+CSS3+JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※エントリーはWindows環境(Win7 Professional x64)での話になります。 (透過機能はMacLinuxでも使えます、後述するマニュアルを参照ください。) また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能

    透過がサポートされたnode-webkit(NW.js)でガジェットを作ろう
  • HTML5+CSS3+JSでネイティブGUIアプリが作れる、node-webkitを触ってみる

    こんにちは、古見澤です。 アルバイト時代以来となるので、実に7年ぶりの投稿となります。今後共よろしくお願いします。 久しぶりに技術畑に帰ってきたためブランクを取り戻すのに苦労していますが、鉄板の技術から胡散臭い(褒め言葉)新技術まで、色々なことが体験できる環境は楽しいですね。 さて、今回はプライベートで少し node-webkit を触る機会があったので、その紹介記事となります。 node-webkitとは node-webkitChromium と node.js ベースで作られた、GUIアプリを動作させるランタイムです。 アプリはHTMLJavascriptで記述を行い、作ったアプリはLinuxMac OS X、Windowsで動作が可能です。 配布元:https://github.com/rogerwang/node-webkit node-webkitを利用したアプリケーショ

    HTML5+CSS3+JSでネイティブGUIアプリが作れる、node-webkitを触ってみる
  • 最近のJavaScript開発まとめ

    こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ

    最近のJavaScript開発まとめ
  • nginxで認証用proxyサーバを作成

    nginxと言えば、言わずと知れた高速なwebサーバ+ロードバランサです。 とにかく軽量で高速なので、apacheをこれに置き換えて高速化という話もよく聞くようになって来ました。 先日、このnginxとmemcacheを組み合わせてセッション認証サーバを構築したので、それについて書こうと思います。 今回作るシステムは、静的コンテンツを配信するサーバがすでにあり、 ・認証機構(ログイン画面)を追加 ・変更を最小限に抑えて開発 ・スケールアウトしやすい ・アクセス数が多いので、できるだけ処理を軽くする ことを目的とします。 この手のシステムは、既存システムに手を入れるのが普通ですが、既存システムでプログラムが動かないことには話になりません。 という事で、認証機構を追加したプロキシサーバを作成することで実現したいと思います。 仮に、PHPのみを使用して実装する場合は、下記のように出来ます。 ・ロ

    nginxで認証用proxyサーバを作成
  • もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法

    こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭

    もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法
  • イラストでわかる!git入門の入門

    こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット?ジット?俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの?なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは?と思い、 今回はgit入門の入門、gitってなんだ?というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに? プログラムを書いていて、こんなことありませんか?私はあります…

    イラストでわかる!git入門の入門
  • 独自/ミラー yum リポジトリを作ろう

    % lftp -e 'mirror --delete --only-newer -X *isos/* /centos/5.4 /path/to/mirror/centos/5.4  & & exit' (site url) パスは適宜環境に合わせて読み変えてください。 2通りの方法を紹介しましたが、いずれも既にあるミラーから差分を見つけ、更新のあったパッケージのみをダウンロードしてきます。 なお、--exclude(rsync)や -X(lftp)で指定した名前のディレクトリはダウンロードされませんので、ローカルに不要なisosなどのパッケージは除外しておきましょう。 これを深夜に1日1回程度の頻度でcronで回してやれば、手軽にローカルのリポジトリを獲得することができます。 あとは、ここでDLしてきたパッケージ群をHTTPDの見えるところに置いてやり、公開するようにhttpd.confを

    独自/ミラー yum リポジトリを作ろう
  • yumリポジトリの構築

    createrepo -v /var/www/html/repos/cent5/i386/ 1/4 - vim-common-7.0.109-3.el5.3vs1.i386.rpm 2/4 - vim-enhanced-7.0.109-3.el5.3vs1.i386.rpm 3/4 - vim-minimal-7.0.109-3.el5.3vs1.i386.rpm 4/4 - vim-X11-7.0.109-3.el5.3vs1.i386.rpm Saving Primary metadata Saving file lists metadata Saving other metadata # createrepo -v /var/www/html/repos/cent5/i686/ 1/4 - vim-common-7.0.109-3.el5.3vs1.i686.rpm 2/4 - 

    yumリポジトリの構築
  • HTML5+CSS3の導入時に役立つ7つの設定

    こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.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

    HTML5+CSS3の導入時に役立つ7つの設定
  • jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる

    久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下

    jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
  • 1