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

Silicon Valley Super Ware 2020年5月31日 JSON Placeholderで学ぶREST API! 6月のテーマは「REST API」という事で連載をしていきます。 REST APIは外部のWebサービスをあなたのWebサービスに取り込んだりする場合 よく利用される「しくみ」です。 REST APIの詳細な説明は難しい事も沢山書いてあるので今回は無視して 「どうやって使うか」に集中して使いかたをマスターするとう方針で行きます！ 利用方法は難しい事はなく、URLに少し「おまけの情報」を加えて送るだけです。 使いかたさえ覚えてしまえば、REST APIを提供しているWebサービスを簡単に あなたのWebサービスに取り込めるようになります。 今月利用するのが「JSON Placeholder」というサービスです。 このサービスの提供するURLにデータを送ると必要なレスポンスを返してくれます。 使ってみるのには手軽なサービス！ 実際のWebサービスを利用して、それを組み込むというやり方もできますが、 実際のサービス利用の場合いろいろ制約も大きくなりやる事も多くなります。 そこで、まずは、REST APIを使う事に集中するためJSON Plaseholderを 選びました。 面倒な事の一つは「認証」です。 勝手にサービスを使ったり悪用を防ぐために多くのWebサービスでは 「API Key」を設定して、サービスの利用者が登録した人かどうかを チェックする場合が殆どです。 認証のやり方も大切ですが、認証方法はサービスごとに幾つかの パターンがあるので、まずは認証がいらない所から始めようというのが 趣旨です。 「http://www.abcd.com/users」にHTTP GETでアクセスすると 登録されている全ユーザーの情報が取れる。とうような

Silicon Valley Super Ware 2020年5月29日 6月のテーマは？　使えると得をする「REST API」！！ 5月も終わりになりました。今年度は、「Webサービスを使ったビジネス」を テーマに活動しています。4月と5月は別のやり方で「お問合せフォーム」の Webサービスの制作をお伝えしてきました。 6月の話題は「REST API」を取り上げる予定です。 何か難しそうな感じがしますが、言葉の定義とかいろいろな詳細には触れません！ 実際に利用するのにその中身や定義はそれほど重要ではないからです。 APIも同様です。 一言で言えば、「データをサーバーとやり取りするための取り決め」です！ 合言葉というのが一番分かり易いかもしれません。 「山」と言ったら「川」と返すようなそんなイメージです。 もう少し詳しくREST　APIを！ APIというのは、一般的にプログラムが別のプログラムやモジュールとやり取りする 取り決めです。REST（Representational State Transfer）もこのAPIの決め方の一つです。 インターネットで検索すると、いろいろ難しい説明が出てきますが、 今日多く使われている物は特定のリンク（URL/URI）にアクセスすると特定の処理や データをやり取りできるという物です。 「http://www.abcd.com/users」にHTTP GETでアクセスすると 登録されている全ユーザーの情報が取れる。とうような使いかたをします。 どのURLで何ができるかが分かれば、簡単に利用できます！ 説明を読むと難しそうですが、実際に使う分にはそれほど難しい事はありません。 どのURLにアクセスすると、決まった事をやってくれるという仕組みです。 何故APIが必要？ APIはデータのやり取りや処理を行

Silicon Valley Super Ware 2020年5月28日 急な開発でも対応できるVue.js 今日は、急遽Webサービスの試作依頼がありました。 ということで、約半日かけてまずは機能優先で提供しました。 この開発は、プリント基板開発のツールで基板のテストをする テストポイントのチェックに使う物です。 現状は、バックエンドは動かしておらず、ブラウザーで動作する スタンドアロン型のWebサービスです。 期間限定で公開します。（1週間程度で削除します） 今回はこのWebサービスの作り方を特集するわけではないので、 詳しい使い方や機能は説明しませんが、「Webサービス」の 実例として、紹介するのが目的です。 どんなWebサービスか？ やる事は、設計データと、データの解析条件を入れて、希望通りのテストポイントや テストポイントを作らないはずの接続にテストポイントがあるかをチェックするものです。 作業自体は単純な確認ですが、人手でやると、手間と時間がかかる確認作業です。 少し大きな設計になると、丸1日仕事になる事もあります。しかし、Webサービスで行うと 数分で作業が終わります！ つまり、このサービスがあれば、作業時間はほとんどいらないので、 この種の作業をしなければならない人にはとても便利なWebサービスという事になります。 実際に手間のかかる作業をやったことのある人は、その経験を生かしてWebサービスが作れる例です！ やる事は、４つのファイルを読み込んでそれらの情報を突き合わせて確認をして、 結果を表示するという物です。

