リンクをクリックするだけでファイルをダウンロードできるようにするには、HTML5のdownload属性を使う方法とJavaScriptコードを使う方法がある。 連載目次 Webページで、エンドユーザーにファイルをダウンロードさせたいことがある。ZIPファイルなどはHTMLでリンクを記述すればよいのだが、テキストファイルやPDFファイルなどのリンクはダウンロードされずにWebブラウザで開いてしまう。何とかならないだろうか？ 本稿ではJavaScriptでファイルをダウンロードさせる方法を解説する。 HTML5のdownload属性 JavaScriptを書き始める前に、HTML5での解決策を紹介しておこう。 リンク（HTMLの<a>要素）には、HTML5でdownload属性が追加された。この属性に対応しているブラウザであれば、テキストファイルやPDFファイルなどでもリンクのクリックでファイ

C#開発者のための最新JavaScript事情（async関数編）：特集：C#×JavaScript（1/2 ページ） 連載目次 前回はPromiseオブジェクトについて少し詳しく見た。今回はPromiseオブジェクトをベースとしたasync関数（async／awaitキーワード）による非同期処理の基本について見ていこう。なお、async関数は2016年1月21日時点で仕様策定が完了したわけではない。あくまでも現時点での話だと考えてほしい（仕様自体は決まっている段階なので大きく変わることはないだろう）。 async関数 C#開発者の方であれば、async／awaitキーワードによる非同期処理の記述は既にお手のものであろう。ECMAScript 2015（以下、ES2015）の次バージョンとなるECMAScript 2016（以下、ES2016）では、C#と似た構文でasync／awaitキ

.NET開発者のためのJavaScriptライブラリカタログ（デスクトップアプリ編）：特集：今から始めるJavaScriptアプリ開発（1/3 ページ） 連載目次 前回はMVCフレームワークを三つ取り上げた。今回はJavaScriptでクロスプラットフォームなデスクトップアプリを開発するためのフレームワークを見てみよう。 クロスプラットフォームなデスクトップアプリ開発 本稿で見ていくフレームワークは以下の二つだ。 Electron NW.js Node.jsにはサーバーサイドでJavaScriptを使用して、高速なWebアプリを開発するために必要な要素が詰まっているが（この辺りの事情については少々古い記事になるが『サーバサイドJavaScriptの本命「node.js」の基礎知識 』などを参考にしてほしい。基本は変わっていない）、これをクライアントサイドでも活用してネイティブデスクトップア

.NET開発者のためのJavaScriptライブラリカタログ（MVCフレームワーク編）：特集：今から始めるJavaScriptアプリ開発（1/3 ページ） 最近のWeb開発では、どんな技術を使い、どのようにアプリが開発されているのだろう。モダンJSライブラリをよく知らない.NET開発者に向けて、その世界をまとめて紹介する。 連載目次 本特集では、最新のWeb技術にはあまり取り組めていない.NET開発者を対象として、Web標準技術を使ってアプリ開発を行う際によく使われているライブラリやフレームワークなどを紹介していく。モダンWebの世界では、現在、どんなことが行われているかをのぞいてみよう（すでにこれらの技術を活用している方にとっては「何をいまさら」な話ばかりだろうがご容赦願いたい）。今回はクライアントサイドMVCフレームワークを紹介する。 クライアントサイドMVCフレームワーク ここ数年、

「Node.js Tools 1.0 for Visual Studio」は、リッチな編集環境、コードコンプリート機能、インタラクティブウィンドウ（REPL）、npmの統合、高度なデバッグやプロファイリング、テスト環境の統合、Visual Studioとの完全な統合、Node.js／io.js／JavaScript／TypeScript／HTML／CSS／JSONのサポートを備えている。 編集環境については、構文のハイライトやコードの折りたたみ、検索機能、コードコンプリート機能をはじめ、ユーザーが「あるべき」と考える機能をすべて搭載する。インタラクティブウィンドウ（REPL）は、書いたコードをその場で実行できる機能で、迅速な開発に役立つ。また、npmの依存性管理をソリューションエクスプローラーに統合し、依存性の解決に必要なパッケージの検索およびインストールを可能にしている。 このほか、プロ

はじめに HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML／JavaScript開発で必要となる、以下のような定形作業を自動化できます。 ファイル操作（移動、コピー、削除、名称変更、結合） ネットワーク通信（FTP、SSH

LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成：MEANスタックで始めるWebアプリ開発入門（1）（1/3 ページ） MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。 連載目次 今でもよく使用されていますが、以前からWebアプリ開発ではLAMP環境がよく使用されていました。LAMPとは、一般的なWebアプリを開発するのに人気の高いオープンソースソフトウェアを組み合わせたもので、以下を用いたシステムのことです。それぞれの頭文字を取って「LAMP」と呼ばれています（参考）。 OS：Linux Webサーバー：Apache HTTP Server データベース：MySQL プログラ

