すべてのカテゴリ

Web プログラミングは難易度が高い？プログラミングを学習する際に、どこから始めれば良いか迷う事があるかと思います。Web プログラミングは、フリーランスでも仕事が多く、人気の分野ですがやや難易度の高い分野になります。この記事では、Web プログラミングに必要な要素を考えながらその難易度を検証します。Web プログラミングに必要な要素は？Web プログラミングは、前提として Web ブラウザを利用して使うプログラムを作成することになります。 Web ブラウザで利用するために、いくつかの制約事項があります。＊　表示できるのは HTML＊　プログラムの実行は Javascript　基本的にこの二点は、Web ブログラミングの二つの大きな前提条件になります。従って、Web プログラミングをする上での最低限のスキルは、＊　HTML・CSS が書ける＊　Javascript が書ける　という事になります。CSS は書かなくても機能の実現はできますが、使いやすく、見栄えのするアプリに仕上げるには CSS も必須ということになります。一方で、デースクトップのアプリの場合は、どうでしょうか？ デスクトップの場合、プログラミング言語を含めて選択肢がたくさんあるので、単純に比較する事ができません。 C や C++でも開発できますし、いろいろなプラットフォーム（OS）で動作させることを考えると、Java や Python なども便利です。 いずれのプログラミング言語の場合でも、基本的に、開発用の PC で動作させることのできるプログラミング言語ならば、プログラミング言語の基本を学習すれば開発ができま

シンプルな Web サイトの作り方シンプルな Web サイトは Firebase のホスティング機能を利用すると簡単に作成できます。HTML と CSS で必要なページを作成して公開する方法です。各ページの中身（コンテンツ）を作成すれば、簡単にインターネットで公開で s きます。この Web サイトの作成に必要なのは以下の項目です＊　基本的な HTML と CSS の記述方法＊　Google アカウント（Firebase を利用するには Google アカウントが必要です）＊　Web サイト作成用の PC（Windows/Mac/Linux）＊　インターネットアクセス費用は基本的に無料ですFirebase プロジェクトの作成Firebase のホスティング機能を利用して公開するので、Firebase のプロジェクトを作成する必要があります。 Firebase は Google が提供するサービスで利用するためには、Google アカウントが必要です。 まだ、Google アカウントをお持ちでない場合は、最初に Google アカウントを作成してください。Google アカウントはこちらのサイトから作成できます。Google のアカウントの準備ができららFirebase コンソールにアクセスします。Firebase の利用が初めての場合は、以下のような画面が現れますので、「_Create a project_」をクリックします。Firebaseプロジェクト作成画面次に表示する画面では、プロジェクト名を入力します。Firebaseプロジェクト名入力画面次の画面は Google An

2 つの Firebase セキュリティルールフロントエンドから Firebase のデータベースやストレージ機能を利用する場合、セキュリティルールの設定が必要になる場合が殆どです。セキュリティルールの設定は仕組みをよく理解していないと原因の特定に時間がかかる場合があります。基本は Firebase コンソールで設定Firebase のデータベースやストレージ機能を利用する場合、アクセスの権限はセキュリティルールを設定して管理します。Web 系のアプリの場合、Web ブラウザでフロントエンドのコードを実行するために、Javascript のソースコードを見ることができるため、プログラムのコードとは別にセキュリティ対策を行わないと問題になる場合が多いのが大きな理由です。通常設定は、Firebase のコンソールで行います。データベースやストレージの機能を有効にする際に設定することが求められるようになっています。開発時に最初から完全なセキュリティルールを設定するのは難しい場合も多いので、開発用の設定も準備されています。開発用の設定の場合、約 1 ヶ月先の日付を指定して、その期日前ならば全ての読み書きのアクセスの権限を許可して、基本機能の実装に集中することが可能なようにする事ができます。ただし、この開発用の設定の場合は、全ての権限が全ての利用者に与えられることになるので、注意しないとアプリの情報を改変されたりする可能性があります。従って、このモードで利用する場合は、インターネットに公開しないで、開発用の PC 上でテストをして利用する場合などに限定して利用するのが普通です。実際は、イ