Silicon Valley Super Ware 2020年5月27日 Vue.jsのプロジェクトの公開 VUE CLI を使って作ったWebサービスは、公開する前にやる事があります！ 「ディプロイメント」などと言われますが、作成したVueのファイルを標準的な ファイルに変換する作業「ビルド」が必要になります。 実際に裏方がやっていることは、スタティックのファイルのコピー。 これは、通常のHTMLファイルやCSSファイルなどは、そのままコピーされます。 VUEのプロジェクトで作ったファイル、VUEファイルなどは、事前処理されて 公開用の別のフォルダーに作られます。 公開用のファイルは、コメントなども取り除かれてサイズも小さくなります！ ソースファイルにはコメントなど実際の運用では必要ない情報もかなり含まれています。 VUE CLIを使うメリットは公開時にはそうした不要な情報は取り除く事が出来る事です！ 今日は、この「デプロイメント」について簡単に触れておきます。 Webサービスをどこに置くか？ 最初に、確認する事は、WebサービスをWebホスティングのメインのフォルダーで公開するのか サブフォルダーで公開するかです。 VUE CLIを使って作った「１ページアプリ」は、基本的に「index.html」に埋め込まれる形で 作られます。このファイルをどこに置くかという事です。 メインのフォルダは例えば、URLが「https://www.siliconvalleysw.com/」のメインのフォルダ すなわち、「https://www.siliconvalleysw.com/ index.html 」になる場合はメインのフォルダです

Silicon Valley Super Ware 2020年5月26日 データの流れを事前にチェック！ 今日も、Vue.jsを使った「お問合せフォーム」のWebサービスのまとめの続きです。 良く使う機能の部品化を進めるためには、UI（ユーザーインターフェース）と データ処理を出来るだけきれいに分ける事が大切です。 今日はUIとデータ処理の「分離」のコツをまとめてみました 「データマップ」の作成がポイントです！ 効果的な方法は、「ページマップ」と「データマップ」を最初に作る事です！ ページマップとは？ 最初に作るのがページマップです。これは、Webサービスのページ構成がどうなっているかを 図式化した物です。 Webサービスと言っても、作り方はWebサイトのデザインに近いものがあります。 Webサイトの作成で良く行わえるように、実際にサイトのコーディングをする前に サイトのレイアウトの概要を作るのが普通ですが、Webサービスでも同じ作業が必要です。 実際に仕事でWebサービスを作る場合、Webサイトのデザインと一緒でその構成やイメージを お客様に提示して方向性を決めるのが普通なので、特別な作業というわけではありません。 今回の「お問合せフォーム」のWebサービスのように、「練習」で作る場合は、自分がわかれば よいので、手書きのラフなスケッチでも良いと思いますが、将来仕事で使う場合の練習だと 考えれば、お客様に見せられる形で作った方が練習になります。 良く使われているのがアドビのXDとかフォトショップで提供する場合が多いようです。 Webサービスの場合は画面がどのように切り替わるかを図式化します。 Webサービスは、基本的にアプリですから、利用者の操作、「ボタンのクリック」「メニューなどの選択」 などで、画面が切り替わっていきます。画面やデータの表示が切り替わるための操作や条件を

Silicon Valley Super Ware 2020年5月25日 お問合せフォームのWebサービスをVue.jsで！ 今週は、アメリカはメモリアルデーで週末三連休でした。 ブログの連載も一日余分にお休みを頂きました。 今月は、「楽して」Webサービスを作る事をテーマに フレームワーク（ライブラリ）として、Vue.jsを導入して 4月に制作した、「お問合せフォーム」のWebサービスを作るという 事をテーマにお届けしてきました！ 今週はそのまとめをしていく予定です。 フレームワークは「UI」を作る強力な武器！ 繰り返しになりますが、今月取り上げたフレームワーク（ライブラリ）は、 UI（ユーザーインターフェース）を作るための道具です。 良く利用されているUIの為のフレームワーク（ライブラリ）は、 「React」「Vue.js」「Angular」などがあります。 「jQuery」なども加えればいろいろなフレームワーク（ライブラリ）が あります。 Vue.jsを選んだ理由は？ いろいろなフレームワーク（ライブラリ）がある中で今回「Vue.js」を 選んだのには幾つか理由があります。 以前の投稿でも書いた通り、個人的に好きで良く利用している フレームワーク（ライブラリ）は、実は「React」です。 個人的にはある程度の規模のUIを作るには、Reactが使いやすいと 考えています。しかし、出来る事、必要な勉強量、性能などは 大きな差はありません。 ハッキリ言ってどれか一つできれば十分です！ 今回、Vue.jsを選んだ大きな理由は「初心者には一番入りやすい」事です！ 「jQuery」のように、CDNを中心とした使いかたでも簡単にできますし、 いろいろな基本的な機能が簡単な設定で利用できます。 あとは、シリコンバレースーパーウエアが提唱す

