松井 貴史

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

松井 貴史

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

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

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

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

こんにちは！松井です。 昨年の7月から構想し開発を開始したサービスのリリースがようやく見えてきたので、この度テストユーザーを2０名ほど募集いたします！ MENTION（…

松井 貴史
松井 貴史
1か月前
3

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

こんにちは！福岡でデザインから開発までをおこなっている松井です。 これまで受託仕事に追われて自分のサービスが作れずにいたのですが、今年からはサービスを作っていく…

松井 貴史
松井 貴史
1年前
2

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

どうも松井です。 週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。 同じ関数や変数などを呼び出す場合、mixinを使えば、どのコンポーネント…

松井 貴史
松井 貴史
4年前
8

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

どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。 早速、本題に入っていきます。 前提条件の確認今回の前提条件は以下です…

松井 貴史
松井 貴史
4年前
3

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

どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。 データ量の小さなwebサービスを短期間でする場合には、Googleスプレッドシ…

松井 貴史
松井 貴史
4年前
2

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

こんにちは、松井です。 現在、タイムマネジメントツールを自作しており、月ごとに消化タスクを切り替える作業を行いました。 具体的な実装内容は、配列から条件に合うも…

松井 貴史
松井 貴史
4年前
7

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

どうも松井です。 前回に引き続き、Firebaseネタです。Firebaseをテストーサーバーとして利用をするため、basic認証をかける必要があったため、実装を行なっています。 F…

松井 貴史
松井 貴史
4年前
13

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

先日、テストサーバーとしてfirebaseを利用したので、その設定方法について纏めています。記事が長くならないように、前提としてfirebaseがどういったものなのか、わかって…

松井 貴史
松井 貴史
4年前
4

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

以前開発したサービスを修正しようとlocalhostを起動して、Twitterログインを設置していたボタンを押したところ、下記メッセージが出てしまいました。その時の対象方法を纏…

松井 貴史
松井 貴史
4年前
1

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

更新ボタンをタップ後に更新メッセージを表示したかったので実装しました。 表示したいvueファイルに記述するまずは、更新メッセージを表示したいファイルに以下を記述。…

松井 貴史
松井 貴史
4年前
1
松井 貴史

松井 貴史

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

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

こんにちは！松井です。

昨年の7月から構想し開発を開始したサービスのリリースがようやく見えてきたので、この度テストユーザーを2０名ほど募集いたします！

MENTION（メンション）とはMENTIONは「信頼できる仲間が見つかる」をコンセプトに、月額定額制で信頼できる仲間にビジネスパートナーとして活動をお願いしたり、仲間を助けるプレイヤーとしてお手伝したりできるサービスです。繋がった後も仲間の進

もっとみる
松井 貴史

松井 貴史

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

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

こんにちは！福岡でデザインから開発までをおこなっている松井です。

これまで受託仕事に追われて自分のサービスが作れずにいたのですが、今年からはサービスを作っていくぞ！と意気込み、第一弾となるオンラインで遊べるボードゲーム「SAKETUMA」をリリースしました！

今日はサービスの紹介とリリースするためにやったことを纏めました。同じように受託をしながら個人開発をしたい方の参考になれると嬉しいです！

もっとみる
松井 貴史

松井 貴史

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

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

どうも松井です。

週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。

同じ関数や変数などを呼び出す場合、mixinを使えば、どのコンポーネントでも「this.〜」の形で呼び出す事が可能です。

mixinsはカンタンに実装できますので安心して進めていきましょう。

では早速手順に入っていきます。

mixinsフォルダを作成
まずは、mixinsフォルダを作成して、

もっとみる
松井 貴史

松井 貴史

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

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

どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。

早速、本題に入っていきます。

前提条件の確認今回の前提条件は以下です。

・googleスプレドシートをDatabaseとして利用している

・vue.jsを使った実装を行っている

・時刻の文字列をフロント側で分割したい

・スプレッドシートからの取得は全て文字列になる

・スプレッドシートのAP

もっとみる
松井 貴史

松井 貴史

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

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

どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。

データ量の小さなwebサービスを短期間でする場合には、Googleスプレッドシート,GAS,vue.jsなどを組み合わせて実装すると良さそうです。

なので、DatabaseもGoogleスプレッドシートでまかなうとサクッと実装が楽になります。

手順1:SteinでGoogleスプレッドシートをAP

もっとみる
松井 貴史

松井 貴史

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

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

こんにちは、松井です。

現在、タイムマネジメントツールを自作しており、月ごとに消化タスクを切り替える作業を行いました。

具体的な実装内容は、配列から条件に合うものだけを表示するといった事を実装をしています。その内容について纏めていますので、ぜひ参考にしてください。

ゴール：先月、次月の切り替えに合わせた消化タスクDOMの表示例えば、今月が（2019/12）の場合。「>」クリックすると来月（2

もっとみる
松井 貴史

松井 貴史

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

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

どうも松井です。

前回に引き続き、Firebaseネタです。Firebaseをテストーサーバーとして利用をするため、basic認証をかける必要があったため、実装を行なっています。

Firebaseの設定までは前回の記事に書きましたので、初期設定は割愛します。

Firebaseの設定はコチラ。

1.firebase-toolsのインストールまずは、ターミナル上でfirebase-toolsを

もっとみる
松井 貴史

松井 貴史

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

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

先日、テストサーバーとしてfirebaseを利用したので、その設定方法について纏めています。記事が長くならないように、前提としてfirebaseがどういったものなのか、わかっている人向けです。firebaseとは？みたいな説明は、一旦飛ばします。

では早速始めます。

1.Node.jsをインストールする
まず、Node.jsをインストールしていない方は、下記サイトから「推奨版」を選択してダウン

もっとみる
松井 貴史

松井 貴史

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

ツイッターログインエラー時に[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><

もっとみる
松井 貴史

松井 貴史

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

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

更新ボタンをタップ後に更新メッセージを表示したかったので実装しました。

表示したいvueファイルに記述するまずは、更新メッセージを表示したいファイルに以下を記述。私の場合は、以下のディレクトリ構造。MainConatainer.vueファイルは、自分がメッセージを表示したいファイル内に記述してください。

src/resource/js/components/MainContainer.vue

もっとみる