どのシステム開発でも画面設計は非常に大切です。 画面設計時に良し悪しが決まってしまうことが多々あります。何故かというと画面というのは視覚的に見ることが可能なため、目に見えないプログラム実装に比べて人は評価しやすいのです。 今回は私なりの画面設計のしかたをまとめたいと思います。タイトルには「業務系Webアプリケーションシステム」と記述しましたが、仕事上こちらの開発が多いためこのように記述しました。 また業務系システムの画面設計関連の記事をあまり見かけたことがないため、今後、業務系システムの画面設計を行う方にとっての参考になればと思います。 1. 様々な業務システムのレイアウトを知る まず、作り始める前に業務システムのデザインをストックします。業務システムを調べてみるとたくさんの画面デザインを見ることができるため、こんな画面にしたいというイメージを膨らませます。 また検索時にヒットする画面たち

日本で一番日本語Webフォント「Google Fonts + 日本語早期アクセス」が好き。tattです。 ついに、この10月(執筆時は2016/11/30)にGoogleが日本語Webフォント「Google Fonts + 日本語早期アクセス」を試験的に無料公開しましたね。 そんなわけで「日本語Webフォント「Google Fonts + 日本語早期アクセス」をwebfontloaderで読み込んでみた」、tatt開催しまーす モチベーション Webフォント読み込み完了時の再描画によるテキストのちらつきに対して、JavaScriptで読み込み完了を検知してfadeInさせるとかでいい感じにしたい。 ライブラリ 使用したライブラリは1つだけとなります。 webfontloader JavaScript書く とりあえず、全部読み込んでみる。 import WebFont from "webfo

Aさん「AjaxでCSVファイルを読み込んで動かすJavaScriptのプログラムを作りました」 Bさん「HTMLファイルをPC上で直接開いても動作しますか？」 上記のような場合、ブラウザのセキュリティ制約によりファイルの読み込みがブロックされてしまい、うまく動かすことができません。 この文書では、上記のような場合にどういう方法を用いればセキュリティ制約を回避できるかの例を紹介します。 ※基本的な対象ブラウザはIE11と2016/12時点のFirefox, Chrome, Edgeです。最後の方の方法は前提条件を満たさない方法になってしまっていますが、参考として記載しています。 読み込む外部ファイルをHTMLと同フォルダか同フォルダの下層に配置(Firefox) + Ajaxに Microsoft.XMLHTTP を使用する (IE) Firefoxでは、外部ファイルをHTMLと同フォルダ