MOONGIFT

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。

先進的。HTML5/CSS3対応のデザインフレームワーク「52Framework」

タグ: [] [] [] [] [] [] []

52FrameworkはHTML/JavaScript/CSS製のオープンソース・ソフトウェア。これまでのWebデザインが今後、大きく変わっていく可能性を秘めているのがHTML5やCSS3だ。まだ実験段階というイメージが強いが、GoogleやYoutubeをはじめとする大手サイトでも取り入れられ始めている。

ピクチャ 300.png
Safari4での表示

 

最大シェアを持つIEの対応がいまいちなため、積極的に取り入れていくのは難しいと感じているかも知れない。しかし時代は進んでいる。ついにHTML5/CSS3をターゲットにしたデザインフレームワークが登場した。それが52frameworkだ。

(もっと読む)

February 9th, 2010 Posted by admin | no comments

サイトのデザイン微調整に。ブラウザ上でCSS修正「Brosho Plugin」

タグ: [] [] [] [] [] [] [] [] []

Brosho PluginはJavaScript製jQueryプラグインのオープンソース・ソフトウェア。Webサイトのデザインを調整する時には、ローカルのテキストエディタでCSSを修正し、Webブラウザで再読込するというのが一般的だ。だが切り替えの手間がかかる。

ピクチャ 221.png
オンラインでデザイン修正

 

そこでFirefoxであればFirebugを使ってその場でデザインを変更してみて確かめることもできる。だがブラウザが限定される。ブラウザの壁を乗り越え、オンラインでCSSの修正を行えるのがBrosho Pluginだ。

(もっと読む)

February 2nd, 2010 Posted by admin | no comments

整ったレイアウトのWebサイトを手早く作るためのCSSフレームワーク「Markercss」

タグ: [] [] [] [] [] []

MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。

ピクチャ 175.png
こんな感じのデザインも容易に

 

Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。

(もっと読む)

January 29th, 2010 Posted by admin | no comments

セクシーなボタンでユーザビリティを向上する「Sexy Buttons」

タグ: [] [] [] [] [] [] [] [] []

Sexy ButtonsはJavaScript/CSS製のオープンソース・ソフトウェア。Webサイトのユーザビリティを向上する上で考えたいのがアイコンの使い方だ。素っ気ない文字だけの表示に比べて表現力が高くなり、ユーザビリティも大幅に向上する。

ピクチャ 1.png
アイコン付きの分かりやすいボタン

 

Webサイトにおいて重要なのは最後に実行されるボタンによるアクションだ。そこを分かりやすくすればより多くのレスポンスを得られるようになるはずだ。そこで役立つのがSexy Buttonsだ。画像でボタンを作るよりも簡単にアイコン付きボタンが実現できる。

(もっと読む)

December 19th, 2009 Posted by admin | no comments

Windows MobileでiPhoneライクなインタフェースを実現する「Fluid」

タグ: [] [] [] [] [] [] [] []

FluidはWindows Mobile向けのオープンソース・ソフトウェア。Windows Mobile 6.5が発表されたが、インタフェースはあまり変わっておらず残念な気持ちになってしまった。あれでは個人ユーザを引きつけることは難しいだろう。

3dsearch21.png
どことなくiPhoneに似ている

 

今最大のライバルになるのはiPhoneなのは間違いない。あのシンプルな操作性がWindows Mobileにも必要なのだ。そして擬似的ではあるが、あのインタフェースをWindows Mobile上で再現するのがFluidになる。

(もっと読む)

December 7th, 2009 Posted by admin | no comments

FirefoxでiPhoneアプリのプロトタイプを作成する「iPhonePrototype」

タグ: [] [] [] [] [] [] [] [] []

iPhonePrototypeはオープンソース・ソフトウェアのFirefoxアドオン。iPhoneが日本でも200万台近く出荷されているという話もあってか、徐々にビジネス面での話も聞くようになってきた。iPhoneと言えばネイティブアプリが面白いだろう。そして実際に開発を行う際には何らかのモックアップが必要になる。

ピクチャ 69.png

iPhonePrototypeはまさにそのためのソフトウェアだ。この手のタイプとしてはローカルOSネイティブで動くもの、Webサービス上で行うものが多かったがiPhonePrototypeはちょっと変わっている。その動作プラットフォームにFirefoxを選んでいるのだ。

(もっと読む)

November 28th, 2009 Posted by admin | no comments

Androidアプリの開発者は必須「Android Icons」

タグ: [] [] [] []

Android IconsはEPS/PNGファイルのオープンソース。アプリケーションを開発する際に必要なのはアイディアと技術、そしてデザイン力だ。技術者はアイディアと技術はあるかも知れないがデザイン力に乏しいケースが多い。そのためせっかくの面白いアプリケーションも見た目が貧相で使い勝手悪く見られてしまう。

ピクチャ 261.png
PNGアイコン

 

デザインでマイナス評価をされ、利用してもらえないのはもったいない。そこで使ってみたいのがAndroid Iconsだ。Android Iconsは30個のアイコンファイルをセットにしており、Androidアプリケーションを華やかにするのに役立ってくれるはずだ。

(もっと読む)

November 20th, 2009 Posted by admin | no comments

一つのHTMLファイルを使ったiPhone最適化サイトライブラリ「Magic Framework」

タグ: [] [] [] [] [] []

Magic FrameworkはiPhone向けのオープンソース・ソフトウェア。日本においてもiPhoneが約200万台発売されたという噂だ。ある程度の市場性が出てきたと言えそうだ。そうなるとネイティブアプリや最適化サイトへの需要も高まってくるだろう。

IMG_0619.PNG
メインメニュー

 

幾つかのiPhone向けWebサイトテンプレートがあるが、Magic Frameworkもその一つだ。だが特徴的なのは全体で一つのHTMLのみ提供するという点だ。そしてHTMLファイルをJavaScriptで分断し、スライダを使って表示を切り替えられるようになっている。

(もっと読む)

November 19th, 2009 Posted by admin | 3 comments

iPhone/iPod Touch向けWebサイト向けテンプレート「Webapp.net」

タグ: [] [] [] [] [] [] [] []

Webapp.netはiPhone/iPod Touch向けのオープンソース・ソフトウェア。iPhone/iPod Touchはモバイルデバイスなので画面の大きさに制限がある。そのためPC向けのWebサイトを表示はできるが、できれば最適化されたWebサイトを提供したい。専用のインタフェースを提供すれば、ユーザ体験がぐっと向上するはずだ。

ピクチャ 80.png
iPhone向けサイトを構築する際に

 

そんなiPhone/iPod Touch向けのWebサイトを構築するのに使えるのがWebapp.netだ。Webapp.netはHTML/JavaScript/CSSで提供されており、iPhone/iPod Touchに対して最適化された、リッチなインタフェースを提供してくれる。

(もっと読む)

November 14th, 2009 Posted by admin | no comments

MOONGIFTネットワーク。こちらもぜひご覧ください。
MOONGIFT
Open Service
Rails 2.0
Resident on Net
iPhone最適化
リーンソフトウェア
MarketPedia
Producing Web
Cool Coding