公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化したJavaScriptのコードに、インデントや改行を付けて、分析したり確認しやすく整形するツールです。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。

JSの配列にはexistsとかcontainsなどとかいうメソッドは無いがindexOfを利用して以下のように判定できる。 var arr = ["a", "b", "c"]; if (arr.indexOf("a") >= 0){ // 存在する } if (arr.indexOf("a") == -1){ // 存在しない }

解説 iPhone/iPadのiOS用のmobile Safariにおいて動くWebアプリからカメラでQRコードを読み取るには大きく分けて2つ方法があります。 一つはiOS6よりサポートされたinputのfile要素を利用してカメラまたはカメラロールよりサーバーに画像を送ってサーバでデコードする方法。これはSafariから抜けなくていい反面、フォーカスをきっちりあわせてシャッターを押さなければいけなかったり、転送量が多くなるなどデメリットもあります。 もう一つはスキーム(zxing://...)に対応したネイティブアプリに転送して結果をhttpスキームのコールバックで受け取る方法です。この方法はコールバック時にSafariのタブが一枚余計に開いてしまいますが、ローカルだけで完結できる上、ネイティブアプリが自動的にカメラフォーカスをあわせてくれる為、操作性も高くなります。 スキームに対応した

どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式

暗号規格のJavaScriptライブラリである「crypto-js」を用い、サーバサイドではなくクライアントサイドで復号化できる静的なパスワードで保護されたHTMLページを作成できるのが「StatiCrypt」です。使用される暗号化方式は「AES256」です。 Static HTML Crypto https://robinmoisson.github.io/staticrypt/ 使い方は簡単で、1番上の「Passphrase」にパスワード、「HTML/string to encrypt」に暗号化したいHTMLページのコードを入力し、青色の「Generate passphrase protected HTML」をクリック。その後、ページ最下部にある緑色の「Download html file with password prompt」をクリックすれば、パスワードで保護されたHTMLページ

おはこんばんにちは、ハルです。 JavaScriptはなんでもできるんだなぁ、と毎日のように感じています。 PHPでカレンダーを作ったことはあったのですが、JavaScriptで作成したことがなかったので、作ってみました。 今回紹介するひな形さえあれば、みなさんの好きなようにカスタマイズできると思います。 今日の日付の文字が赤く表示される、かなりシンプルな月次カレンダーです。 ここまで作ってしまえば、あとはそんなに悩まずに、カスタマイズ（前月・次月のボタンや、数字自体を押せるなど）ができるはずです。なので、シンプル状態のカレンダーのコードを、ここにメモ…紹介したいと思います。 HTML <h2 class="calendar-title"><span id="js-year"></span>年 <span id="js-month"></span>月</h2> <table class="

久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは

URL が連番で終わっているような構成のサイトでは、その前後にも類似した有用なページがある場合が多いです。 にも関わらず、前後に移動するリンクが用意されていないことがあるので、そういう時に便利なブックマークレットを書きました。 例えば、以下のような URL で、その前後の番号に移動することが出来ます。 http://www.example.com/hoge/fuga123.html http://www.example.com/fuga/00456.html http://www.example.com/789 http://www.example.com/123.456-00789/ 以下のリンクをブックマークバーにドラッグして使って下さい。 前へ：< 後ろへ：> ソース 前に移動 javascript:(function(h,a,s,d,l){a=h.match(/[^\d]*(\d+

はじめに 前回は、ASP.NETの現状を確認し、帳票機能の開発に便利なSpreadJSライブラリを紹介しました。第2回はSpreadJSのはじめ方と基本的な使い方を紹介し、SpreadJSの概念と主な機能を学びます。 本稿で紹介する機能は、次のリストの通りです。 日本語化 初期化 値をシートに設定する（セル・テーブル・シート・CSV） 数式の使用 セル型 行や列の固定 クライアントサイドのExcelインポート・エクスポート テーブルスライサー 対象読者 JavaScript 開発者 スプレッドシートの機能に興味がある方 ExcelのようなWebアプリを作成したい方 必要な環境 SpreadJS 9Jの必要システムを参照。 本稿では、次の環境で開発・動作確認をおこなっています。 Chrome Visual Studio Code Windows 10 SpreadJSのドキュメントは？ Sp

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する ・etc... などが一般的でしょうか。 今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！ 「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。 なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！ ■「JavaScript」の基本を徹底的に学ぶ！ まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

国産のバックエンドサービスとして人気の「Milkcocoa」ですが、いつの間にか「リアルタイムWeb通知」を実現できるようになっていたのでご紹介しておきます！ これが出来るようになると、自分のWebサイトやサービスなどを利用しているユーザーに向けて、スマホの「プッシュ通知」のような感覚で、リアルタイムに任意のメッセージを送信し、ユーザーのブラウザ上に表示させるようなことが出来るので便利です。 今回は、チュートリアル形式でサンプルを作っていく過程をご紹介しようと思います！ まずは初期設定をしよう！ まず最初に「Milkcocoa」にログインし、管理画面から新しいアプリを作成します。(無料プランで問題ありません…)

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指

はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。