松井 貴史

事業会社のパートナー。デジタル領域のUX・UI改善提案/webシステム開発/個人開発者…

松井 貴史

事業会社のパートナー。デジタル領域のUX・UI改善提案/webシステム開発/個人開発者。オンラインボードゲーム🍺SAKETUMA開発(http://saketuma.com)/福岡在住🍜 熊本出身🐻‍❄️

  • 福岡でサービスづくりに励むフリーランスの開発マガジン

    サービス開発の中で学んだプログラミング技術やサービスの学習日記。

信頼を軸としたフリーランス同士で協業マッチングできるサービス「MENTION(メンション)」のテストユーザーの募集を開始

こんにちは！松井です。 昨年の7月から構想し開発を開始したサービスのリリースがようやく見えてきたので、この度テストユーザーを2０名ほど募集いたします！ MENTION（メンション）とはMENTIONは「信頼できる仲間が見つかる」をコンセプトに、月額定額制で信頼できる仲間にビジネスパートナーとして活動をお願いしたり、仲間を助けるプレイヤーとしてお手伝したりできるサービスです。繋がった後も仲間の進捗・お金の管理までチーム活動に必要な機能をまるっと提供しています。 MENTI

松井 貴史

    • 個人開発！オンラインボードゲーム「SAKETUMA」をリリースするためにやったこと

      こんにちは！福岡でデザインから開発までをおこなっている松井です。 これまで受託仕事に追われて自分のサービスが作れずにいたのですが、今年からはサービスを作っていくぞ！と意気込み、第一弾となるオンラインで遊べるボードゲーム「SAKETUMA」をリリースしました！ 今日はサービスの紹介とリリースするためにやったことを纏めました。同じように受託をしながら個人開発をしたい方の参考になれると嬉しいです！ 🍺SAKETUMAとは？（サービス紹介）SAKETUMA(サケツマ)は、オンラ

      松井 貴史

      • ［vue.js］グローバルメソッドを使って、共通部分を表示させる方法

        どうも松井です。 週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。 同じ関数や変数などを呼び出す場合、mixinを使えば、どのコンポーネントでも「this.〜」の形で呼び出す事が可能です。 mixinsはカンタンに実装できますので安心して進めていきましょう。 では早速手順に入っていきます。 mixinsフォルダを作成 まずは、mixinsフォルダを作成して、その中に共通化するためのファイル(globalValiables.js)を作成し

        松井 貴史

        • 時刻(文字列)を分割して、フロント側で計算処理を行う。[vue.js]

          どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。 早速、本題に入っていきます。 前提条件の確認今回の前提条件は以下です。 ・googleスプレドシートをDatabaseとして利用している ・vue.jsを使った実装を行っている ・時刻の文字列をフロント側で分割したい ・スプレッドシートからの取得は全て文字列になる ・スプレッドシートのAPI化できている API化できてない場合は、前回書いたこちらの記事で実装できます

          松井 貴史

        信頼を軸としたフリーランス同士で協業マッチングできるサービス「MENTION(メンション)」のテストユーザーの募集を開始

        松井 貴史

        • 個人開発！オンラインボードゲーム「SAKETUMA」をリリースするためにやったこと

          松井 貴史

        • ［vue.js］グローバルメソッドを使って、共通部分を表示させる方法

          松井 貴史

        • 時刻(文字列)を分割して、フロント側で計算処理を行う。[vue.js]

          松井 貴史

        マガジン

        • 福岡でサービスづくりに励むフリーランスの開発マガジン
          8本

        記事

          Googleスプレッドシートを無料でAPI化して、vue.js側で表示する。

          どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。 データ量の小さなwebサービスを短期間でする場合には、Googleスプレッドシート,GAS,vue.jsなどを組み合わせて実装すると良さそうです。 なので、DatabaseもGoogleスプレッドシートでまかなうとサクッと実装が楽になります。 手順1:SteinでGoogleスプレッドシートをAPI化するGoogleスプレッドシートをapi化するには、僕は「Stein」という

          松井 貴史

          Googleスプレッドシートを無料でAPI化して、vue.js側で表示する。

          松井 貴史

          配列から条件に一致するものを表示(vue.jsでfilter()を使う)

          こんにちは、松井です。 現在、タイムマネジメントツールを自作しており、月ごとに消化タスクを切り替える作業を行いました。 具体的な実装内容は、配列から条件に合うものだけを表示するといった事を実装をしています。その内容について纏めていますので、ぜひ参考にしてください。 ゴール：先月、次月の切り替えに合わせた消化タスクDOMの表示例えば、今月が（2019/12）の場合。「>」クリックすると来月（2020/1）に、「＜」をクリックすると先月（20/19/11）に、月を切り替えた

          松井 貴史

          配列から条件に一致するものを表示(vue.jsでfilter()を使う)

          松井 貴史

          Firebaseでベーシック認証をかけるベストな方法

          どうも松井です。 前回に引き続き、Firebaseネタです。Firebaseをテストーサーバーとして利用をするため、basic認証をかける必要があったため、実装を行なっています。 Firebaseの設定までは前回の記事に書きましたので、初期設定は割愛します。 Firebaseの設定はコチラ。 1.firebase-toolsのインストールまずは、ターミナル上でfirebase-toolsをインストールします。 $ npm install -g firebase-to

          松井 貴史

          Firebaseでベーシック認証をかけるベストな方法

          松井 貴史

          WEBサイトを無料で公開できるFirebaseの設定方法

          先日、テストサーバーとしてfirebaseを利用したので、その設定方法について纏めています。記事が長くならないように、前提としてfirebaseがどういったものなのか、わかっている人向けです。firebaseとは？みたいな説明は、一旦飛ばします。 では早速始めます。 1.Node.jsをインストールする まず、Node.jsをインストールしていない方は、下記サイトから「推奨版」を選択してダウンロードします。 Node.jsインストール インストール後、きちんとインスト

          松井 貴史

          WEBサイトを無料で公開できるFirebaseの設定方法

          松井 貴史

          ツイッターログインエラー時に[Socialite Received HTTP status code [403] with message ]が出た場合の対処方法

          以前開発したサービスを修正しようとlocalhostを起動して、Twitterログインを設置していたボタンを押したところ、下記メッセージが出てしまいました。その時の対象方法を纏めています。 エラーメッセージ内容 Received HTTP status code [403] with message "<?xml version='1.0' encoding='UTF-8'?><errors><error code="415">Callback URL not approv

          松井 貴史

          ツイッターログインエラー時に[Socialite Received HTTP status code [403] with message ]が出た場合の対処方法

          松井 貴史

          Vue.jsで更新メッセージを表示させる。

          更新ボタンをタップ後に更新メッセージを表示したかったので実装しました。 表示したいvueファイルに記述するまずは、更新メッセージを表示したいファイルに以下を記述。私の場合は、以下のディレクトリ構造。MainConatainer.vueファイルは、自分がメッセージを表示したいファイル内に記述してください。 src/resource/js/components/MainContainer.vue <transition name="fade"> 　<div class="

          松井 貴史

          Vue.jsで更新メッセージを表示させる。

          松井 貴史