XML より JSON より MessagePack が便利です
こんにちは。開発担当の森本です。 今回は、Fenrir Pass Connect を支える技術にちょっと関係のある、 web などを介してデータを交換するときの話をしたいと思います。 データ構造の共通化 → 実装も共通化できる プログラム間、端末同士、Web 経由などでデータを送ったり送られたりするときに、データは決まったフォーマットで送られる必要が有ります。 たとえば、今表示しているこのページでは、本文は HTML、画像は PNG などのバイナリフォーマット、web API との連携などは JSON や XML、スタイルシートや JavaScript はそれぞれ独自のテキストフォーマットが使用されています。 一般的なプロダクトでは上記のうち、XML や JSON が使用される事が多いと思います。 これらのフォーマットは普及率が高いため情報も多く、多くの処理系で枯れて安定した実装があるため
有名ウェブサービスが使っている/作っているオープンソースまとめ
こんにちは、開発担当の松本です。 ウェブサービスとの連携が可能になる Fenrir Pass Connect が絶賛開発中 である Fenrir 内では、ソーシャルやらウェブサービスやらという単語が飛び交うようになりました。 そこで、Fenrir Pass Connect で利用できる中から、いくつかのウェブサービスをピックアップして、これらのサービスのオープンソースの活用状況などを調べてみました。 というわけで、これらサービスの近況などを紹介しつつ、使っている/作っているオープンソースなどをいくつか紹介します。 Twitter 短いテキストを投稿・閲覧するだけというシンプルなサービスをメインとし、2012 年 3 月の時点でのアクティブユーザは 1.4 億人。 サービス開始は 2006 年 6 月からで、当初は Ruby (Ruby on Rails) で実装されていましたが、2011
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
透過画像の表示の際にどんな処理がなされているのか
こんにちは、Sleipnir 3 for Windows 開発担当の森本です。 ←透明度付き画像です 今回は透明度のある画像を扱うときの話をしたいと思います。 近頃ハードウェアが高性能化するに従って、CSS3 では rgba( 0,0,255,0.5 ) のように色が指定できるなど、透過処理が広く使われる様になってきました。 普段、何も考えずテキトーに使用している透過処理ですが、実際どのような計算がされているのか、を解説していきます。 まず、一般的なコンピュータで画像の扱いを説明します。 コンピュータではアナログな情報は扱いづらいので、画像を細かいマス目状に区分けし、 マス目( pixel と呼びます )ごとの色を、「赤緑青」の三色の足し合わせとして表現しています。(詳細は この辺 からどうぞ) 赤緑青それぞれの明るさと、透明度を C 言語風に表現してみます。 struct pixel
実は違う。クロスブラウザでの gif アニメーション再生速度の合わせ方。
*Safari 5.0 系は Ienternet Explorer と同じで 0.06秒 からしか対応してません。 対応している速度よりフレームレートが短くなると明らかに遅くなっているのが分かると思います。 各ブラウザで対応しているフレームレートの限界を超えると、強制的に 0.10秒 になります。 （Safari、Google Chrome など一部のブラウザでは違う） 以上のことからクロスブラウザで gif アニメーションの再生速度を合わせる方法は、フレームレートを 0.06秒 までにすることです。 gif アニメーションを作る、またはこれから作ってみたいと思っている方は、フレームレートは 0.06秒まで！ということを覚えておくといいかと思います。
WEB+DB PRESS 特集記事「プログラマが知るべき UI デザインの基礎知識」書きました!
こんにちは、広報担当の片桐です。だいぶ久しぶりの登場です。 フェンリルの広報として、皆さんにお知らせです。 来週 8/24（水）発売予定の 技術評論社発行「WEB+DB PRESS Vol.64 」に、 フェンリルの中の人が頑張って執筆した特集記事が掲載されます!! 特集１ プログラマが知るべきUIデザインの基本知識 ～わかりやすい表示，気持ちの良い操作，直感的フィードバック～ 「UI デザインってどうすりゃいいのさ？」 「いいデザインってどういうものなんでしょう？」 という疑問はモノづくりを行う上で、必ず悩んだり考えたりする重要な要素ですよね。 本特集では、フェンリルが考える UI デザインについて、中の人が基本的な考え方など具体例も交えて、まじめに語っちゃってます。 Web サイト/Web アプリケーション、モバイルアプリ等の UI デザインについても書かせていただいてます。 今回は現
ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