Django のデプロイメント　その１　サーバーの準備前回の記事では、Pythonanywhere のサービスを利用して、Django のフレームワークを利用して開発した Web アプリを公開する手順を紹介しました。殆ど、開発用のサーバーで行っているのと大きな違いはありませんでした。 本格的に Django で開発した Web アプリをインターネットで公開する場合、もう少し詳細な知識と作業が必要になります。この記事では何回かに分けて Django で開発した Web アプリを公開するための準備について紹介します。サーバーの準備今回は、実際にインターネットに公開するのではなく、「仮想 Web サーバ」を作成してそこに Django で開発した Web アプリをおいてサービスを提供するまでを実践してみようというものです。従って、Web ホスティングサービスを利用する必要はありません。しかし、ホスティングをする「Web サーバー」は必要になります。そこで、仮想マシーンを Web サーバーにして実際にサービスを提供するようにすることにします。 仮想環境は、「Docker」などを使って実現することも可能ですが、Docker を利用した記事は別に予定していますので、今回は「ハイパーバイザー」を利用した仮想マシーンで実践する事にします。ハイパーバイザー（Hypervisor）を利用した仮想マシーンには、よく利用されているもので：＊　VMWare＊　VirtualBox＊　Parallels　などがあります。Mac などでは、Parallels が便利ですが、今回は VMWare を利用した物

NuxtアプリをFirebaseでホスティングするには前回の投稿で紹介したように、NextやNuxtのようなサーバ側でレンダリング（描画）をするアプリの場合は、インターネットに公開するための設定方法が少し面倒になります。これは、通常のWebサーバーの機能である、リクエストされたURLの情報を提供する以外に、リクエストされた「ページを作る」という処理が必要になるためです。この記事では、NuxtのアプリをFirebaseでホスティングするための設定方法の詳細を紹介します。必要な手順NuxtアプリをFirebaseで公開する手順です。前提条件として、公開したいNuxtのアプリはすでに開発済ということでその後の手順について紹介します。この例では、Nuxtのテンプレートのプロジェクトを公開するという形で紹介していきます。1. Nuxtのアプリを作る2. 公開用のフォルダを作成3. Firebaseの設定4. テスト5. 公開（deployment）Nuxtのアプリを作る今回は、Nuxtのアプリの実際の実装は行いません。テンプレートのアプリをそのまま公開するという前提ですすめます。テンプレートのアプリは、「create-nuxt-app」を使って作成します。開発用のPCにインストールされていない場合は、まずこのパッケージをインストールします。$ sudo npm install -g create-nuxt-app$ npx create-nuxt-app nuxt-sample(*)Windowsの場合「sudo」は必要ありません。コマンドを実行すると、プロジェクトの設定について聞かれる

Next/Nuxt で作ったアプリもホスティングできる FirebaseWeb アプリをサーバーサイドのレンダリングを利用して実装するフレームワークは、Next や Nuxt がよく利用されますが、実際にインターネットに公開する場合はフロントエンドのフレームワークの React や Vue を利用した場合に比べると少し面倒なケースが多くなります。理由は、当然と言えば当然ですが、サーバー側でバックエンドのプログラムを動かす必要があるのが大きな理由です。Firebase はバックエンドのサービスを Functions(Cloud Functions)という形でサポートしているので、Nuxt のアプリをホスティングすることもできます。この記事では、まずは、Firebase で Nuxt のアプリをホスティングする仕組みについて概要を説明します。詳しいやり方は別の記事で改めて紹介する予定です。サーバー側のレンダリングとは？最初にまず「サーバー側のレンダリング」（Server Side Rendering/SSR）について簡単に説明します。Web サイトの基本的な仕組みは、サーバーに HTML で書かれたファイルを置いておいて、Web ブラウザが URL を指定して表示するデータを受け取ることで実現しています。シンプルなサイトの場合は、HTML ファイルに書かれた HTML の情報を受け取って表示するのが「静的サイト」と呼ばれるものです。「静的」なので、基本的に表示される内容は予め HTML 書かれた情報に固定されていて、別な情報を表示するにはサーバーにあるファイルを更新する必要がありま

Firebaseをどうして使うか？よく質問を頂くことに、「Firebase をどうして使うのか？」という事があります。 一言で答える場合は、「便利だから」というのが一番しっくりくる答えだと思います。 しかし、多くの方はそれでは何か納得できない場合が多いようです。そこで、この記事ではもう少し詳しく Firebase の何が便利なのかを考えてまとめて見ました。Firebase でアプリに必要な基本機能がまかなえるWeb アプリだけに限らずアプリを開発する上で必要な基本機能が揃っているのが一番便利な点です。この話は何度か書いていますが、基本的に、HTML/CSS がある程度書けて、Javascript の基本がわかれば、「本格的なアプリが作れる」というのは非常に魅力的です。１ヶ月勉強すれば Web アプリに必要な技術が身に付くどんなアプリを作るかのアイディアは必要ですが、アプリを作るために必要なスキルという見方をすれば、１ヶ月も真剣に勉強すれば必要なスキルを十分に身につける事ができます。つまり、本格的なアプリが１ヶ月で作れるようになるという事です。どれくらい凄いかと言うと、Firebase を使わない場合には、１ヶ月で作るのはかなり厳しいです。理由は、幾つかありますが、Firebase がやってくれる事を実現するのに他のことを勉強する必要があるからです。＊　データベース＊　バックエンドのプログラミング例えば、データベースに MySQL などの SQL データベースを準備して、バックエンドのプログラミングに PHP を使うとします。そうすると、SQL のデータベースについて勉強しなけれ

