すべてのカテゴリ

新着有料ブログ

Illustratorレッスン

お金に失敗しがちな人がハマりがちな【認知バイアス...

どの道を選択したら、本当の幸せにつながるの？と悩...

どうして転職先が決まらないのか？現実的な視点で考...

ツインレイにおける「チェイサー」の心構え　※有料...

有料ブログを優先表示

4 件中 1 - 4 件表示

Vue を実際に動かしてみる！

これまでは、Vue の公式チュートリアルのページ上でコードを入力して動かしていましたが、実際に利用するにはこのままでは、Vue を利用する事ができません。今回は、公式チュートリアルの前半で学習したような、１ページで機能を実現するようなケースを考えてみます。インターネットに公開する方法Vue で開発したアプリをインターネットに公開する方法は幾つかあります。今回は、一番簡単な方法として、「HTML ファイル」で公開する方法を紹介します。 HTML ファイルならば、通常の Web ページを公開するサービスを利用すればインターネットに公開する事が可能です。ほとんどの場合は、PC で HTML ファイルを作成して、Web サイトをホスティングしているサーバーにコピー（アップロード）すれば公開できます。今回は、インターネットに公開する方法ではなく、HTML のファイルを作成する方法を紹介します。HTML ファイルの基本(*)「」の間は、HTMLの記述には関係ありません。この間にはメモのような事を書くことができます。プログラミングでは「コメント」と呼ばれます。Vue の書き方にも、基本的な枠組みがあったように、HTML にも同じように基本的な枠組みがあります。<!DOCTYPE html><html> <head>  </head> <body> <!-- HTMLの本体をここに書きます

IT・テクノロジー

シリコンバレースーパーウエア

2022/03/16

便利な外部モジュールの取り込み

便利な外部モジュールの取り込みプログラミングをする上でよく利用される機能、例えば、ネットワーク経由のアクセスなどは別の人が既に作成したモジュールがインターネットで公開されている場合が多く、改めて自分で作らなくても簡単に自分のアプリに取り込んで利用する事ができます。取り込み方はいろいろありますが、Web アプリの場合はインターネットの接続があるのが前提なのでインターネット経由でも取り込む事ができます。この記事では外部モジュールを利用する際に自分のプログラムに取り込む方法を紹介します。インターネット接続が前提の Web アプリWeb アプリとは、Web サイトの形で、Web ブラウザを使って利用する形式のアプリです。当然ですが、Web サイトにアクセスして利用するのでインターネットの接続が前提になっています。既に紹介していますが、Web アプリの場合、必要な情報は Web ブラウザを介してインターネット経由で Web サーバーから取り込んでいます。Web ページの中で、HTML で書かれた Web ページの基本情報だけではなく、そのページが利用している Javascript やイメージファイルなども一緒に取り組むようになっています。Javascript は HTML ファイルの中に記述することも可能ですが、大きなプログラムの場合、別のファイルで記述して、HTML ファイルの中から呼び出す形で読み込む場合が多くなります。要は、ある Web ページが読み込まれた場合に、必要な外部モジュールのファイルも読み込むことで、外部モジュールが提供する機能をそのページで利用できるという点では、自

IT・テクノロジー

シリコンバレースーパーウエア

2021/09/24

Facebook投稿支援アプリにReact/Vueは必要か (4)？

Facebook投稿支援アプリにReact/Vueは必要か (4)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。前回の投稿は、Reactを利用して実装してみました。プログラムでやっている事はほぼ同じですが、記述をシンプルにすることが可能になりました。この記事では、Webアプリやサービスの開発にReactと並んでよく利用されるVueを使って実装してみました。Vueの実装はnpmを利用する場合が多い！Webアプリやサービスの実装でVueを利用する場合は、Reactと同様にnpmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。Vueの場合、「Vue CLI」と呼ばれるプロジェクト管理用のパッケージがあって、これを利用するとUIも利用できるので便利です。このスタイルの方が、よく利用する機能を部品化しやすく、再利用しやすくなるのが大きな理由です。今回もReactの時と同様に、通常のHTMLとJavascriptの実装や、jQueryとの比較も考えているので、敢えてnpmを使わずに、jQueryの場合と同様に、CDN(Contents Delivery Network)で必要なモジュールをHTMLで記述したWebページに取り込んで実装をしてみました。VueをCDNで利用する場合以下のようなリンクをHTMLに記述して利用します。<link href="ｈｔｔｐｓ://cdn.jsdelivr.net/npm/bootstrap＠5.0.0-beta2/dist

IT・テクノロジー

シリコンバレースーパーウエア

2021/03/11

Firebaseの初期設定をCDNで行う

Firebaseの初期設定をCDNで行うFirebase の機能を利用するには、Firebase の設定を行う必要があります。 Firebase の設定方法はいくつかありますが、この記事では CDN(Contents Delivery Network)を利用して設定する方法を紹介します。Firebase をはじめとして、Web サイトから提供するアプリやサービスはネットワーク（インターネット）を利用することを前提にしているので、必要な「モジュール」をインターネットを通じて読み込むことで、特別なインストールをしないで利用する事が可能になります。Web ブラウザで動作するフロントエンドのプログラムは基本的に Javascript です。Web アプリや Web サービスのプログラムも Web ブラウザで動作する部分は Javascript で記述して、Web サーバーにプログラムをおく事で読み込んでいるわけですが、これをインターネット上の別のサーバーが提供するプログラムを読み込んで利用するのが CDN です。CDN を使うとインストールなしで利用できるFirebase も Web アプリや Web サービスで利用することを想定しているので、フロントエンドから利用するプログラムは CDN で取り込む事ができます。Firebase もこの CDN のプログラムを提供していて、HTML ファイルで必要な Javascript のファイルをインターネットを通して読み込むことで利用できるようになります。<!-- The core Firebase JS SDK is always re

IT・テクノロジー

シリコンバレースーパーウエア

2021/01/05