Silicon Valley Super Ware 2020年5月21日 VUEXって何？データの一元管理 先日、Webサービスのデータの一元管理の話の際に少しVUEXに触れました。 そのあと、何件か質問を頂いたので今日はVUEXについてもう少し詳しく 書いてみる事にしました。 一番基本のVue.js使い方は、「script」の中で、変数を使ってデータを 保持して使うという方法です。Vue.jsの場合、この変数と「template」の HTML記述を「v-」というタグで結び付けてUIを作っています。 部品（モジュール）間のデータの受け渡しは基本的に 「v-bind」と「$emit」を使ってやり取りします お問合せフォームの場合やり取りする情報は限定的で余り多くないため データの受け渡しはそれほど問題になりません。 所が、ページ数や部品数が増えてきて、扱うデータが増えて、 同じデータをいろいろなページや部品で扱うとなるとちょっと大変です。 データの流れも不明瞭になりやすいですし、どこでデータを更新して、 更新した事を他のページに通知したりで結構大変です。 フレームワークはUIを作る物 前回取り上げたように、ReactやVue.jsなどのフレームワーク（ライブラリ）は主にUIを 作るために作られたものです。 本来、データ処理とUIは分けて考えた方がコードも整理されて扱いやすくなります。 そこで良く取られる方法が、データをまとめて一元管理するという手法です。 そのために、Vue.jsで使われているのが VUEX というわけです。 他にも、Reactで良く利用されるREDUXなども、同じような目的で作られたモジュールです。 もちろん、Vue.jsでも利用できます。 VUEXが良く利用されるのは、Vue.jsに簡単に組み込む事ができるからです。 「VUE UI」を利用している場合、「Pro

Silicon Valley Super Ware 2020年5月20日 UI以外のコードの再利用 Vue.jsやReactなどのフレームワーク（ライブラリ）を使うと UIの部品化のメリットがある事は既に何回か取り上げた通りです。 前回は、UIとデータ処理を分けるとコードが見やすくスッキリする という話を書きました。 では、データ処理の部分のコードの部品化はどうでしょうか？ 今日は、データ処理部分の部品化について取り上げます。 オブジェクト指向は部品化がしやすい！ 最近のプログラミング言語の殆どがオブジェクト指向と 言われるプログラミングの 「スタイル」 をサポートしています。 シリコンバレースーパーウエアでWebサービス制作の為に 推奨しているJavaScriptもオブジェクト指向の概念が 取り入れられています。 でも、「オブジェクト指向」ってそもそも何？ 意外にきちんと説明できる人は少ないです。 オブジェクト指向とは？ オブジェクト指向というのは、英語の「Object oriented programming」を ほぼ直訳した言葉です。 オブジェクトもいろいろ訳せると思いますが、基本的には「物」みたいなイメージです。 要は部品化を勧めましょうという考えの基に生まれたプログラムのやり方です。 例えば、「時計」という物があります。これをオブジェクトと呼んでいるイメージです。 時計には、時間を自分自身で測って表示するという機能がついていますよね。 さらに、時間の調節をしたり、日付などを合わせたりする機能もあります。 それらを全て含めて「時計」というわけです。 何が便利かというと、この時計の機能に追加して別の製品として売る事ができる！ これがポイントです。 普通の時計は、世界中で決まったある瞬間を基準に時間を計っています。 既に、時間を図る機

