MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様

あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ こんにちは！ディレクターの田川です。みなさんはモバイルのアプリやWEBサイトを設計するときに、プロトタイピングツールをお使いでしょうか？ ビーワークスでも、モバイルのアプリやWEBサイトを設計するときは、実機でのUIの見え方や使用感をチーム全員で共有するために、できるだけプロトタイプをつくるようにしています。 プロトタイプを作成するツールは色々ありますが、株式会社グッドパッチ様が提供している「Prott」は、操作が直感的で使いやすく、弊社ディレクターやデザイナー陣など多くのメンバーが使っています。 今回はProttのご紹介とグッドパッチ様がユーザーレビューでご来社くださいましたので、その様子をレポートします。 Prottのおすすめポイント Prottは今年4月にベータ版がローンチさ

サイト運営にアクセス解析は必須だ。 自サイトに訪れるユーザーがどのような経路でどのページに辿り着き、何分間滞在して何ページ遷移してから、最終的に離脱するのか。見て欲しいページを見てもらえているのか。新しいサイトデザインは効果が出ているのか否か。ユーザー行動を分析し、それをもとにトライアル・アンド・エラーを繰り返すのがサイト運営だ。 ただ、正直なところアクセス解析の必要性は感じつつも気乗りしないと言う人も多いだろう。多くの人はGoogle Analyticsを使用していると思うが、使い方がよく分からない、と嘆く人も多い。 今回紹介する「Pt engine」はGoogle Analyticsに対して苦手意識を持つ人こそが試してみるべきアクセス解析サービスだ。サイトの分析を視覚的に行う事ができる上に、使いやすいフィルタリングでセグメント分けも可能。各デバイスごとのヒートマップ解析機能も利用できる

村井教授「絶対に個人からパワーは生まれる」、夏野氏「この25年は西暦2100年頃の教科書に載る」、Web生誕25周年パネルディスカッション「Webの現在から未来へ」（前編） 「HTML5とか勉強会」と「W3C」は、Web生誕25周年記念イベント「Webの過去、現在、そして未来」を合同で3月13日に開催しました。イベントでは村井純慶應義塾大学教授の講演に続き、村井教授、元NTTドコモ執行役員の夏野剛氏、HTML5jファウンダーの白石俊平氏、NTTコミュニケーションズの小松健作氏らをパネラーに、新野の司会によるパネルディスカッションを開催。25年のWebの歴史を振り返りつつ、これからのWebでなにが重要となるのかなどについて議論をしました。 本記事ではそのダイジェストを前編、中編、後編に分けて紹介します。 25年前の1989年に、ティム・バーナーズ＝リーさんがWebの技術を作りました。 199

8月21～23日にパシフィコ横浜で開催された「CEDEC 2013」では、Webの世界に関するセッションも数多く行われた。本記事ではその中から、サイボウズ・ラボの竹迫良範氏による「HTML5のこれまでとこれから、最新技術の未来予測」と、セキュリティコミュニティでは大変著名なネットエージェント、長谷川陽介氏による「HTML5時代におけるセキュリティを意識した開発」の2つのセッションの様子をお送りしよう。 竹迫氏が「HTML」の周りの最新技術と、3つの未来予測を語る 未来予測その1：通信は暗号化が標準に――「スタバでドヤリング」から考える最新技術 竹迫氏はまず、スターバックスでスタイリッシュなMacBook Airをこれ見よがしに使う、「ドヤリング」という技術（？）について写真を出すところから講演を始めた。 実は、この「ドヤリング」、公衆無線LANを利用すると盗聴のリスクがあることが指摘されて

先週2月18日に都内で開催された「第36回HTML5とか勉強会」。テーマは「2013年、Web開発の進化を探る」でした。 そこで「2014年頃にはネットに接続しなくても使えるオフラインWebアプリケーションが流行するのではないか」と話したのが、html5j.orgの世話人でもある白石俊平氏。白石氏が解説する「オフラインファースト」は、これからのWebアプリケーションのひとつの方向性が示されていると思われます。 その講演の内容をダイジェストで紹介します。 オフラインファーストの思想と実践 html5j.org世話人の白石俊平氏。 オフラインファーストとは、オフラインを最初に考えてWebサイトを、Webアプリケーションを作ろうという思想のことです。 で、オフラインファーストって、モバイルファーストという言葉に似ています。モバイルファーストというのは2010年に登場した言葉で、これは去年、とにか

