第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
第6回 Firebaseデータベースの効率的なデータ構造と高速化のポイント | gihyo.jp
これまでの連載で見てきたように、Firebaseのデータベースは任意のJSONオブジェクトをツリー状に保持できる柔軟なNoSQLです。一般的なリレーショナルデータベースのような厳格なスキーマ定義等は存在せず、自由な発想でデータを格納することができます。 しかしながら、必要なデータを何でも1つのツリーの中に含めてしまうと、思いもよらない無駄な大量のデータ転送やパフォーマンスの低下を招くことがあります。今回は、Firebaseで効率的かつ高速にデータを扱うためのベストプラクティスをご紹介します。 今回は例として以下のようなチャットアプリケーションを想定し、データをどのように持つとより効率的なのかを確認していきたいと思います。 チャットルームが複数存在する チャットのメッセージはルームごとに管理する 複数ユーザがおり、ユーザは任意のルームに参加して発言することができる 効率的なデータ構造 データ
第3回 MongoDBのクエリを使いこなそう | gihyo.jp
はじめに 本記事では、MongoDBのクエリを解説します。MongoDBはリレーショナルデータベース（以下"RDB"と略記）ではないため、SQLは使用できません。その代わり、MongoDB特有の「Mongoクエリ言語」を用います。Mongoクエリ言語のCRUD操作については公式ドキュメントに詳しい解説があります。 本記事の構成は、最初にMongoクエリ言語の特徴について解説し、2ページ目ではSQLとMongoクエリ言語の比較を行います。3ページ目では、MongoDBクエリ言語の使い方を説明し、最後に、プログラミング言語からの利用の仕方の説明として、Rubyからの利用を説明します。 Mongoクエリ言語の特徴 Mongoクエリ言語には以下の特徴があります。 コレクションの各メソッドを用いてCRUD操作をします メソッドの引数にはJSON形式のデータを渡します 変数が使えます 制御構造が使えま
第9回 MongoDBの地理空間インデックス | gihyo.jp
経度・緯度は配列またはハッシュとして保存します。今回はlocというフィールドに配列として保存します。yamanotesenというコレクションにinsertするクエリは、以下のようになります。 > db.yamanotesen.insert({ name:"五反田",loc: [ 139.723822, 35.625974 ] }); > db.yamanotesen.insert({ name:"恵比寿",loc: [ 139.710070, 35.646685 ] }); > db.yamanotesen.insert({ name:"新宿",loc: [ 139.700464, 35.689729 ] }); > db.yamanotesen.insert({ name:"新大久保",loc: [ 139.700261, 35.700875 ] }); > db.yamanotesen
第1回 Hubotとは何か | gihyo.jp
本連載では、GitHub社が開発したチャットbot開発・実行フレームワークである「Hubot」を使用して、チャットツールにオリジナルのbotを住まわせ、開発フローに組み込むことで開発を楽にする方法について解説していきます。 botとはなにか 開発の現場で、開発チーム内のコミュニケーションのためにIRCなどのチャットツールを導入することは、よく見る光景だと思います。そんなチャットツールに常駐してチャット経由でコマンドを待ち受けて実行したり、決められた条件に従ってチャットに発言してチャットの参加者に通知したりするようなプログラムのことをbotと呼びます。 Skype、HipChatやChatWorkなどコミュニケーションツールが多様化した現代においても、それぞれのチャットツールに対応したbotが開発されており、botを開発するためのフレームワークも様々な形で提供されています。botを導入するこ
2013年のソーシャルWeb | gihyo.jp
この傾向だけを見れば、今年は「すでに飽和状態に近い市場に対して、一定数のユーザのシェアを奪い合う」という構図になるということが言えるのですが、事情はそこまで単純ではありません。「本当に飽和しているのか？」ということをもっと考える必要があります。 無料通話アプリが開く新たなゲーム市場 筆者が「飽和していないのでは？」と懐疑的になる根拠は、昨年に大ヒットした無料通話・トーク機能を持つスマートフォンアプリの存在です。LINE、comm、そしてカカオトークといったアプリが多くのユーザに使われ出した年が昨年だったと言えます。これらのアプリを使っているユーザは、おそらくGREEやMobageといったソーシャルゲームのアクティブユーザとは被っていないと考えられます。どちらかというと、mixiやTwitterを使ってきたユーザと言えます。 例えば、すでにLINE POPは多くのユーザが遊んでいます。この
Webサービスつくってるけど何か質問ある？―「ボケて」のゆーすけべーと「nanapi」のけんすうが答えました！（後編） | gihyo.jp
Webサービスつくってるけど何か質問ある？―「ボケて」のゆーすけべーと「nanapi」のけんすうが答えました！（後編） 前編に続いて、和田裕介さん著『Webサービスのつくり方 ――「新しい」を生み出すための33のエッセイ 』の出版記念イベント「Webサービスつくってるけど何か質問ある？」の内容をレポートします。 ユーザは特定のスマフォアプリだけを交互に起動している 普段からご自身でWebサービスを作っているお二人が、どのようなサービスに関心を持っているかも興味のあるところです。注目する開発者を聞かれると、和田さんはTwilogやSEOチェキ！の作者である@roprossさんを挙げられ、的を得ていてつい使ってしまうサービスだと話していました。また、海外で注目しているサービスについては、古川さんがYeeyanという中国のサービスを挙げました。このサービスはユーザの力で著作物を中国語に翻訳しそれ
Webサービスつくってるけど何か質問ある？―「ボケて」のゆーすけべーと「nanapi」のけんすうが答えました！（前編） | gihyo.jp
Webサービスつくってるけど何か質問ある？―「ボケて」のゆーすけべーと「nanapi」のけんすうが答えました！（前編） 秋葉原の書泉ブックタワー9Fのイベントスペースにて、11月30日(金)19時より和田裕介さん著『Webサービスのつくり方 ――「新しい」を生み出すための33のエッセイ』出版記念イベント「Webサービスつくってるけど何か質問ある？」が開催されました。この記事ではその内容についてレポートします。開始時刻になっても和田さんが現れないハプニングはありましたが、イベント開始の数分後に和田さんも会場に姿を現し、その後はつつがなく進行していきました。 知り合ったきっかけは1981年生まれの会 イベントには、『Webサービスのつくり方 ――「新しい」を生み出すための33のエッセイ 』著者であり「君のラジオ」や「ボケて」の開発者としても知られるエンジニアの「ゆーすけべー」こと和田裕介さん
Gitに潜む光と闇 | gihyo.jp
今年に入ってから、急速にGitが注目を浴びています。Google Trendsを見ると、Subversion、Mercurialなどに比べると圧倒的にGitの人気が高いのがわかります（図1）。 図1 Google TrendsによるGit（青）、Mercurial（赤）、Subversion（橙）の検索数 しかしながら、Gitを利用する人の意見は2つに分かれています。 A．わかりにくい B．すごく便利だ なぜこのようなに印象が二分されてしまうのでしょうか? 本稿では、「Gitに潜む光と闇」と称してこれらの意見に対して考察していくことにします。 Gitはわかりにくい? Gitがわかりにくいと思う人は、どうしてそう感じるのでしょうか。そのあたりのおおよその事情は下記のようなことだと考えられます。 （1）Subversionとコマンド体系が少し違う バージョン管理ツールとして、Su
第1回 memcachedの基本 | gihyo.jp
株式会社ミクシィ 開発部 システム運用グループの長野です。普段はミクシィのアプリケーション運用を担当しております。今回から数回にわたり、最近Webアプリケーションのスケーラビリティの分野で話題になっているmemcachedについて、弊社開発部 研究開発グループの前坂とともに、使い方や内部構造、運用について解説させて頂きます。 memcachedとは memcachedは、LiveJournalを運営していたDanga Interactive社で、Brad Fitzpatrick氏が中心となって開発されたソフトウェアです。現在ではmixiやはてな、Facebook、Vox、LiveJournalなど、さまざまなサービスでWebアプリケーションのスケーラビリティを向上させる重要な要素になっています。 多くのWebアプリケーションは、RDBMSにデータを格納し、アプリケーションサーバでそのデータ
第15回 DateTime：APIの標準化をめざして | gihyo.jp
Cから継承したAPI プログラマにとって、ログの解析や作成などに含まれる日付や時刻の操作は切っても切り離せない分野のひとつです。もちろんPerlにも日付や時刻を操作するための関数は組み込まれています。 ただし、Cから継承してきたlocaltime()やgmtime()の返り値は、お世辞にもわかりやすいとはいえません。リストコンテキストで呼び出せば年月日、時分秒などの値を取り出せるとはいえ、単一の配列で受け取ると、個々の要素を使うときに直感的ではなくなりますし、明示的な名前をつけたスカラー変数を並べて受け取るのはいかにも冗長です。 use strict; use warnings; # 短いけれど非直感的 my @tm = localtime(); $tm[5] += 1900; $tm[4]++; printf "%04d-%02d-%02d %02d:%02d:%02d\n", reve
2012年のソーシャルWeb | gihyo.jp
あけましておめでとうございます。よういちろう です。新春企画でソーシャルというキーワードを担当して今年で3年目となりました。さっそく2012年のソーシャルWebがどうなっていくのか、占っていきたいと思います。 前回、そして前々回にどんなことを書いていたか気になる方は、以下のリンクからお読みください。 2011年のソーシャルWeb（前編） 2011年のソーシャルWeb（後編） 2010年のソーシャルWeb（前編） 2010年のソーシャルWeb（後編） ソーシャルゲーム分野 まずは、IT業界において昨年最も注目を集めたソーシャルゲーム分野を取り上げます。 ソーシャルゲーム市場拡大の鈍化 インターネットにおける2011年度の最大の出来事、それはソーシャルゲーム市場の急速な拡大でした。その代表格がGREEおよびモバゲータウンであったことは、誰の目にも明らかでした。一昨年のソーシャルゲームの市場規模
第5回 Chrome ExtensionのAPI#2 | gihyo.jp
こんにちは、Google Chrome ExtensionsのAPI Expertになりました太田です。今回は、これまで使用していないAPIを中心に使った新しいExtensionを作成してみます。 が、その前に大きなニュースとして、Extensionsが有効になったbeta版とExtensionsギャラリーが公開されました。Macのbeta版も公開されましたが、こちらは拡張を使うことはできませんのでご注意ください。 Extensionsを作られた方はDeveloper DashboardからExtensionを登録できます。登録時の注意などはブログにまとめていますので、そちらをご参照いただければと思います。また、beta版のリリースに合わせて、Google Chrome拡張について日本語での情報交換ができるGoogle準公式コミュニティのChromium-Extensions-Japanも
第1回 面白法人CTO貝畑政徳氏に訊く（前編）―「変われる人」づくり | gihyo.jp
先のよめない業界で、先を考えてみること かたまじめなタイトルで恐縮ですが、私がこの連載を起案したのは、そのものズバリ「Webクリエイティブ職の学び場」について、あるいは学習とキャリアについて考えてみたかったからなのです。 歴史の浅いWeb業界には先人がたどった定年までのキャリアモデルもありませんし、あったからといって役立つとも思えない不穏な世の中。テクノロジーも日進月歩で、目先の仕事をこなすのに覚えなきゃならないことも多いから、自分のキャリアを長い目でみて考えたり行動を起こす機会ってなかなか持てなくはないでしょうか。 ただ、完全なる計画を立てるのは不毛でも、何か早くから考えたり動いておいて損はない、そのほうが「今」ももっと有意義になるという事柄があるんじゃないかと思うのです。そこで、今回の連載です。現場でWebクリエイティブ職を牽引する方々を訪ね歩き、スタッフ育成の考え方や実際の取り組み、
ハンズオンレポート | gihyo.jp
本稿では、Chrome+HTML5 Conferenceで開かれた２つのハンズオンについてレポートします。 HTML5/CSS3/JavaScriptのブラウザ実装が進化してきて、リッチなWeb UIを実装することが可能になってきました。特に大きな特徴として、プラグインを必要としないアニメーションを実装できるCanvas/SVGや今まで画像頼りであった綺麗なボタンなどを画像もプラグインもなしで実装できるCSS3があります。これらをはじめて使う方々向けの2つのハンズオンが行われました。なお、両ハンズオンとも講演中の映像や資料は公開されておりません。 JavaScript初心者のためのSVG/Canvasアニメーション入門 １つ目のハンズオンは、羽田野太巳さんによるSVG/Canvasアニメーションについてです。 まず最初にCanvasとSVGの、次の2点の違いを言及しました。 Canvasは
「第19回 HTML5とか勉強会」活動報告 | gihyo.jp
第19回目の本勉強会は、7月13日に慶応義塾大学の日吉キャンパスをお借りして開催しました。今回のテーマは「HTML5を用いたサイト開発プラクティス」で、HTML5時代に伴ったWebサイト開発のHOW TOを中心に2つのメインセッションと3つのショートセッションの講演がありました。本稿では、本勉強会の模様をレポートします。 PJAX ～HTML5時代のAJAXサイトプラクティス～ 最初にPJAXという手法について、NTTコミュニケーションズの小松さんから講演いただきました。 最近では、AJAXを使ってページの切り替えをせずにコンテンツを動的に切り替えるサイトが増えてきました。これらのサイトは、従来のような画面全体を切り替える方式に比べて通信量を減らすことができますし、何よりもユーザビリティをより良くすることができます。 しかし、AJAXを使ったサイトはいくつかの問題点を抱えています。 ブラウ
XMLの第一人者Tim Bray氏「URLに#!入れるな」 | gihyo.jp
Tim Bray氏のブログ記事を解説したものです。Tim Bray氏はXMLの生みの親であり、最近はGoogle Developer AdvocateとしてAndroidの普及に務めています。Twitterをはじめ、最近のWebサービスにて「twitter.com/#!/timbray」のようにURLに「#!」というhash-bang（shebang）が含まれるのをよく目にしますが、Tim氏はこの流行に批判の意を示しています。 hash-bangを含むURLはAjaxを利用するために考えられたしくみです。#以降は単なるフラグメントとして処理されるため、サーバは#より前のURLを解釈しコンテンツを出力します。そしてブラウザにてJavaScriptが#以降を解釈し、以降のパスに相当するコンテンツをAjaxにて取得しコンテンツを書き換えます。このしくみができた背景は、Ajax後のコンテンツをSE
第26回 RMagickを用いた画像処理（1）リサイズ | gihyo.jp
rubyで画像処理をする場合には、RMagickが使われます。今回はその中でもウェブアプリケーションを作る上で使用頻度が高いであろう、リサイズのやり方についてご紹介します。 はじめに 本稿で紹介するすべてのサンプルコードは、事前に以下のコードを実行している前提で記述しています。また、破壊メソッドと非破壊メソッドの両方があるメソッドについては、サンプルコードでは特段の理由がない限り破壊メソッドを利用しています。 require 'rubygems' require 'rmagick' scale = 0.3 width = 160 height= 160 サンプル画像は以下を用います。 図1 original.png ※この画像は、「フリー素材屋Hoshino」の素材を使用させていただきました。 画像ファイルの読み込み RMagickで画像ファイルの読み込みを行う場合は、以下のようにrea
第41回 Sinatra 1.0の世界にようこそ | gihyo.jp
はじめに SinatraはRubyで記述されたWebアプリケーションを素早く、簡単につくるためのDSL（ドメイン固有言語）です。 すでに第7回で、原悠さんにより「小規模Webアプリのためのフレームワーク、Sinatra」というかたちで紹介されています。 簡潔な文法で、高い表現力を持つSinatraは、アメリカのRubyコミュニティや企業を中心に、瞬く間にユーザを増やしました。また、Rubyという一言語に留まらず[1]、Sinatraを模したフレームワークが多く作られている現状からも、SinatraはWebアプリケーション開発そのものにも大きな影響を与えたと言えます。 最近ではここ日本でも、個人利用を中心に、そこかしこでSinatraを使って開発をしている、という話を聞くようになりました。筆者自身、1ユーザとして現在業務で利用しており、1年前は知る人ぞ知る存在だったSinatraは、実際に
第3回 transformプロパティ | gihyo.jp
今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが、11月以降は正式にW3CにEditors Draftとして受けいられ、現在は策定中です[1]。 今後のブラウザでは、より一層のCSS3やSVG, HTML5の対応、レンダリングエンジンのスピードに焦点があてられます。いち早く、CSS3に慣れ実践的に使えるように、今から新しいセレクタも含めプロパティを勉強し実践で使えるようしておくべきでしょう。 今回説明するプロパティは『transformプロパティ』と『transform-originプロパティ』です。両方のプロパティに共通するtransform（トランスフォーム）という名前のとおり、『変形』を実装するためのプロパティです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
