日本のWebサイトデザインはもの凄く古くさいなんてよく言われます。情報設計を適切に行っていく風潮の中、未だにゴミゴミしたデザインのサイトがなんと多いことか。世界トレンドを追従しなければいけない訳ではありませんが、それでもちょっとがっかりなデザインは多いです。 しかし日本ならではの良さを活かすと、それは世界にも通用するデザインになりそうです。そんな良さを感じさせてくれるのがjpn-filter.cssです。 jpn-filter.cssの使い方 jpn-filter.cssは日本っぽいスタイルのCSSフィルターになります。 Ninagawa。蜷川実花さんが撮影した写真のような明るさに仕上がります。 Kiyomizu。緑の葉によく合うフィルターとのことです。 Origami。影で囲むことで昔の思い出を表現しています。 Namahage。赤が強調されています。あのなまはげからきたネーミングです。

最近はWebフォントが人気です。アイコンのように使ったり、ロゴのように使うこともできます。しかし基本的にWebフォントはTrueType Fontなどのファイルを用意しておいて使われているでしょう。 もっとWeb Fontをダイナミックにプログラマブルに扱おうというソフトウェアがPlumin.jsです。動的にWeb Fontを作成できるソフトウェアです。 Plumin.jsの使い方 こちらは実行前。 実行後。a/i/oが変わっています。 文字の太さを動的に変更することもできます。 ちょっと太く。 さらに太く。 使い方としてはこんな感じです。 var font = new p.Font({ familyName: 'Demo', ascender: 800, descender: -100 }), a = new p.Glyph({ name: 'a', unicode: 'a', adva

スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl

1994年に2人のプログラマによって開発されたブラウザがOperaです。一時期はその高速さもあってとても人気がありました。しかしFirefoxやGoogle Chromeの人気に押されて徐々にシェアを失い、OperaはWebKitの採用であったり、その開発方向性を変えつつあります。 そんなOperaの文化を感じられるブラウザを開発しようというプロジェクトがVivaldiです。 Vivaldiの使い方 Vivaldiは世界を変えよう、既存のブラウザシェアを大きく変えようとは考えていないようです。自分たちと自分たちの友人が便利に使ってもらえる、そんなブラウザプロジェクトです。ブラウザ自体、Reactを使い、HTML5技術を使って開発されているのも特徴です。 VivaldiはWindows/Mac OSX/Linux用のソフトウェアです。 Vivaldi - A new browser for

最近はフロントエンド開発が盛んです。そんな中で開発補助ツールも数多く開発されています。あえて自分で補助ツールを揃えることなく、ジェネレータを使えば一気に整ってしまいます。 Proteusはそのためのツールになります。Middleman、Jekyll、Gulpに対応した開発環境構築ツールになります。 Proteusの使い方 インストールはRubygemsでできます。 $ gem install proteus-kits インストールが終わったらプロジェクトを生成します。 $ proteus new middleman your-project-name この場合はMiddlemanを使っています。 生成されたディレクトリに入って、セットアップを行い、サーバを立ち上げます。セットアップはbundle installなどを行ってくれます。 $ proteus setup $ proteus se

Webサイトを作る際、殆どの場合CMSが欲しくなりますよね。かといって大型なものは入れるとデザインを変更するのも大変ですし、運用も面倒です。もっとシンプルに扱えるものが欲しいと思うのではないでしょうか。 そこで試して欲しいのがWonderCMS、ごくごく小さなPHP製のCMSです。データベース不要で、手軽に使えそうです。 WonderCMSの使い方 ログインした後の画面です。ログインする前とはSettingsのバーがあるかないかくらいの違いしかありません。 Settingsをクリックすると設定メニューが表示されます。テーマの変更やサイトタイトルなどが変更できます。 ナビゲーションも動的に追加できます。 右上にTestというリンクが追加されました。クリックしてみます。 自動的にページが生成されます。この辺りはWikiっぽいですね。後はコンテンツエリアをクリックすると編集モードになります。 編

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの基本と言えばCMSです。最近では何でもWordPressで行ってしまおうと考える風潮もありますが、やはりサイトの特性によって合ったものを選択すべきでしょう。特に何かあった時に内部を探る必要がある場合、既に見知ったフレームワークを使っているかどうかは重要です。 今回はPHP製のCMS、RedKite CMSを紹介します。フレームワークにSymfony2、デザインにBootstrapを採用し、カスタマイズ性も保持されたCMSになっています。 RedKite CMSの使い方 RedKite CMSの特徴の一つにWYSIWYGがあります。ユーザの見ている画面そのままに修正を行える機能です。 左側に出ているアイコンをクリックするとメニューが表示されます。 以下は紹介動画です。

HTML5によってローカルストレージが使えるようになり、キャッシュ以上に速いデータの読み書きが実現できるようになっています。しかし大きな欠点があります。それはストレージが1ドメイン5MBまでに限定されることです。 もっと大きなサイズで保存したい、そう思うこともあるかと思います。テキストデータであれば検討して欲しいのがlz-stringです。テキストデータを圧縮できるJavaScriptライブラリです。利点は圧縮率よりも処理の高速さにあります。 デモです。lz-stringの場合、1msで60 byte（48%）まで軽減しています。対するLZMAは36msで78 byteとなっています。 コンソールで試しています。 ちゃんとデコンパイルすると元の文字列が得られているのが分かります。 日本語でのテスト。696 byteが605 byte になっています。 試した限りでは、短い文字に対して使うと

CMS（コンテンツ・マネジメント・システム）を導入すると、どうしてもシステムにサイト全体のテイストが引っ張られてしまいます。カスタマイズ前提のCMSもありますが、それでも機能面などはシステムが提供するもの以上が提供できないでしょう。 そんな多機能なものではなく、運用担当者が必要なコンテンツを手軽に差し替えられる程度のCMSが欲しい…そう考える方に使ってみて欲しいのがCockpitです。ごくごく小さなCMSです。 使い方 まずはインストールです。といっても単に設置する程度で終わります。 インストールが終わったら、デフォルトのadmin/adminでログインします。 ログイン後の画面、いわゆるダッシュボードです。提供される機能はコレクション、リージョン、メディアマネージャとなっています。 メニューもあります。アドオンを使って機能拡張もできます。 例えばリージョンの一つ。これはフォームを作ってい

WordPress jQuery Mobile and PhoneGap app for iOSはiOS用、JavaScript/PhoneGap製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ブログをアプリ化したいというニーズは良くあります。幾つかやり方はあると思いますが、今回はそのチュートリアルとして参考にしたいアプリを紹介します。ネーミングはそのまんまでWordPress jQuery Mobile and PhoneGap app for iOSです。 トップページです。最初は案内が表示されます。 記事一覧です。 記事詳細。 リンクはクリックで内蔵ブラウザを使って表示します。 このアプリはWordPressのAPIを使い、jQuery MobileとPhoneGapでラッピングしてiOSアプリ化しています。恐らく機能がないのでこのままでは審

デモがありますのでぜひ実際触ってみるべき！ Webのオーサリングツールと言えば長らくDreamweaverが中心でした。それ以外になると一気に手打ちになってしまったりします。最近ではCSSフレームワークを用いることも多いので、それでもさして不便ではありません。 とは言えWebアプリケーションのような複雑なUIを考えた場合、やはりオーサリングツールが欲しいところです。さらに言えばDreamweaverよりも柔軟にデザインができるものが。そんなツールを願っている方に見て欲しいのがStyloです。 これが画面です。Webベースだと思えないほど充実した機能を備えています。 大きさを変えたり、文字を入力したり。 オブジェクトをドラッグした時に隣接するオブジェクトの上辺や中心にスナップする補助線が出てくれるのが格好いいです。 色の変更はピッカーを使って。透明度まで決められるのがいい感じですね。 半透明

これは危険！ 筆者はシムシリーズに良い思い出がありません。例えば夢中になりすぎて学校に遅刻したり、寝不足になったり、気がつくと週末を全てシムシティーやシビライゼーションに費やしてしまったり…ろくな思い出がありません。 そんな触るな危険シリーズの初代シムシティがHTML5/JavaScriptで開発されています。それがmicropolisJSです。 最近のシムシティでは色々なメッセージが出て、街を成長させるパラメータも多彩にありますが、さすがに初代とあって内容がシンプルです。作れるオブジェクトも大して多くありません。 何より怖いのはmicropolisJSはJavaScriptだけで動作しているということです。データを保存する仕組みがないので、中途半端にはじめるとブラウザを終了させることができなくなります（再読み込みすると最初からやり直しです）。 仕事で忙しい方は絶対に下のリンクはクリックし

Monsta FTPはPHP製、GPLのオープンソース・ソフトウェアです。 FTPはパスワードも平文でセキュリティ的にも利用はお勧めしませんが、それでも多くのWebサイトでは使われ続けています。そこでGUIクライアントではなくWebベースで使えるMonsta FTPを採用するのはいかがでしょう。 トップページです。サーバ名、ログインID/パスワードを入力します。 接続しました。ファイル、フォルダの一覧が確認できます。 ファイルはドラッグ&ドロップでアップロードできます。 パーミッション設定です。 フォルダを指定して一括アップロードもできます。 Monsta FTPはAjaxに対応し、ファイルのブラウザへのドラッグ&ドロップによるアップロードにも対応しています。惜しむらくはフォルダ単位でのダウンロードには対応していないことでしょうか。それ以外は十分に使えるFTPクライアントです。 MOONG

Device.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 最近はスマートフォン、タブレット、デスクトップとWebブラウザごとの処理分岐が多くなっています。そのような時に都度ユーザエージェントで判別しているのでは面倒です。使ってみたいのがDevice.jsです。 iPhoneで縦の場合。デバイスの種別やOS、向きが判別できています。 横向きにすれば判定が変わります。 タブレットの場合も同様です。 HTMLソースです。htmlのクラスに追加されています。 向きを変えればhtmlのクラスがリアルタイムに変わっています。 Device.jsではOS（iOS/Android/Blackberry）、向き（縦または横）、種別（スマートフォンまたはタブレット）といった情報をHTMLタグに対して定義してくれます。これを基準にすれば処理判定がとても簡単になるでし

Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。 Webサービスのデザインテンプレートとして一躍有名になっているBootstrap。そのライバルとも言える存在、Pureが登場しました。開発元はあの米Yahooです。 様々なテンプレートが登録されています。こちらはフォーム。 ボタン。フラット系の色合いです。 メニュー。ドロップダウン付きのメニューもサポートされています。 もちろんページネーションも用意されています。 サンプルデザイン。メール風。 Pureは短縮化およびGzip圧縮して5.7KBと小さいサイズなのが特徴です。もちろんレスポンシブWebデザインをサポートしています。ガチガチなデザインテンプレートではなく、必要な場所だけをピックアップしたり、自分なりのカスタマイズが行えるのが特徴に上がっています。 MOONGIFTはこう見る Boostrapは