▼ [雑] メールアドレスのバリデーション崩壊のお知らせ、もしくは、全てが UTF-8 になる JANOG31 のページをつらつら見てたら気になるセッションがあった。 「メールアドレスの国際化(JANOG25からの変更点)」というものだ。（多用されているかはともかく）Web で使われるドメイン名では国際化が進んでいたけど、メールアドレスに関してはほとんど進んでいなかった印象だったのに、どうも RFC での標準化がほぼ完了したらしい。 セッションページからダウンロードできる「IETF 85 報告 DNS, 国際化関連」という資料を見てみたら、次のような記述があった。 ほとんどすべてのメールヘッダにUTF-8を許可 – メールアドレス部 <ローカルパート@ドメイン名> – Display-name, (コメント), SubjectヘッダにもUTF-8 (従来はMIME) 資料には具体例も記載さ

サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す

CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ

2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」

これから始める人から、カスタマイズしたい人まで、 WordPressの疑問・困ったを解決するまとめ 本ブログもWordPressを使って作っている。 最初は、MovableTypeでやっていたのだが、 投稿記事の数が膨大になってくると、再構築に時間が掛かるようになったため、 新ブログを開始する際に、思い切って変えてみた。 幸いにも過去に色んな方が、WordPressに関する「まとめ」を作ってくれていたり WEB上で丁寧に説明してくれていたりしたため、難なく構築することができた。 ただ、色々な情報が散らばっていて、その都度探さなければいけなかった。 そこで、今回のブログは、自分と同じ様にWordPressを始める方のために書く、 「WordPressの導入からデザイン、プラグイン、カスタマイズまで全部まとめ」。 もくじ 今回は、以下の5つについて、まとめてみた。 それでは、それぞれについてご

どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに

こんにちはこんにちは！！ Webプログラミングしてますか！ よく「PHPはセキュリティがダメ」とか言われてるよね。 でもそれって、べつにPHPが悪いんじゃなくて、 たぶん、セキュリティとかが、まだよくわからない人が多いだけなんじゃないかな。 がんばって勉強しようと思っても、なんだか難しい理屈が並んでいたりするしね…。 なので今日は、セキュリティ対策について、 「これだけやっとけば、わりと安全になるよ」ってことを、初心者むけに、大雑把に書いてみます！ 理屈がわからなくても、最初はコピペでも、 なにもやらないより、やったほうがきっとマシになる！ 1. XSS対策 動的なものを表示するとき、全部エスケープすればokです！ (NG) あなたの名前は <?= $name ?> ですね！ ↓ (OK) あなたの名前は <?= htmlspecialchars($name, ENT_QUOTES) ?>

次世代のWebアプリケーションの中核を担う技術として「HTML5」に注目が集まっているが、それと並んで期待されている技術に「WebSocket」がある。 IETFとW3Cによって仕様の策定が進められており、最初の提案以来幾度もの改訂を経て、2011年12月11日にそのプロトコル仕様がRFCのProposed Standard（RFC 6455）となった。 AjaxからComet、そしてWebSocketへ WebSocketはウェブサーバとブラウザが直接コネクションを張って双方向通信するための技術規格である。HTTPとは異なる独自の軽量プロトコルによって通信を行うため、オーバーヘッドが小さく、長時間に渡って通信する場合でもHTTPコネクションを占有する必要がないというメリットがある。 WebSocketが生まれた背景には、サーバとブラウザがもっとリアルタイムに通信して情報の配信や更新を行え

本日9時30分頃、弊社データセンターにおいて通信障害が発生いたしました。この障害は、データセンター内のテナント様が行なっていた工事中に誤って回線を切断したことによるものです。 この障害により、株式会社ディー・エヌ・エー様の「Mobage」を始めとするお客様サービスにアクセス障害が発生しており、現在、本日中に復旧すべく全力を挙げております。 皆様には多大なご迷惑をお掛けし、お詫び申し上げます。 以上