本特集は、次世代Web標準である「HTML5」を使って業務システムを構築するために必要な情報や役立つ情報を解説します。HTML5を採用することで、業務システムがどのように見やすく使いやすいものになるかを紹介すると共に、開発を効率的に進めるための道具や留意点などについても見ていきます。

HTML5で業務システムを構築しよう
目次
-
第21回 HTML5で家計簿アプリを作る パフォーマンス向上のための工夫
業務システムの場合は毎日何千、何万というデータが発生します。毎日使う業務アプリにこそ、スムーズな操作が重要です。ユーザーがアプリを使って一日中作業をするような場合は、数秒のわずかな遅れでも、それが積み重なれば著しいユーザービリティの低下を招きます。
-
第20回 HTML5で家計簿アプリを作る 適切なタイミングで画面を更新
連載第18回以降では家計簿アプリを題材に開発サイクルを回しながら、 参照系アプリケーション開発で役立つ要素技術や、 使い勝手向上のための観点について解説をしています。
-
第19回 HTML5で家計簿アプリを作る チャートで「パッと見」を分かりやすく
今回は、画面に表示する情報を取捨選択して、ユーザーが欲しい情報を欲しいタイミングで提示することで、アプリを分かりやすく、使いやすいものにしたいと思います。収支の内訳を直感的に把握できるようにするために、科目の割合を円グラフの形で提示させてみましょう。
-
第18回 HTML5で家計簿アプリを作る 設計と基本機能の実装
前回までは、日報アプリケーションを題材に解説をしました。 今回からはさらに一歩進んで、 アプリケーションのクラス設計についても触れていきます。 複雑な画面も、複数の要素に適切に分割されていれば、 アプリを改修・メンテナンスしやすく保つことができ、 さらに再利用性も上がります。
-
第17回 HTML5で日報アプリを作る ツール編[3] altJS/JS検査ツールで品質を向上する
JavaScriptは動的に型を定義しているので、実行するまでエラーが分からなかったり、デバッグ時にも間違いに気付きにくかったりという欠点があります。そのため、記述力の向上や、静的な型定義機能などによるコーディング品質の均一化および向上を図った代替プログラミング言語が多数開発されており、その総称を…
-
第16回 HTML5で日報アプリを作る ツール編[2] CSSメタ言語でスタイルの記述を高度化する
見栄えが良い画面やアニメーションなど動きのある画面など、画面のレイアウトが複雑になっていくと、CSSの記述量が増えてしまい、問題が起こりやすくなります。CSSメタ言語であるLess/Sass/Stylusなら、CSSの文法を基にしながらも、入れ子定義・変数定義・制御構文などを記述できるので、問題に…
-
第15回 HTML5で日報アプリを作る ツール編[1] 開発者ツールで生産性を向上する
第15回からは、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材として、これまで紹介してきたHTML5の機能や開発のためのツールをどう使っていくか、順を追って説明していきます。
-
第14回 HTML5で日報アプリを作る 解説編[3] 非同期処理とCSS Animationを使う
今回は、日報アプリのJavaScriptで使用した要素技術のうち、説明を省略したAjaxと非同期処理、およびCSS Animationについてもう少し詳しく解説します。
-
第13回 HTML5で日報アプリを作る 解説編[2] レスポンシブWebデザインとBootstrapを使う
サンプルアプリケーションの実装では、見た目の装飾、レイアウトとして「レスポンシブWebデザイン」「CSSフレームワークであるBootstrapの適用」について触れました。実装編では、CSSファイル(スタイルシート)は編集しませんでしたが、ここではCSSファイルに実装を加えながら説明していきます。
-
第12回 HTML5で日報アプリを作る 解説編[1] HTML5の入力補助部品を使う
前回の「実装編」ではサンプルアプリケーションの実装方法について説明してきました。今回は、「解説編」です。実装編で使用した技術要素や、実装編では説明しきれなかった内容について、詳しく説明していきます。
-
第11回 HTML5で日報アプリを作る 実装編[3] 操作や処理を定義する
第9回からは、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材に、HTML5の機能や開発ツールの使い方を解説しています。今回は「実装編」の3回めです。
-
第10回 HTML5で日報アプリを作る 実装編[2] 画面のレイアウトを定義する
第9回からは、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材に、HTML5の機能や開発ツールの使い方を解説しています。今回は「実装編」の2回めです。
-
第9回 HTML5で日報アプリを作る 実装編[1] 画面の構造を定義する
実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材として、HTML5の機能や開発のためのツールをどう使っていくか、順を追って説明していきます。まずは、全体の構造の定義からです。
-
第8回 HTML5でHello Worldを作って動かしてみよう!(後編)
動画の再生や、音声出力など、多彩な表現も、HTML5の魅力の一つです。「WebSpeechAPI」を利用すると指定した文字列を読み上げることができます。ただし、iOSは7以降、Androidはバージョンによっては非対応です。 先ほどの例に、挨拶を読み上げるボタンを追加してみましょう。
-
第7回 HTML5でHello Worldを作って動かしてみよう!(前編)
今回と次回は、「Hello World」という多くのプログラム言語を学ぶ際に用いられる、ユーザー操作に応じて挨拶を返すという簡単な仕様を元に、これを改編していくことで、コーディング作業における実践的なノウハウ、考慮点を身に付けていきます。
-
第6回 効率良いHTML5コーディングは準備が肝心
本特集は、次世代Web標準である「HTML5」を使って業務システムを構築するために必要な情報や役立つ情報を解説します。ここからは「実践編」として、具体的な業務システムを想定し、HTML5を利用するとどのようにに高い表現力や操作性が実現されていくか、コード例を交えながらより具体的にみていきます。
-
第5回 HTML5の広がりとこれから
最終回である今回は、まず前半でHTML5を中心としたWeb技術の広がりを事例ベースでいくつか紹介します。後半は、前回までの内容をおさらいしつつ、これからの技術動向をまとめ、Webの進歩とどのように向き合っていくべきかを考えてみたいと思います。
-
第4回 HTML5を使った実際の開発の進め方
今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる「成功させるために考慮すべき点」や「失敗しないための開発の進め方」、「役に立つツールやライブラリ」などの情報をまとめて紹介します。
-
第3回 データ可視化のための三種の神器「チャート&グリッド&図形」
今回は、業務Webアプリケーション開発という観点からHTML5がどう活用できるのかをさらに掘り下げて紹介します。
-
第2回 HTML5でここまでできる!入力補助からオフライン実行まで
今回は、HTML5が現在どのように進化しており、業務システムを開発する中でどう役立つのかを紹介します。
日経クロステック Special
What's New
- 先進自治体が集まって徹底討論!自治体DX
- これからのオンプレが目指すべき姿
- DX時代 サーバー向けCPUの最新情報
- サービス利用型商材でインフラ関連業務改革
- 生成AI時代を支えるサーバーの高い技術力
- アジャイル開発が生成AIの活用に有効
- AIエージェント時代での製造業のDX戦略
- 「複合AI」に必要なITインフラを考える
- Salesforce≫求められるスキルは
- 決算短信の英文開示 見逃せない重要課題
- CRA適用の影響と製造業の打つべき一手
- 「負担」を抑えて、「安全」を得るには?
- リコーのDX新拠点 その実力に迫る
- 教育の質を高め、人材育成に寄与する新制度
- 増えるWebサイトが経営リスクに≫理由は
- 「DXの伴走者」に聞く変革への戦略&方策
経営
- 先進自治体が集まって徹底討論!自治体DX
- アジャイル開発が生成AIの活用に有効
- 「複合AI」に必要なITインフラを考える
- Salesforce≫求められるスキルは
- 決算短信の英文開示 見逃せない重要課題
- リコーのDX新拠点 その実力に迫る
- 教育の質を高め、人材育成に寄与する新制度
- 「DXの伴走者」に聞く変革への戦略&方策
- 多角的アプローチによる顧客価値創造とは?
- 次世代コンタクトセンターの最新AI技術
- ERP導入で忘れがちな「大切なこと」とは
- 新オフィスから新価値を創造・発信
- プリンター刷新でトータルコストを削減
- Suicaデータを活用する駅カルテとは!
- 業務のデジタル化の「障壁」と「解決策」
- 未来ビジネスを創るテクノロジーの力
- 大和ハウスのデジタル帳票基盤、導入の裏側
- ServiceNowでDXを加速≫方法は
- SAPプロジェクトの全体像をいかに描くか