長方形の観覧車を作る 子供達の独創的ロボットに驚愕のワンダーメイクフェス4 (1/2)
学習塾および幼児教室の運営事業などを手がけるLITALICOは、プログラミング・ITに興味のある人や、年長の小学生～高校生までに向けたIT×ものづくりの祭典「ワンダーメイクフェス4」を10月15日に開催した。 本イベントでは、同社が運営するプログラミング・ロボット教室であるLITALICOワンダーに通う子どもたちによる作品の展示やプレゼン、企業や個人クリエイターによる最新のITツールやガジェットに触れられるコーナー、ロボット製作を体験できるワークショップなどを実施。 今回はロボットクリエイトコースとロボットテクニカルコースの子ども達によるプレゼンテーションの様子をお伝えしたい。 好きなものをプログラミングとロボットで表現 プレゼンテーションでは自分の作った作品の概要を3分間にまとめ、観客の前で発表する。ロボットクリエイトコースとロボットテクニカルコースのプレゼンは午前の部と午後の部に別れて
これはすごい！ メディアクエリなしでレスポンシブを実装するCSSトリック5選
メディアクエリーのようにビューポートではなく、コンテナの幅に応じてレイアウトを柔軟に調整するテクニックを紹介。calc関数を上手に活用した、マニアックなCSSトリックたちです。 はじめに、タイトルとは裏腹にこの記事は、メディアクエリ不要論を唱えたり、メディアクエリを批判したりするものではないことを伝えておきます。メディアクエリはとても使い勝手が良いので、私はいつもいろいろなことに使っています。とはいえ、メディアクエリでレスポンシブWebデザインにおける課題すべてを解決できるわけではありません。 要素の配置はビューポートではなくコンテナの寸法に基づいて変更するのが望ましい場合がよくあります。この課題を解決するためにエレメントクエリのコンセプトが誕生しました。とはいえエレメントクエリは実際まだ納得のいくものになっていないので、Mat Marquisはこのコンセプトにおける課題を示し、改良してc
5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ
次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせていますか？ そうであれば一般的な開発者だそうです。Ashley Nolan氏によるフロントエンド開発ツールのアンケート調査によれば。 気になる結果を見る前に…… この種のアンケート調査は新たなツールを見つけたり、知識不足の分野の把握に役立ちます。執筆時点で5254件の回答が寄せられていて、アンケート調査としてはかなりのサンプル数です。ただ、結果を疑いようのない真実だと受け取るには慎重になるべきです。
リアルタイムWeb時代がやってくる！作ってわかったWebSocketとSSEの違い
ずっと夢でした。リアルタイムなWebアプリを作ることが。WebSocketとSSE（Server-Sent Events）を使ってサーバーからブラウザーにメッセージをプッシュするデモを通じて、リアルタイムWebを体験してみましょう。 本記事はCraig Bilner、Dan Princeが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 リッチインターネットアプリケーションを書くときに重要なのは、データの更新への反応です。以下は、2014年のBrazilJSでGuillermo Rauchが『The 7 Principles of Rich Web Applications』と題して講演した内容から引用したものです。 サーバーでデータが変化した場合、問い合わせがある前にクライアントに知らせてください。ユーザーが手動で
丸亀製麺1000円飲み放題セットがコスパ最強
讃岐釜揚げうどん「丸亀製麺」の一部店舗で超オトクなお酒飲み放題を提供しているのをご存知でしょうか。 うどんや天ぷらといったおつまみと、ビール、ハイボール、レモンチューハイ30分飲み放題がセットで1000円という内容なのですよ。 飲み放題を提供しているのは新宿文化クイントビル店と六本木ティーキューブ店の現在2店舗のみ。時間は17時から閉店までと限定的ではあります。丸亀製麺では単品でのアルコールの販売を行なっている店舗こそ一部ありますが、飲み放題を提供する店舗はこの2店舗のみなのですね。 1000円でおつまみや食事も食べられつつお酒も飲み放題できるとは、とにかく安い。酒好きの記者が体験取材に行ってまいりました。 飲み放題のメニューは選べる3セット 飲み放題のメニューはA、B、Cの3セット用意されています。A・Bセットは1000円。Cセットのみ1200円です。 ――― ●A 親子とじセット 10
フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10
変化の早いフロントエンド界隈でいま押さえておきたい、最新のJavaScript関連記事をKADOKAWAが運営するオンラインメディア「WPJ」からアクセス人気順に紹介します。
たった2行でサーバーとも同期できるJSデータベース「PouchDB」がアツい！
NoSQLデータベース「CouchDB」と互換性のあるJavaScriptデータベース「PouchDB」を使えば、オフライン時はローカルに、オンライン時はサーバーに保存する処理が簡単に実装できます。Webアプリの開発が捗りそうですね。 近年、クライアントサイドのWebアプリケーションはますます洗練されてきました。ブラウザーでは絶えずJavaScriptのパフォーマンスの改良が提供され、ジオロケーション（geolocation）などのリッチJavaScript APIやピアツーピア通信によってどんどん多くのことができるようになっています。 リッチWebアプリケーションが進歩するにつれ、クライアントサイドの良好なストレージメカニズムも必要になり、最近になってPouchDBなどのJavaScriptデータベースが登場してきました。 PouchDBとは？ PouchDBは、ブラウザーで快適に動作す
便利すぎてしびれた！あなたが知らないCSS関数トリック8選
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
ヨドバシが通販サイトへのサイバー攻撃に関して声明
ヨドバシカメラの通販サイトyodobashi.comが9月2日（金）12時ごろから接続しづらくなっている問題で9/3（土）、同社がサービスの状況を説明する公式リリースを配信しました。 アクセス障害の発生から36時間近く経った現在でもyodobashi.comなど系列サイトがつながりにくい状態は継続している。広報担当者によれば、ユーザーからは"購入したいがアクセスできない"などの問い合わせが来ているという。なお、サーバーダウンによる直接的なトラブル等は確認されていないものの、"確認をしたいお客様から「サイトが見られず問い合わせができない」といった状況は発生している"とのこと。 商品購入などでの問い合わせが必要な場合は、下記お客様サービスセンターで受け付けている。 ヨドバシカメラ、ならびにグループ会社 のインターネットサービス(*) 現在の状況について 昨日2016年9月2日(金)
Genuino 101（Arduino互換ボード）がやってくる
人気御礼につき、入場チケット増枠中の3月28日(月)12時～18時開催のハードウェアやIoTプロダクト関連のビジネスセミナー・展示交流イベント“IoT＆H/W BIZ DAY”。展示ブースの注目ガジェット、ソリューションをご紹介する。 ■■IoT＆H/W BIZ DAY参加登録はコチラ！（Peatixに遷移）■■ 2015年10月、IntelはGenuino 101という新しいArduino互換ボードを、ローマで開催されていたMaker Faire Romeで発表した。このGenuino 101が間もなく国内でも発売を開始する予定であり、3月28日に開催される"IoT&H/W BIZ DAY"でも実機が展示される予定だ。これに先立ち、このGenuino 101のご紹介をしておきたい。 何で名前が２種類あるの？ 今回発表された製品は、米国では「Arduino 101」と呼ばれており、米国以外
非エンジニアでも分かる！AWSの学び方まとめ
「AWSに興味があるんだけど、どうやって学んだらいいの？お金かかるんだよね？」 AWS（Amazon Web Services）とは、主にサーバやネットワークなどのシステムインフラを、インターネット上で提供しているクラウドサービスです。 「Amazon」は、あのECサイトの「Amazon」です。ECサイトで培った大規模サイト構築・運営のノウハウをクラウドサービスとして社外にも展開しています。本国アメリカでは大企業や政府機関でも利用され、日本でもネットサービス企業を中心に、大企業での利用も増えています（国内クラウドサービス需要動向（2015年版）MM総研）。 D2CでもAWSを利用しています。D2Cでは今まで、サーバなどのシステムインフラを物理的に購入することが多かったのですが、AWSを利用すると「使いたい時に使え、止めたい時に止められる」などのクラウドサービスならではのメリットがあり、利用
Googleアナリティクスを無償で使いやすくする「Dot metrix」
オプトインキュベートとイロドリは2月5日、無料で使えるKPI自動レコメンド型サイト分析ツール「Dot metrix」にて、Googleアナリティクスと連携したアクセス解析サービスを提供開始した。併せて、日々の分析指標のサマリーをメールにて通知する「デイリーレポートメールサービス」も無償提供する。 Googleアナリティクスを分析に利用する企業は多いが、分析可能な指標が豊富な一方、見たい指標を確認するために複数の操作やツール利用の知識が必要となり、分析に時間がかかる。そこでDot metrixとGoogleアナリティクスを連携させ、必要な分析指標だけを面倒な操作なく一画面で見られるようにする。 Dot metrixは、サイト分析が実施できていないスタートアップ・ベンチャー、中小企業向けに開発されたサービス。「無料で利用可能」「簡単に導入可能」「シンプルで使いやすい」「サービスに合ったKPIを
メルマガ開封率をMeasurement Protocolで調べる
小さな企業やサイトで役立つユニバーサルアナリティクスの便利な使い方を紹介する本連載。今回はユニバーサルアナリティクスに追加された「Measurement Protocol」でHTMLメールの開封率を調べる方法を解説します。 応用自在のMeasurement Protocol Measurement Protocolは、Googleアナリティクスに直接データを送信する仕組みのことです。<img>タグなどのソースに、パラメーター付きのURLを指定することで、JavaScriptをユニバーサルアナリティクスに何かの指標の元になるデータを送信できます。 アプリのスクリーンヒット、イベント、ソーシャル、eコマースなど、Measurement Protocol を使うと、Googleアナリティクスで扱うデータはおおむね送信できます。 店舗のPOSシステムのデータなど、Webやアプリ以外のデータを送れる
いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)
スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
米Google、参照キーワードの"not provided"問題を解決へ、数ヶ月内に解決策を発表
米Google シニアバイスプレジデント・Amit Singhal氏は2014年3月11日、米国で開催中の SMX West 2014 において、Google 自然検索経由の流入キーワードを取得できない問題を解決する方法を今後数ヶ月以内に提供することを明らかにした。 Google はプライバシー保護を目的に、ウェブ検索を SSL暗号化することを2011年10月に発表。その後、徐々に対象者を拡大していき昨年9月にはGoogleアカウントへのログインの有無を問わず全検索が暗号化されたために Google 経由で来訪してくるユーザーが何のキーワードを使っているのかを判定することが出来なくなった。検索暗号化が実施後、ユーザーが検索結果のリンクをクリックした時に、URLに含まれるキーワード情報を削除されてしまうために、サイト運営者は Google からの来訪者であることは識別できても具体的なキーワー
日本と世界の「レスポンシブWebデザイン」
マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWebデザイン レスポンシブWebデザインは、イーサン・マルコッテ（Ethan Marcotte）氏が2010年5月にテックブログ「A List Apart」の記事で発表したマルチデバイスへの対応方法です（日本語訳記事）。発表から3年が経ち、日本でもよく知られる手法となりました。 マルコッテ氏が唱えるレスポンシブWebデザインは、「メディアクエリー」「フルードイメージ」「フルードグリッド」という3つの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
