Web Storageでデータの読み書きを行う - Web Storageのサンプル - HTML5 JavaScript API入門
Web Storageでデータの読み書きを行うには？ Web Storageでデータの読み書きを行うには？解説 ブラウザにデータを保存するWeb Storageには、データを保持する単位の違いに応じてローカルストレージとセッションストレージという二種類の保存領域があります。この二つの違いは、セッションストレージはタブやウィンドウごとに生成され、閉じられると削除されるのに対して、ローカルストレージは意図的に削除しない限り内容が保持されるということです。 ローカルストレージとセッションストレージの対比とデータが保持される単位については、ローカルストレージとセッションストレージの違いは？を参照ください。 ローカルストレージにはwindowオブジェクトのlocalStorage属性、セッションストレージにはwindowオブジェクトのsessionStorage属性を通じてアクセスします。 // ロ
Google Mapのレスポンシブ ウェブ デザイン対策
Googleではレスポンシブ ウェブ デザインの推奨していますので、Google Mapも画面サイズ（PC Tablet smartphone)によって表示サイズが変わると便利だと思います。 そこで今回はGoogle Mapのレスポンシブ ウェブ デザイン対策を紹介します。対策はとっても簡単で単純なことです。 Google Mapよりウェブサイトへの地図埋め込み用 HTML コードを取得すると<iframe width=”425″ height=”350″ frameborder=”0″・・・みたいなコードを取得することが出来ます。この取得したコードのwidth=”425″をwidth=”100%”に書き換えるでけです。 これでGoogle Mapが画面サイズ（PC Tablet smartphone)によって表示サイズが変わります。 次はアメブロの記事のサイズに合わせてGoogle Ma
「“ラボ”で右脳を刺激する」日本でマーク・ザッカーバーグを生み出す教育論【特集:New Order-茂木健一郎×伊藤穰一】 - エンジニアtype
MITメディアラボ所長 伊藤穰一氏 デジタルガレージ共同創業者で取締役でもあり、そのほか、The New York TimesやCreative Commonsなど、さまざまな団体・組織のボードメンバーも務める。2008年米国Business Week誌にて「ネット上で最も影響力のある世界の25人」、2011年米国Foreign Policy誌にて「世界の思想家100人」、2011年、2012年共に日経ビジネス誌にて「次代を創る100人」に選出。愛称はJoi 茂木 Joi、こんにちは！ 実は僕、Skype使うの初めてなんだよ！ 伊藤（以下、Joi） へぇ！ こっちは毎日使ってるよ～。Skype嫌いなの？ 茂木 そんなことないんだけどね。これからどんどん使うよ。でも、初Skypeの相手がJoiっていうのは、何かうれしい。 Joi あはは（笑）。 MITメディアラボ所長には、「お母さん」が必要
JavaScriptで国際化処理をするのに便利·Pomo MOONGIFT
PomoはJavaScript製のgettextです。po/moファイルの読み込みに対応しています。 プログラミングの出力するメッセージを国際化する際によく使われているのがgettextです。類似の仕組みを提供するJavaScriptライブラリは幾つかありますが、poファイルをそのまま読み込めるのがPomoです。 ソースコードです。poファイルをダイレクトに読み込んだり、コード上でテキスト変換情報を与えることもできます。 確かにpoファイルを読み込んでいるのが分かります。 対応しているフォーマットがpoまたはmoになります。普段使っている翻訳エディタが使えて、そのファイルをそのまま読み込めるのでサーバとクライアントで作業が分断せずに済むのではないでしょうか。 PomoはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGI
この英文さえあれば英語圏を一人旅ができる！！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。プログラマーの中田です。 英語、難しいですよね。 でも、英語、しゃべれるとかっこいいですよね。 私は、とにもかくにも『荒療治』が好きなので。。。 こうなると、『なら、やってみよう！』という気分になってしまいます。 ですので、上長に懇願してお休みをいただき、単身、オーストラリアに行ってまいりました。 結果、大体この辺りの英文さえ覚えておけば何とか旅行できるんだなと感じました。 ※基本的にはしっかり勉強していく事をお勧めします。 今回はその英文をまとめます。 近年では日本の素晴らしい教育のおかげで、ほとんどの人が英語をネイティブライクに話せてしまうのだと思います。 しかし、本記事では 『僕、英語苦手なんだ。。。でも、海外旅行をして挑戦してみようかな。。。』とか。 『私、からっきし英語ダメだけど、海外旅行をして外国人の彼氏を作ってみたいな。。。』とか。 そんなLittle Chall
レスポンシブデザインにするための基本的な方法｜WEB Drawer
スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。 今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。 使い方 記述方法は以下になります。 外部ファイル読み込む時の記述法 <link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" > @importでの方法 @import url("mini.css") screen and (幅の指定) インラインの記述法 @media screen and (幅の指定) { ～ここに記述～ } 個人的には同じファイルで見れたほうが嬉しいので、インラインを使っています。自分が管理しやすい方でよいかと思います。 幅の指定 上記のコードの「幅の指定」部分に適用したい幅を入れてスタイルを調整していきます。 この「幅の指定
PHPで住所から緯度経度を求める
「PHP で Cookie要求サイトにアクセスする」では fsockopen 関数を使って HTTP通信を行うプログラムを紹介したが、今回はより一般的な HTTP通信関数を作ることで、POST 変数渡しを実現する。 今回の例として、「MapFan」の機能を利用し、日本語の住所から緯度経度を求めるプログラムを作ってみることにする。 なお、MapFan の仕様が変わったため、2017 年（平成 29 年）3 月現在、本プログラムは正常に動作しない。 0086: 0087: /** 0088: * HTTP通信を行う 0089: * @param string $url "http://" から始まるURL 0090: * @param string $method GET,POST,HEAD (省略時はGET) 0091: * @param string $headers その他の
Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる - 歴史雑談録
どうも、松田直樹@まぼろし でございます。 当方、実はWeb制作が本業でして、このような記事を書くハメになってしまいました。（いや、喜んで書いてますよ） 「Fireworks」ってのは Photoshop のようなグラフィックツールでございまして。 Web制作に特化した機能が豊富だったりで Webな方々には多く使われていたりするのですが、僕も右に倣えで頻繁に使用しているわけです。この Fireworks に関する記事を書くにあたり、この歴史雑談録に何とか絡めようと表題のようなテーマに及んだ次第にござりまする。 ということで、この記事は「Fireworks Lover Advent Calendar 2012」の20日目の記事となります。（長いです。すんません） 今現在、Web制作界隈においては「脱ビットマップ」「SVG元年」といったキーワードが脚光を浴びておるわけですから、なんと時勢を読ん
基礎から学ぶNode.js 記事一覧 | gihyo.jp
第7回Node.jsアプリケーションをWindow Azureで動かす 高橋俊光 2012-11-27
ユーザーレビューとどう向き合う？ クックパッドiPhoneアプリに酷評殺到の背景 (1/3) - ITmedia ニュース
2月初め、「クックパッド」のiPhoneアプリが新しくなった。従来は、検索機能中心のシンプルなアプリだったが、新アプリはレシピ提案機能などを充実させた多機能でモダンデザイン。Web業界では好評で、絶賛するニュースメディアやブログも多かった。 だが、ユーザーがApp Storeに投稿したレビューは辛らつだった。「前の方が良かった」「使いづらい」など酷評が集中。「☆」1つの評価が大量に投稿され、“炎上”状態になっていた。 その後のバージョンアップなどで徐々に評価は戻っており、最新バージョンでは「☆4」や「☆5」の評価も増えてきた。だが、最初のバージョンアップ時に多くのユーザーが低評価を投稿したため、全評価の合計を見ると、3月末現在でも、「☆1」が大多数のままだ。 思わぬ反応に、クックパッドの橋本健太CTOは「メジャーバージョンアップで完成ではない。これからがスタート。改善を繰り返していきたい」
並列処理を実現！Web Workersを使いこなそう
連載目次 HTML 4が登場したころは、シングルコアのCPUしかなく、HTMLとJavaScriptで実現できる処理も限定的であったため、処理を逐次実施するシングルスレッドでの処理に不満を抱くことは少なかった。もっとも、HTMLとJavaScriptは同一のUIスレッド上で処理を行うため、JavaScriptで動的にHTMLコードを生成する処理や、高負荷の処理がある場合、HTMLレンダリングが遅延したり、最悪の場合はブラウザがフリーズしたりしてしまうということがあった。 近年では、マルチコアの端末が大多数を占めるという物理的な環境の改善のほか、HTML5の台頭により、HTMLとJavaScriptを高度に活用したWebアプリケーションが増えてきている。そのため、JavaScriptコード自体をマルチスレッドで処理したいという要件も多くなりつつある。 例えばファイルにアクセスする際のI/Oや
GitHub のフォーク （fork） とプルリクエスト （pull request） の使い方 - akihiro kamijo
先日、皆さまにお願いした CreateJS のドキュメント翻訳では GitHub を利用しています。GitHub を使うのは初めてという方もいるかもしれませんので、いまさらながら簡単な使い方をご紹介します。 一般的な （といっても GitHub の使い方が指定されているわけではないですが） GitHub を利用した共同開発には以下の 2 種類があるようです。 共有リポジトリ リポジトリ （しばしば "repo" と呼ばれます） は、GitHub が、プロジェクトに関連するファイルをまとめて保管する単位です。CreateJS 翻訳プロジェクトも CreateJS/localization という名前のリポジトリを持っています。 これをチーム内で共有して、作業目的ごとにブランチ （Branch） と呼ばれるコピーを作り、適当なタイミングでブランチに対して行われた更新をオリジナル （Master
GitHub Enterpriseのススメ - gumi Engineer’s Blog
gumiではバージョン管理システムにGitを採用していますが、 その中でもGitHub Enterpriseを推進しています。 GitHubは皆さんご存じかと思いますが、 GitHub Enterpriseは社内にGitHubを構築できるという画期的なサービスです。 多くの人がGitを使ったことがあるとは思いますが、 GitHubって便利ですよね。 Gitがこれほど普及した理由の一つとしてGitHubというツールがあったから、 というのは非常に大きいと思っています。 ここで疑問があると思います。 「何故GitHubのprivateリポジトリを使わないのか？」 答えの一つとして、 「情報共有の範囲を社内に区切ることによってより密度の高い情報共有をする」 という事があります。 人によってはprivateじゃなく、 publicにしてオープンソース化し、 外に公開すれば良いじゃない、 そうすれば
github 超入門 - glasses factory
ここ1年くらい、僕はソースコードなどを github で公開しています。 つい先日まで書いていた連載記事 GAE for Flasher のサンプルソースコードや、 東京てら子で発表したデモ、今まで作ったライブラリや便利クラスなど なんでもかんでも github で公開しています。 しかし、プログラムに慣れた人ならともかく、これから AS3 をガシガシ勉強していこう！ といった方や、AS3 自体はガシガシかけても基本的に SVN 等バージョン管理システムを 使わない方にとっては github 自体がやはり少し敷居が高いイメージがあるという話を聞きました。 GAE for Flasher の記事自体、ある程度 AS3 に関する知識のある人を想定していたとはいえ 流石に当たり前のように使い過ぎたかなと反省の意を込めて github 超入門( for Flasher ) を書く
Githubを使ってチームで開発する環境を整える[入門][初心者向け] | 侍エンジニアの切り捨て御免
今回はGithubの設定方法についてです。 今度チーム開発で利用することになったのでメモします。 誰が見てもわかるよう、できるだけ画像つきで説明します。 1. Githubにアカウント登録する まずはGithubにアクセスします。 https://github.com/ 中央にある、「Plans, Pricing and Singup」を選択します。 すると、このような料金プランの画面が表示されます。 値段があがるにつれて、所有できる非公開リポジトリの個数が増えます。 今回はフリーアカウントを取得するので、右上の「Create a New Account」をクリックします。 （料金プランは後から変更できます） このようなアカウント情報入力画面が現れます。 特に説明の要らない画面だと思うので、適切に入力し、アカウントを作ります。 アカウントが無事作成されると、このような画面が表示されます。
GitHub のプライベートリポジトリで画像を共有する - おいちゃんと呼ばれています
下記にも少し書かれていますが、ペパボでは GitHub のプライベートリポジトリ（非公開リポジトリ）を使って開発を進めています。 今年意識していること | ペパボ社長ブログ 全社的に使っているので、エンジニアやデザイナだけではなく、ディレクターや管理職も使うのですが、ちょっとした画像の共有をどうしようかと悩んでいました。社外に公開したくない画像を GitHub の Issue とか Wiki に貼りたいとか。 もちろんリポジトリにコミットすれば共有できるのですが、ディレクターや管理職に Git 覚えてもらうのもちょっとなー、と思っていたところ、隣りの席のデザイナが、 おいちゃん、GitHub って、Git を使わなくても画像をアップロードできるっすよー << と教えてくれたので紹介します。 *1. 画像のアップロード (1) プライベートリポジトリのページを開いて「Downloads」をク
GitHubでprivateなリポジトリを複数人で共有編集する方法
こんにちは かねしろ@pinkrootです。 今日は、GitHubでPrivateなリポジトリを複数人で管理する方法についてまとめます。 Privateなリポジトリ？ GitHubでは通常、すべてのリポジトリは公開される(publicな)設定です。 しかし、課金者や学生など、一部のユーザはpublicではないprivateなリポジトリを作成できるのです。 私の場合は学生としてのアカウントを持っているのでプライベートリポジトリが作成可能、というスンポー。 早速、方法を。 手短に箇条書きで。 GitHubでPrivateなリポジトリを作成できるアカウントに切り替えます。 私の場合は学校のアカウントとpinkrootな個人的アカウントが別々なので、GitHubトップ画面から下図の様な感じで切り替えることになります。 新しいリポジトリを作成します。 このとき、Privateにするのを忘れないで下さ
デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました ｜https://wp.yat-net.com/name
2013年 02月 05日 デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました カテゴリ： Git タグ：Git この週末にGitの勉強会を開いてもらって基礎的なところから教えてもらいました。これまで興味はあったけど全く何も知らなかったので、いろいろ詳しく教えて頂きました。 1.Gitとは？ 2.用語解説 3.実際に使ってみる。msysgit 4.参考文献 Gitとは？ 分散型バージョン管理システムの一つです。ファイルの更新状態を好きなタイミングで保存しておくことが出来、好きなタイミングで保存している状態へ戻したり、編集した箇所の差分を表示したりする事が出来ます。 また、プロジェクトを複数人で進行している場合に起こりうる、古いファイルでの最新ファイルの上書きといったトラブルについても、Gitを利用すればエラーが帰ってくるため避けやすくなります。 尚、Gitと聞くと
2013年、WebデザイナはGitを学ぶべきか？ そして1993年、編集者の7つ道具とは何だったか？ - QA@IT公式ブログ
WebデザイナはGitを学ぶべきでしょうか。答えはイエスだと思います。やらなくてもいいかもしれませんが、やればアドバンテージになるでしょうし、やらないことが今後マイナスになっていくように思えます。 仕事に必要な道具は常に進化します。その変化の過程で「ツールは本質ではない」と、うそぶいたまま時代の波に乗り遅れた人たちを過去に少なからず見て来ました。ツール（道具）が本質でないのは当然です。でも、そのときどきに使うべきツールを使わなければ、良い仕事はできませんし、市場ニーズに応えられません。 そのことを個人的な体験談を混じえて書いてみたいと思います。 今から20年ほど前、学生時代にバイトをしていた出版社で呆れられました。人文系の書籍や雑誌を手がけてきた筋金入りの編集者だった上司は、こう言いました。 「キミは編集者の7つ道具も知らんのかね！」 1993年時点で雑誌や書籍の編集者が必ず持っているとさ
配色パターンを決める際にお世話になっているサイトをご紹介
「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント
キーボード＆タッチで操作可能なプレゼン資料作成フレームワーク「Bespoke.js」:phpspot開発日誌
Bespoke.js キーボード＆タッチで操作可能なプレゼン資料作成フレームワーク「Bespoke.js」 1KB程度と軽量であるにも関わらずかなりカッコいいスライドショーのような物が作れます。 一見の価値があるので是非見てみて下さい 関連エントリ ２次元のプレゼンテーションを作れる「Flowtime.js」
イラレの図形をObjectiveCやAS3、JSON形式に変換できるイラレ拡張「DrawScript」:phpspot開発日誌
Drawscript - convert Illustrator shapes into code イラレの図形をObjectiveCやAS3、JSON形式に変換できるイラレ拡張「DrawScript」。 イラレで作成した図形をコードに変換してプログラム内で使いたい場合に使えそう。 次のように図形を変形させればコードが生成されるみたいです 覚えておくとよさげです 関連エントリ iPadやスマホのテンプレが詰まったイラレ用のワイヤーフレーム作成キット 立体的なサイコロ画像を描画するイラストレーターチュートリアル GUIパーツやアイコンがセットになったイラストレーター用UIデザインフレームワーク イラストレータで綺麗なアイコンを作るチュートリアル３５
文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」 – bl6.jp
文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイン「Kerning.js」をご紹介します。これを使えば簡単にテキストの見栄えを向上させることができます。CSSから値を指定できるのも使いやすいポイントではないでしょうか。以下、使い方です。 [ads_center] 使い方 Kerning.jsのプラグインを読み込みます。jQuery本体は読み込んでいるのが前提です。 <script src="kerning.js"></script> あとはCSSで目的の要素をスタイリングしていきます。以下は各ワードの色を指定する場合。 #pantone-please { -word-color: #f5474b #000000; } 他にもテキストを変形させたりサイズを調整したりもできます。 CSSで気軽に設定できるのがいいですね。画像を使わずにテキストの見栄えを調整していきたい時に
編集者さんが教える！分かりやすい文章の書き方 | ウープスデザインブログ (デザイナーまめこ)
「スマートフォンデザインでラクするために 」を書き始めるときに、編集者の傅さんがたくさんのアドバイスを送ってくれました。とても分かりやすかったのでこれをチェックシートにして、章を書き終えては振り返って読み、項目がちゃんと達成できているか確認したものです。 チェックシートは傅さんからいただいたアドバイスだけでなく、ブログ記事で見つけた「良い文章の書き方」などで得た情報をまとめて箇条書きにしたものです。 自分が本を書くときに利用していましたが、他の人にも使えるかもしれません。傅さんにはるか昔にご許可を得たのでここにまとめておきます。※もう忘れてしまっているかもしれませんがw チェックシートや約30項目からなり、本のコンセプトから句読点の入れ方まで多義にわたります。この書き方は本に限らずブログにしろ、仕事上で使う文章にしろ全てに通じるのではないでしょうか。 良い本を書くためのチェックシート 本の
「HTML5でモバイルアプリ開発」は是か非か？ ネイティブアプリと比較
モバイルアプリケーション開発で現在最も一般的なのは、ネイティブアプリとして開発するアプローチだ。残念ながら、ネイティブアプリの開発には大きなコストが掛かる可能性があるのに加え、開発ターゲットが少数のモバイルプラットフォームや端末に限定されてしまう問題がある。本稿では、汎用的なモバイル開発手段としてHTML5の可能性を探るとともに、そのメリットとデメリットを明らかにする。 関連記事 HTML5はスマートデバイス用アプリ開発に使えるか？ HTML5を活用！ スマートフォンアプリ開発の最前線を見る（ホワイトペーパー） セキュリティ強化のはずが逆効果？ HTML5「サンドボックス」の盲点 【技術動向】HTML5に注目、変遷してきたERPクライアント技術の今後とは ネイティブアプリの開発者は、各種のモバイルOSや携帯端末向けに個別のネイティブアプリを開発する。ネイティブアプリは携帯端末に直接組み込ま
YouTube人気急上昇
これぞまさにスマブラ！容赦のない追い打ち攻撃ｗｗｗ【スーパーマリオメーカー２#469】ゆっくり実況プレイ【Super Mario Maker 2】
日本通信が複数キャリアのLTE網を統合提供へ、相互接続申し入れ 市場は好反応 【増田 @maskin】 | TechWave（テックウェーブ）
SIMロックフリー端末等向けに通信サービス提供するMVNO(Mobile Virtual Network Operator：仮想移動体サービス事業者)である日本通信は2013年3月28日、KDDIおよびソフトバンクモバイル(SBM)に対し相互接続を正式に申し入れたと発表した。 同社は「マルチ・ネットワーク・キャリア」を標榜。国内で複数のキャリアのネットワークを使用することで信頼度を高めるのはもちろん、複数キャリアのLTE網を統合することでカバレッジを拡大するなど多様なサービス展開を計画しており、この申し入れはその実現に向けた大きな一歩となる。 発表後3月29日の株式市場で、日本通信(9424 JASDAQ)はストップ高となった。 キャリアを越えるインフラサービス 日本通信は、エヌ・ティ・ティ・ドコモ(NTTドコモ)との相互接続を2009年3月に実現。 同社は接続料算定を巡り訴訟を起こし、訴
Google Chromeのインスペクタが起動したら通知·Chrome Inspector Detector MOONGIFT
Chrome Inspector DetectorはGoogle Chromeのデベロッパーツールが表示されているかどうかを感知できるJavaScriptライブラリです。 Google Chromeのインスペクタを使うとWeb開発がとても楽になりますが、公開されているWebサービスの状態においては見せたくない情報である可能性もあります。そこで使ってみたいのがChrome Inspector Detectorです。 Webブラウザを普通に開いた状態です。Closedになっています。 インスペクタを開きました。Openに変わっています。しかしなぜかDockedになっています。 本来、この状態がDockedのはず。 Dockedの状態から切り離すとUndockedになりました。 Chrome Inspector Detectorを使うとインスペクタを開いているかどうかが判定できます。その時のイベ
JavaScriptの正規表現で文字列を抜き出す「グループ化」
JavaScriptの正規表現で特定の文字列を抜き出す「グループ化」について解説します。 JavaScriptで特定の文字列を抜き出して処理したいことがよくあるのですが、グループ化の使い方を忘れてネットで検索してもなかなかヒットしないので、備忘録で残しておきます（他に適切な方法があるようでしたらすいません）。 １．特定の文字列を抜き出す まず基本として、特定の固定文字列を抜き出すには、match関数で次のように記述します。 var foo = 'abcdefg'; var bar = foo.match(/abc/); これは変数fooに「abc」という文字が含まれていれば、変数barに abc が設定されます。 変数fooに「abc」という文字が含まれていない場合、変数barにnullが設定されます。 この使い方は、検索したい文字列があらかじめ決まっていて、上記のような代入文ではなく、判
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://markovlabo.net/?p=468
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
HTML5.JP - 次世代HTML標準 HTML5情報サイト
「同じことは自動化して二度やらない」時間節約術～『Fancy Hands』創業者の仕事術 | ライフハッカー・ジャパン
[法林岳之の「週刊モバイルCATCH UP」]TizenとFirefox OSから見え隠れするスマホのこれから
https://jp.techcrunch.com/2013/04/02/20130401drones-will-deliver-the-morning-paper-in-france/
IDEA * IDEA
Loading...
SVG Patterns Gallery