Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに はじめまして。Qiitaの公開投稿は初めてになります。satoruと申します。 今回の記事では、Webエンジニアになりたいけれど未経験だからとにかくポートフォリオをつくらないといけないよなということでtodoSNSというWebサービスを作った（作っている）際の実装内容やそれまでに思ったことを個人的なアウトプットとして述べていこうと思います。 （[email protected] pass:testtest or Google認証では入れます） 流れとしては、自己紹介、実装にかかるまでの準備（利用技術や設計）、実装のはじめからおわり、開発中に思ったこと、まとめで書き連ねていきます。 ※未熟ながら書いているため、指摘箇所等あればコメントいただけると助かります。 自己紹介 大学で情報系の学部を卒業し、SIer会社に就職して約１年半で退職し、紹介で建築事務所の社内SEとしてGSuiteの運用・管

WordPressからFirebase＋Nuxt.jsのHeadless CMSに完全移行するまでの記録 ①導入・技術選定 前置き 2019年4月現在、このブログはWordPressで開発・運用していますが、 それに伴って生じている様々な問題を解決するために、脱WordPressすることを決めました。 主な理由は４つ。 ①サイトの速度が明らかに遅いため、Lighthouseなどのスコアが上がらないのがSEO・利便性の両面で不利。jQueryやPHP・サーバー応答速度といったボトルネックは、WordPressを使っている限り解消することができない ②NetlifyやFirebaseなどの無料で使えるサービスが充実してきている中、レンタルサーバーを使っているのはコスパも悪い ③今後のことを考えると、記事データはMySQLではなくJSON形式の方がバックアップしやすく安全 ④Vue.js、CSS

経緯 私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます） 参加した勉強会 こちらの勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。 ハンズオンスライドがとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。 こういうの作るの大変だけど自分自身勉強になるんだよね。 おそらく、Googleが提供しているここのFirebaseWebCodelabのチュートリアルから翻訳とカスタマイズして作成したんだと思います。 完成イメージ こんなのが作成できます。Google認証も簡単に実装できちゃう。 アプリの構成 作成するチャットアプ

こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします

どうも、まさとらん（@0310lan）です！ 今回は、Googleが提供するバックエンドサービスのFirebaseを誰でも簡単に扱えるブログのCMSに変えてくれる便利なWebサービスをご紹介します！ 使い方によってはWordPressよりも簡単に記事コンテンツを管理できて、JavaScriptから自由に操作できる柔軟性も大きな魅力です。 なお、JavaScriptはpaizaラーニングの「JavaScript入門編」（完全無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 【 Flamelink 】 Firebaseとの連携を含めて、導入するための手順が少し多いのでこのあたりを中心に解説していきます！ ■「Flamelink」の使い方 まずは、「Flamelink」のトップページにアクセスして画面上部にあるボタンをクリックします。 「ユーザー登録フォーム」が表示されるの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、Togetter社長の@yositosiさんとひょんなことからお友達になり「なんかFirebase使って面白いことやろうよ」という話になったので一緒に面白いことをやりました。 この記事は、 Firebaseを使うと何ができるのか Nuxt.js/Vue.jsとFirebaseの勘所 Firestoreでの複雑なクエリ処理にどう対応するか などのトピックを中心に紹介していければと思っています。 なんとかPay Togetterの社長の@yositosiさんからFirebaseを使ったアプリ構築の話を頂きお手伝いさせていただいた、エイ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただ

この記事は、 ・実際に何か自分でウェブサービスを作って見たいけどどうすればいいかわからない。 ・Vue.jsを使って何か作って見たい という方向けの記事です。 なぜVue.jsとFirebaseでウェブサービスを作るのか 私は、何かウェブサービスを作って見たいと考えている人には、Vue.jsとFirebaseを利用したサービスの作成をオススメしています。 なぜなら、この二つを習得するとすごく簡単にウェブサービスを作ることができるからです！シンプルな理由ですし、これが一番大事ですよね。 私のブログには多くのプログラミング初心者やVue.jsを勉強している方が訪問してくださっています。 その方々の参考になるよう、自分の今までの学習した教材や内容を書き出し、本当に必要で、そして最短で技術を身に付けるにはどのような教材をどの順序でやるのが一番効果があるかを書き出しまとめました。 この教材にたどり着

絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか

はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ３期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと

Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02

はじめまして。DMM.comラボ エンターテインメント本部イベント開発部の上井（ウワイ）と申します。 インフラからフロントエンドまで幅広く担当しております。 今回は、業務で利用しているNuxt.jsとFirebaseを使って、SPA×SSR×PWA×サーバーレスのWebアプリケーションを構築する方法をご紹介いたします。

静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）でSPAを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと最近聞かれまして、その際の回答を技術書典の宣伝も兼ねてブログにしたためます。 今回は次の４つで比較しています。 GitHub Pages Firebase Hosting GitLab Pages Netlify 上記４つはどれも独自ドメインの設定とSSL対応が無料で行うことが出来ます。 ※比較的初心者に向けて書いている前提です。 AWS S3やGCP等の利用は初心者がいきなり設定を行うには項目が多いため除外しています。 レンタルサーバーも基本料金が発生し、スケール・管理し辛いため今回は除外しています。 また、少し機能について説明が必要な部分があるので、先に説明を書きます。 Rewrite設定について 静的サイト化したSPAを公

誰向けの内容か？ この記事は下記のような悩みがある方に向けた内容となっています。 もし該当するものがあれば、ぜひFirebaseを試してみてください。 「制作したポートフォリオをできるだけ簡単に公開したい」 「Vue.jsやReactを使ってWebサービスを作りたいけれど、バックエンドは苦手なので避けたい」 「フロントエンドの勉強で何か作りたいけれど、バックエンドの実装に時間を掛けたくない」 Firebaseのメリット Firebaseは”mBaaS”(mobile Backend as a Service)、または”BaaS”(Backend as a Service)と呼ばれるサービスです。 Backendとあるように、Firebaseはバックエンド（サーバサイド）の機能を提供しています。 Firebaseを使うと、バックエンド機能をある程度まかなうことができるようになります。 サーバ

※内容が古くなってしまったため、販売を終了します。 購入済の方への書籍内容のサポートは行いますので、別途ご連絡ください。 【累計800部を突破】 技術書典4新刊。 冊子版は当日完売、ダウンロード版と合わせて販売数800部を超えました！ありがとうございます。 本書は以下のような方をターゲットとして執筆しています。主に簡単なWebサイトを作った事があるWebフロントエンド初心者の方が、本書を通じてSPAの基本を掴み、簡単なWebサービスが作れるようになることを目的としております。そしてそれらを抑えた上でさらに次の段階へステップアップするための足がかりになるような要素を各所に入れております。 ・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人 ・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人 ・普段デザイナー

みなさんためしがき試してくれました!? ホント！？ありがとうございます！！！ tameshigaki.jp ためしがきって？ 知らない人もいると思いますので、簡単に説明しますね。 ためしがき - 日本語のフリーフォントを検索できるサイト こちらからサイトにアクセスして、お好きな文字・文章を入力していただくと、 こんな感じで、色んなフォントでの見た目をまとめて確認することが出来るサイトなのです。 サイトで使っているフォントは商用利用可能なフリーフォントとなっており、フォントをタップすると表示される画面から、配布先のサイトに遷移することが出来ます。 また、フォントをシェアするボタンを押してから、Twitterやfacebookでシェアすると みんなオラに力を〜！ 日本語のフリーフォントを好きな言葉・文章で試せるサイト | ためしがき https://t.co/ECvYEaVQQ9 #ためしがき