Silicon Valley Super Ware 2020年5月19日 フレームワークの目的 Vue.jsを利用した「お問合せフォーム」のWebサービスもゴールに近づいてきました！ 今日は「フレームワーク（ライブラリ）」について書いてみました。 「Vue.js」にしても「React」にしても、基本はUIを作るためのフレームワーク（ライブラリ）と されています。この辺を早い段階できちんと理解しておくことは将来の複雑なWebサービスを 作るために大切なので取り上げてみました。 フレームワークは　UI（ユーザーインターフェース）を作るための物です！ Webサービスは、大きく２つの部分で出来ています。 UI(ユーザーインターフェース) データ処理部分 当たり前なのですが、意外にこのことはきちんと認識するのが難しい部分です。 全然別のプログラム！ UIはユーザーつまり、利用者が直接見たり、操作する部分です。 一方で、データ処理部分というのは、利用者の操作によって必要なデータを準備する部分です。 将来にわたって、管理しやすいプログラムにするためには、この２つは出来るだけ 分けて別々に作れるのが理想です。そうする事で、将来の拡張や、設計の変更が楽になります。 今回のような、「小さな」Webサービスの場合、この２つを混在する形で作っても余り大きな 問題にはなりません。実はデータの処理部分は殆どないからです。 大きなWebサービスになると話が変わってきます！ 大きなWebサービスになると、扱うデータの種類は増えますし、表示に使う部品やページの数も増えます。 その場合、各部品間やページ間で同じようなデータを共有したり、受け渡しをする必要が出てきます。 そのような場合、データを処理する部分と利用者がやり取りする部分を分けて作った方が、 全体の見通しやデータの受け渡しがシンプルになります。

Silicon Valley Super Ware 2020年5月18日 Webサービスの公開！ セキュリティルールも設定して、Webサービスの公開の準備はできました。 今回は、UI(ユーザーインターフェース)の作成にVue.jsを利用しました。 特に、VUE CLIを使って作った場合は公開の前にやる事があります。 VUE CLIでUIを作る場合、殆どのファイルは「*.vue」というファイルになっています。 CDNで作る場合は、HTMLファイルなのでそのまま公開できますが、 VUE CLIで作った場合は、一つ余分な仕事をする必要があります。 それは、公開用のイメージを作る事「build」という作業が必要になります それで、作ったイメージを公開するというステップになります。 VUE CLIを使うもう一つの利点 ご存じの方も多いと思いますが、基本的にJavaScriptのプログラムは Webブラウザーから見る事ができます。これは基本的には何をしても 変わりません。 ただ、一つできる事があります。 読める事に変わりはありませんが、読みにくくする事はできます。 VUE CLIで公開用のイメージを作る際に、JavaScriptをまとめて コメント行などを除いてサイズを小さくするような事をやってくれます。 読めなくなるわけではありませんが、読みにくくなります。 メリットと言えるほどの事ではありませんが、そうした利点はあります。 その他の注意点 後は、公開する際にどこにWebサービスを置くかという事も 考慮する必要があります。 公開するドメインのルート（メインのフォルダ）にWebサービスを 置いて公開する場合は問題にならない事が多いのですが、 サブフォルダーにおいて公開する場合は公開用のイメージを作る前に 設定を

Silicon Valley Super Ware 2020年5月17日 Webサービスを公開する場合の注意点！ 先週は、「Vue.js」での実装にポイントをおいて、お問合せフォームの実装について 説明してきました。 実際に初めて「Vue.js」の開発環境を使う人には大変だったと思いますが、 如何でしょうか？連載の主体が、Webサービスを作る事に置いているので、 Vue.jsに関しては、時々ポイントを取り上げて行くという形で今後も対応していきます。 今日はサービスを公開する前の注意点について書いていきます。 その中でも重要なのが「セキュリティ」です。 今日のメインのテーマは、「Firebase」のセキュリティです。 Firebaseのセキュリティ Firebaseのセキュリティの基本は、誰が「読み込み」や「書き込み」が できるかという設定です。 さらに詳しく分けるとFirebaseのデータベースでは大きく分けて以下の設定ができます データエントリー（Firebaseのドキュメント）の新規作成 データエントリーの情報の更新 データエントリーの情報の削除 データエントリーの読み込み これをFirebaseコンソールのルール設定で定義できるようになっています。 セキュリティールールで設定する事が重要！ 先週の話を見ると、お問合せのデータのアクセスにはログインが必要で、 ログインしてから表示すれば問題がないのでは？と思うかもしれません。 実はそれでは 不十分 です。 理由は、JavaScriptのコードはブラウザーから見る事が出来るからです！ つまり、データベースへのアクセスの仕方を知っていれば、コードを見ると セキュリティールールできちんと設定がされていないと、誰でもデータを 見る事が出来る事になります。 Firebaseのデータベースの設定を最初に行うときに実は聞