The jQuery Foundationは、JavaScriptライブラリjQueryの最新版として、バージョン1.11.1の後継となる「jQuery Compat 3.0」、バージョン2.1.1の後継となる「jQuery 3.0」をリリースすることを、公式ブログの10月29日（現地時間）付けの投稿で発表した。 jQueryは、WebブラウザのAPI互換性に対応すべく、2013年に互換性を最大限に重視したバージョン1.x系列と、Internet Explorer 8以前の古いブラウザをサポートしないバージョン2.x系列とに分かれている。 ただし、1.x系列と2.x系列では、内部実装こそ異なるものの、APIとしての動作は同じであり、それは「jQuery Compat 3.0」と「jQuery 3.0」でも引き継がれる。 なお、メインパッケージの「jQuery」は、最新バージョンおよび1つ前

対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 JavaScript開発の歴史 フレームワークを説明する前に、10年ほど前から現在までのJavaScriptが歩んできた流れが分かると、どうして今、JavaScriptにもフレームワークが必要になってきているのか、または開発者はフレームワークに何を求めているのかが多少は見えてくることと思います。 2005年くらいまではJavaScriptは利用者や開発者から避けられていた技術で、たとえ使われても、非常に簡単で

4月に新入社員としてWeb制作会社やSIerに入社した方も、開発業務に携わるようになり、HTML／CSS／JavaScriptを使ったフロントエンド開発を始めた方も多いかと思います。HTML／CSS／JavaScriptはWebブラウザーの上で動かせるので、気楽に開発が始められる半面、「デバッグが難しい」「不具合原因の特定が難しい」「どこにミスがあるのか分からない」というような話をよく聞きます。 そんなときに役に立つのがブラウザーに付属している「開発者ツール」です。「開発者ツール」を上手に使うと、不具合の原因特定を効率的に行えます。以下のように現行の全ての主要なブラウザー（Mozilla Firefox／Google Chrome／Microsoft Internet Explorer／Apple Safari）は「開発者ツール」を持っています。ブラウザー自体が無料ですので、もちろんこれら

Webで動かしながら操作案内を簡単設置！ 使わないとかなり損するIntro.jsとは：HTML5アプリ作ろうぜ！（8）（1/2 ページ） HTMLに属性を追加していくだけで、実際に操作しながら案内できるチュートリアルを簡単に付けられるJavaScriptライブラリの使い方を解説します。 動画や専用ページのチュートリアルより分かりやすく、HTML初心者でも手軽に設置できるIntro.js 今回の「HTML5アプリ作ろうぜ！」は、「Intro.js」を紹介します。 読者の皆さんは、Webサイト／Webサービスのチュートリアル／操作案内を作成するには、チュートリアル専用のWebページを作成したり、操作する動画を作成したりしている方も多いかと思います。Intro.jsを利用すると、実際に操作しながら案内できるチュートリアルを簡単に付けることができます。そのため、チュートリアル専用ページや動画を作成

週末スペシャル お買い得か無駄遣いか、1万円未満で買えた大容量モバイルバッテリーを自腹レビュー 2024.01.19

第7回Node.jsアプリケーションをWindow Azureで動かす 高橋俊光 2012-11-27

“オフラインファースト”を実現する、ストレージ系APIライブラリ10選：UXClip（36）（1/3 ページ） 2012年末に“オフラインファースト”という言葉がジョー・ランバート氏のブログで取り上げられました。オフラインファーストを実現するための技術であるストレージ系APIを取り扱うライブラリについて、筆者が選んだ10個を紹介します。 はじめに 2012年末に“オフラインファースト”という言葉がジョー・ランバート氏のブログで取り上げられました。日本では「html5とか勉強会」において、白石俊平氏が取り上げたことはまだ記憶に新しいと思います（参考記事：オフラインWebの活路はモバイルアプリにある）。 オフラインファーストは、オフライン対応を仕様に組み込んだ上で、WebサイトやWebアプリケーションを作ろうという設計思想の1つです。代表的なところでは、グーグルが提供するGmailやGoogl

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と

jQuery 2.0.1とjQuery 1.10.0が同時リリース。jQueryの2バージョン並行リリースが開始 jQueryは、モダンブラウザに最適化し、Internet Explorer 6/7/8のサポートを廃止したjQuery 2.x系と、過去のブラウザも幅広くサポートするjQuery 1.x系の2つのバージョンがあります。基本的には機能はどちらのバージョンも同じで、互換性があります。 この2バージョン体制になったのは、4月にjQuery 2.0の正式版がリリースされたときからです。今後jQuery 2.0にはjQuery 1.10が、jQuery 2.1にはjQuery 1.11が相互に対応するバージョンとしてペアでリリースされることが発表されていました。 そして5月24日付けで、初めてjQuery 2.x系とjQuery 1.x系の並行リリースが行われました。jQuery 2.

2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー

同バージョンより、Internet Explorer 8/7/6に非対応となるが、今後もIE 8/7/6に対応するバージョン1.xのサポートを継続して行うため、「jQuery 1.9」（および将来リリース予定の「jQuery 1.10」）を使えば、旧バージョンのブラウザでも「jQuery」を利用できる。 なお、IE 10/9でもCompatibility Viewで旧バージョンをエミュレートしている場合も影響を受けるため、IE 10/9では旧バージョンのエミュレートを使用せず、X-UA-CompatibleタグまたはHTTPヘッダの使用を推奨している。 その他の変更点としては、IE 8/7/6への対応終了にともない、ファイルサイズをバージョン1.9.1と比較して12パーセント削減した。また、12種類のモジュールから必要なものだけを選択することで、よりファイルサイズの小さなカスタムビルドの作