Webアプリ制作チュートリアル #01「はじめの一歩」

2024年8月14日

Webアプリ

t f B! P L
eyecatch インターネットブラウザを利用したWebアプリケーション(Webアプリ)は、インストールする必要もなく、端末などのデバイスに左右されずに使う事ができるソフトウェアです。 手軽に利用できるWebアプリケーションを手軽に構築する方法をシリーズでお届けします。

Webアプリのインストールと簡単アクセスについて

スマートフォンにアプリケーションをインストールする場合、iPhoneまたはAndroidとしてのアプリケーションとして構築されている必要がありますが、インターネットブラウザは何もしなくてもインストールされています。 Webアプリケーションはイントールする必要はないですが、URLアクセスする必要があります。 でも一度アクセスしてしまえば、ショートカットなどを作っておくだけで簡単にアクセスできるようになります。 スマホアプリのインストールハードルは高く、利用者に伸び悩むという事が軽減されるのもWebアプリの特徴ですね。 最初にWebアプリケーションにアクセスするには、次の3つの方法があります。
  1. URLを入力する
  2. Webサイトからリンクをクリック
  3. QRコードなどからの読み取り
アプリケーションをインストールする事が不要なので、URLをメールで送付したり、 チャットアプリやSMSなど、手軽な文字送信で簡単にアプリを送る事ができます。 もちろん、URLクエリー情報や、ハッシュリンクなども使えるので、それを利用する事で部分的な情報や、途中段階からのアクセスも構築次第ですができるようになります。

Webアプリのデメリット

便利そうなWebアプリですが、デメリットもちゃんとあります。 それは基本的にインターネットブラウザを使うので、端末側でのセキュリティが極めてハイレベルになるため、データ保存や別ドメインアクセスなどは、基本的には直接できなくなります。 また、Webサイトを使っている場合に、いろいろなセキュリティアラートが出てきますが、それもウザいほど表示されてしまいます。 ※基本的にはWebサイトなので・・・ でも、たいしたアプリが作れないのではないか?と疑心暗鬼になる必要はありません。 セキュリティに関しては、Webサイトセキュリティと全く同じなので、特殊な学習をする必要はないですし、 データの読み書きが必要な場合は、少し特殊なWebストレージや、WebAPIという独自のツールをサーバーに構築することで逆にアプリケーションよりも便利にすることも可能です。 デメリットをメリットに変える事ができるのも、エンジニアリング次第という事ですね。

Webアプリを作る時の必須スキル

非常に簡単なWebアプリは、HTMLさえ理解できてコーディングできれば、作る事はできます。 でも、実際には、Javascriptを使った色々なスキルが必要になります。 データを扱う場合は、WebAPI連携をするための、AJAX(非同期処理)や、データ操作をする配列操作などの演算やJavascript特有のデータ処理が必要になり、 ゲームなどを作る場合は、表示をするための描画系処理として、CanvasやSVGなどについて、画像やWegGLなどを色々な表示方法に基づいて描画できるようにしておく必要があります。 他にも、デザイン性を効率的に表示するために、CSSについての深い知識が必要になる場合もあります。 構築するWebアプリによって、求められる技術は違ってきますが、中には全て求められる場合もあるので、柔軟に対応できるために、周辺スキルを身につけることも必要になります。

Webアプリは無料で作れる

実際に開発をする場合、特別な開発環境が必要になる場合もありますが、個人的には、VScodeだけあれば、コーディングしてデバッグまでできてしまいます。 ただ、WebAPIを同時開発する場合は、Dockerなどを使ったローカル環境を作る必要がありますが、それも以前ブログで書いたDockerリポジトリである程度簡単に構築することができます。 過去ブログ記事 : [Docker] 色々な言語環境を詰め込んだGitパックを作ったよ アイコンや画像素材などを作るには、PhotoshopやIllustratorでもいいですが、無料の画像ソフトでも十分に対応できます。 ※実際のデザインについては、それぞれのセンスについては、今回のレクチャーには含まれません

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