Silicon Valley Super Ware 2020年5月13日 要領がわかれば簡単！同じ要領で量産！ 前回は、「ログインフォーム」と「管理ページ」のデータのやり取りを作って 管理ページの一部を作りました。今日は一気に管理ページを終わらせてしまいましょう！ ログインフォームの場合、管理ページからログインフォームの部品に渡すデータはありません。 ログインのボタンが押された時に、「押されたよ！」というイベントと一緒に入力された E-Mailアドレスとパスワードを管理ページに渡すだけで済みます。 前回は、書き損ねましたが「子」から「親」にデータを渡すには 「this.$emit("EventName", payload)」で渡します！ 「EventName」は好きな名前でよくて、この名前を使って親側で受け取ります。 受け取る方は 「@EventName="eventHandler(payload)"」で受け取れます。 「EventName」が子が送る時の名前で、「eventHandler(payload)」がその処理を行うMethodです。 この名前も自由につける事ができます。「payload」が渡すデータです。複数のデータを渡したいときは、 連想配列（JavaScriptオブジェクト）で渡します。 メッセージ一覧の部品 以前の投稿で「メッセージ一覧」を表示する部分は、管理ページに残そうと思いましたが、 管理ページを見やすくするため別の部品に分ける事にしました。 やり取るするデータは、 管理ページからメッセージ一覧の部品は、「メッセージの一覧」の配列（array） メッセージ一覧から管理ページ（１）：メッセージが選択されたイベントと、選択されたデータ メッセージ一覧から管理ページ（２）：削除ボタンがされたイベントと、選択されたデータ

Silicon Valley Super Ware 2020年5月13日 Vue.jsのモジュール間のデータのやり取り フレームワーク（ライブラリ）を利用する大きなメリットは「部品化」です。 良く利用する機能を部品として作成する事で、将来同じような機能が必要になった場合に 再利用するというわけです。 Webサービスの制作を繰り返す事で、よく使う部品の数が増えていきます。 それによって、毎回最初から作らなくても共通する部分は流用しながら作れるようになります。 制作するたびに「資産」が増えて効率アップできる！ 今日はその例として、ログインフォームを取り上げます。 Webサービスを作る場合、限定した人のみがアクセスできるページを作る事はとても多くなります。 つまり、ログインフォームは使いまわしがきく「部品」の良い例です。 管理ページにログイン機能が必要！ お問合せ内容には、名前やE-Mailのアドレスなどの個人情報が含まれます。 従って、誰でも見られるという実装には問題がある場合が多くなります。 そこで、管理者のみが閲覧できるように、ログインしてお問合せのメッセージを 見る仕組みが必要になります。 そこで管理ページにアクセスするためのログインフォームを作ります！ ログインした後は、メッセージの一覧に画面を切り替えるような仕組みを実装します。 今日はその、ログイン部分を作ります。 ログインに必要な情報は今回は E-Mailアドレス パスワード です。今回は、Firebaseの認証機能を利用してこのログインの機能を作ります。 共通化が出来そうな部分は、「E-Mailアドレス」と「パスワード」の入力を行うフォームです。 これを将来、再利用できるように、別のVUEファイルで記述して別のWebサービスの制作の際にも 再利用することを目指します。

Silicon Valley Super Ware 2020年5月12日 いろいろ学べる「管理ページ」のWebサービス！ 「お問合せページ」は、4月に作ったHTMLファイルベースのお問合せフォームと 内容的にはほぼ同じなので、あまりフレームワークを使うメリットを感じられない方も 多かったのではと思います。 管理ページになると、少しはフレームワークのありがたみがわかってきます。 管理ページには「２つの顔」がある！ 一番大きな違いは、管理ページには「２つの顔」があります。 ログイン画面（管理者がログインしていない状態） 管理画面（管理者がログインしている状態） セキュリティの事を考えると、一般の利用者にお問合せ内容を見られるのは 好ましい事でない場合が殆どです。個人情報も入っているので、アクセスは 管理者に限定するというのが安全です。これを実現する方法が、ユーザーの 認証を行う事です。「ログイン（サインイン）」した人だけが見られるようにする方法です。 ログインの状態で画面を切り替える！ Vue.jsには「v-if」とう記述方法があります。これは、「template」の部分の HTMLを書く際にこのアトリビュートを使うと、条件によって表示したり、 表示しなかったりをコントロールできる機能です。 Vueの特徴は、HTMLの方に「プログラムの機能を持たせている」所があります。 これがReactの場合は、JavaScript側でレンダリング（画面の書き出し）を 制御する方法が使われていますが、Vueは違ったアプローチで実現しています。 この辺りが、好みが分かれるところの一つです。 <div v-if="login">    <p>ログインしている場合に表示</p> </div> <div v-if="!login">