I must admit it for the first time, and I’ll use this platform to clean up the skeletons from my development closet. Sometimes, the magic I do — which some call “coding” — is not as perfect as the outcome might appear to my colleagues when the magnificent results are shown to them. Yes, I said it - sometimes, I use the old trial and error we all call debugging :) Don’t judge a SaaS platform by its

お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま

オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に マイクロソフトがオープンソースで公開している「Visual Studio Code」が、Chromeブラウザのデバッガプロトコルに対応したことが発表されました。 Visual Studio Codeのエディタ画面から、Chromeブラウザで実行しているJavaScriptのブレークポイントの設定と実行と停止、変数の参照などが可能になります。 JavaScriptのSoruce Map機能も働くため、圧縮済みのコードを実行しても自動的にVisual Studio Code上の圧縮前のJavaScriptコードに対応してそのままデバッグ可能。また同様の仕組みのおかげでTypeScriptのコードもVisual Studio Code上でそのままデバッ

今年に入ってGoogleが「Webブラウザでもプッシュ通知できるようになる」という驚愕の発表をしました。 Push Notifications on the Open Web Webのプッシュ通知について プッシュ通知は、スマホアプリの世界ではもはや必須のマーケティング手法ですが、Webでは使うことができませんでした。 それがこの技術によって可能になった！･･･ということで、今までメールやリターゲティング広告を使っていた、Webマーケティングのユーザー呼び戻し手法がガラリと変わる可能性も大きいです。 そういうわけで、さっそくこのWeb Pushの開発を支援するツールがいくつか開発されているようです。 Roost bpush 技術的にはなかなか複雑で、まだWebの情報量も多くないので、こういうツールを使って進めてしまうのがお勧めです。 Growth Pushも実は対応していた ところで、シロ

ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css. Here are examples of how we’ve used the script at The New York Times and examples of how others have used it. Share your ai2html projects on Twitter, Delicious, etc. using #ai2html. Table of contents How to install ai2html How to use ai2html Frequently asked questions Settings Point t

JavaScript人気の高まりをうけ、現在、次々とJavaScriptライブラリやスクリプトが開発され続けています。便利な反面、利用者からするとあまりにも数が多すぎて、どのライブラリが本当に有用なのか判断しづらい面もあるかもしれません。 そんなときに使いたいサービスが「Libscore」です。世界中の人気サイトで使われているJavaScriptライブラリ/スクリプトの情報を収集し、様々な方法で検索することができるサイトです。 検索方法は例えば、ライブラリが提供する変数名(jQuery、Modernizr、$.ui、$.fn.fancyboxなど)や、外部ライブラリ名(scriptプリフィックスを使用。script:stats.wp.com or script:use.typekit.netなど)を使って、使用サイトを検索したり、逆にあるドメインが使用しているJavaScript一覧をドメ

似たようなツールはよくあるが、ドメイン名が覚えやすかったのと機能が豊富なのでご紹介。 JS Prettyでは、JavaScriptのソースを綺麗にしてくれるツールを提供している。 使い方は簡単で、綺麗にしたいソースを貼り付けるだけだ。 オプションも豊富で、インデントを何桁にするかとか、配列で桁を揃えるだとか、チェーンメソッドで改行するか、とかのマニアックな設定が可能だ。 よくJavaScriptをいじる人だったら知っておいても損はないかもですな。

知らないと損する？Webページを検証できる無償の「modern.IE」「F12開発者ツール」を徹底紹介！ 馬場 美由紀（HTML5 Experts.jp編集部） Microsoftは無償で、Webページを検証するためのツールとサービスを多数出している。それらをどのように使えば便利なのか。日本マイクロソフトがエンタープライズのパートナーに向けて開催した「Internet Explorer 11と最新Web技術動向のご紹介セミナー」から、「modern.IE」「F12開発者ツール」を抜粋して紹介する。 講演者は、日本マイクロソフトのテクニカルエバンジェリストであり、本サイトのエキスパートでもある物江修氏。当日は簡単な機能紹介とデモを交えながらのセッションが繰り広げられた。 Internet Explorerの開発者ツールとその新機能 Internet Explorer 8（以下、IE8）から、

こちらです ☞ JavaScript Libraries Playground（jQuery 2.1.0 と underscore の例） jQuery や underscore などの JavaScript ライブラリをインタラクティブに試したいとき、最近はブラウザで自分のブログ（ここ）や GitHub など、当該のライブラリがロードされていることを知っているページを開いておもむろに ⎇⌘J（Chrome）！　していたのですがこれは直接的ではないなと思ってそれ専用のページを作った次第です。 冒頭の例にもあるように location.search 部に library[@version],… 形式でライブラリを与えてやればページに <script> 要素が追加されて、あとは開発者コンソールなりでお楽しみください、という仕組みになっています。 cdnjs にはかなり多くのライブラリがホストさ

HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。

こんにちは。良昌です。 Facebook、GithubなどのJSON形式でユーザ情報を返却するAPIや、PhoneGap、Monacaなどのスマートフォンのマルチプラットフォームを提供するライブラリ、IDEが開発ツールとして定着してきたことにより、JavaScriptを利用する機会が増えたのではないでしょうか。 今回は、JavaScriptコンテナがWebブラウザの場合に、動的に確保されるメモリ領域の浪費を避ける方法について書きたいと思います。 JavaScriptにおけるメモリの浪費を避けるコーディング JavaScriptにおけるメモリの浪費を避けるコーディングをするためには、GC(ガベージコレクション)、クロージャについての知識が必要です。まずは、この2つの機能について説明していきます。 ■GC(ガベージコレクション) GCとはプログラムが動的に確保したメモリ領域の内、不要になった領

IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理

一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための

OWASP Nagoya Local Chapter Meeting 1st 講演資料です https://owaspnagoya.connpass.com/event/59813/

Tweet半年くらい前からSublime Text 2を使い始め、使い心地がよくてすっかりメインエディタになってしまいました。 というわけでSublime Text 2やプラグインのEmmetを使ってコーディングのスピードアップを図ろう！というテーマでまとめてみます。 ちなみにこの内容は福岡マークアップ勉強会でライブコーディングを交えてお話しさせて頂きました。 Sublime Text 2って何がいいの？ 僕は以下のようなポイントが気にっています。 起動が軽い。 前までDreamweaverやNetbeansでコーディングをしてたのですが立ち上がりの速さがだいぶ変わりました。 プロジェクトの管理が簡単 サイドバーにフォルダをドラッグ＆ドロップするだけ。 拡張性が高い プラグインのインストール、アンインストールも簡単です。 まずはインストール！ こちらのサイトからSublime Text 2