FirebaseベースのプロジェクトとWebサイトFirebaseを利用してWebホスティングをするにはFirebaseのプロジェクトを作る必要があります。 一つのFirebaseのプロジェクトで複数のWebサイトのホスティングも可能です。 この記事では、Firebaseのホスティングをする際にどのようにプロジェクトを作成したらよいのかを解説しています。 基本は一つのFirebaseプロジェクトで！ Firebaseのプロジェクトで複数のWebサイトのホスティングを設定する事が可能です。 これは、一般的なWebホスティングのサービスより柔軟性の高いサービスと言えます。 特に、低価格のWebホスティングのサービスの場合、作成可能な「サブドメイン」が制限されている場合も多く、魅力的なサービスと言えます。Webサイトで扱う機能や分類ごとにサブドメインを設定する事ができます。同じドメインでフォルダで分類しなくてもよいので、見やすく使いやすいWebサイトの実現が容易になります。 サイトの管理も余り多くのFirebaseプロジェクトを作るよりは、一つのFirebaseのプロジェクトで管理した方が全体の見通しもよくなります。 別のサイトをホスティングするには？ 同じプロジェクト内で別のサイトを追加するのは簡単です！ Firebaseコンソールで「ホスティング（Hosting）」の設定に行って「別のサイトを追加（Add another site）（Add another site）」をクリックして設定するだけです。 あとは、最初のサイト以外ではfirebase.jsonに２つ目以降の

Firebaseのバックアップは？Firebaseを利用したプロジェクトはどうやってバックアップをするか気になりますよね？ この記事は、Firebaseを利用したプロジェクトをどのようにバックアップをするかをまとめてみました。 Firebaseを利用したプロジェクトのバックアップと言っても利用している機能によって扱いが変わってきます。この記事では以下の機能に関するバックアップについてまとめています。 * プロジェクトの登録ユーザー（Firebaseのアカウント） * Firebaseのホスティングデータ * Firebaseのデータベースのデータ（Cloud Firestore） * Firebaseのストレージのデータ * Firebaseのファンクション（Functions/バックエンドサービスのコード） プロジェクトの登録ユーザー（Firebaseのアカウント） FirebaseのプロジェクトのユーザはFirebaseが管理しています。Firebaseコンソールに行くとそのリストを見ることができます。 一つの方法は、そのリストから手作業でユーザーのリストを抜き出すことができます。 残念ながら、Firebaseのクライアント側のＳＤＫからはこのリストにはアクセスできません。 プログラムで管理するには、Firebase Admin SDKを使って、管理用のツールをNode.jsのアプリとして作成する必要があります。 制限事項としては、パスワード情報にはアクセスできません。ユーザのリストやUID などを取得などに限定された情報のみになります。 Firebaseのホステ

FirebaseでVueアプリをデプロイ（公開）する方法FirebaseでVueアプリをデプロイ（公開）する方法 よく利用されているフレームワークのVue(Vue.js)でアプリを開発して、そのアプリをインターネットで公開する方法です！ この記事ではFirebaseのホスティング機能を利用して、Vueで開発したアプリをインターネットで公開する方法を解説しています。 公開するフォルダーを決める！ 何を今更と思われる方もいらっしゃると思いますが、どのフォルダーの中身をインターネットで公開するかを最初に決めます。 候補としては、 ＊Vueのプロジェクトフォルダを使う ＊Firebaseのホスティングで公開する為のフォルダを用意する シンプルなのは、Vueのプロジェクトフォルダーをそのまま公開用にも共用してしまうという方法が一番手間がかかりません。 Firebaseのホスティングで公開する専用のフォルダを用意する場合、開発用のソースコードのフォルダーと公開用のフォルダーを完全に分けて管理できるというメリットがあります。 わたしも、最初は、Vueのプロジェクトフォルダをそのまま利用していました。しかし、デザインを別のプロジェクトで再利用する場合に、Firebaseのプロジェクトも別のプロジェクトになる場合が多くなります。そういう事情もあって、最近は公開は別のフォルダを利用するようにしています。 Vueのプロジェクトフォルダーを使う場合 Vueのプロジェクトフォルダに移動して、Firebaseのホスティングの為の準備を行います。 $ npm install -g fireba