「連載」の記事 - Crieit

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class InputManager : MonoBehaviour
{
    /// 
    /// レイを描く距離
    /// 
    float DebugDrawRayDistance = 15.0f;

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        // マウス右ボタン　押しっぱなし時
        if (Input.GetMouseButton(0))
        {
            // レイ（見えない光線のようなもの）を飛ばす
            var ray = Camera.main.ScreenPointToRay(Input.mousePosition);

            if (Physics.Raycast(ray, out var hit))
            {
                // レイが当たったオブジェクト
                string goName = hit.collider.gameObject.name;
                Debug.Log("右クリック:" + goName);

                // そのオブジェクトの中心位置を、クリックした場所へ移動（カクカクした動き）
                GameObject.Find(goName).transform.position = new Vector3(hit.point.x, hit.point.y, 0);
            }
            else
            {
                Debug.Log("右クリック 外れ");
            }

            // レイを描く
            Debug.DrawRay(ray.origin, ray.direction * DebugDrawRayDistance, Color.green, 5, false);
        }
    }
}

「　👆　カクカクしてるが、とりあえず　これで　箱は動くぜ」

「　Update() じゃなくて、 LateUpdate() にすりゃいいんじゃないかだぜ？」

「　うまくやってくれだぜ」

まず、 PlayerPrefs を練習しようぜ？

「　👆　セーブボタンだけあっても練習できない。ロードボタンも追加するぜ」

SaveDataManager.cs :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SaveDataManager : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    // - イベントハンドラ

    public void OnSave()
    {
        Debug.Log("セーブします");

        var goCube = GameObject.Find("Cube");
        PlayerPrefs.SetFloat("x", goCube.transform.position.x);
        PlayerPrefs.SetFloat("y", goCube.transform.position.y);
        PlayerPrefs.SetFloat("z", goCube.transform.position.z);
    }

    public void OnLoad()
    {
        Debug.Log("ロードします");

        var goCube = GameObject.Find("Cube");
        var x = PlayerPrefs.GetFloat("x");
        var y = PlayerPrefs.GetFloat("y");
        var z = PlayerPrefs.GetFloat("z");
        goCube.transform.position = new Vector3(x, y, z);
    }
}

📺 開発中画面

📅 2023-03-12 sun 00:29

「　👆　これで　思ってるように　セーブとロードは　でけた」

「　バカでかい容量のセーブをしたいとき　こんなシンプルな構造で　対応しきれるのかだぜ？
クラスを　シリアライズ／デシリアライズ　して　投げ込めないの？」

「　String 型のセッターに　JSON を投げ込めだぜ」

「　そんなこと　していいのかな……」

まず、セーブ・スロットを３つにしようぜ？

「　セーブ・ファイルって　複数個　持ちたいよな」

「　自分用、弟用、クリアー・データ用よね」

📖 【Unity uGUI】ドロップダウン（Dropdown）を使用してオプションを選択する方法

「　👆　とりあえず　ドロップダウン　の作り方を調べるか」

「　👆　さて、何を　どうすればいいのか？」

「　UI は、スクリプトから　操作したいよな」

📖 【Unity】ドロップダウンの表示テキストを変える

「　👆　何かをやろうとしても、はて、と分からんことばっかりで　つらい。調べる」

📅 2023-03-12 sun 15:14

SaveDataManager.cs :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;

public class SaveDataManager : MonoBehaviour
{
    TMP_Dropdown dropdown;

    // Start is called before the first frame update
    void Start()
    {
        dropdown = GameObject.Find("Save Slot Dropdown").GetComponent();

        // ドロップダウンリストのラベル
        dropdown.options[0].text = "Save Data 1";
        dropdown.options[1].text = "Save Data 2";
        dropdown.options[2].text = "Save Data 3";

        // コンボボックスのラベル
        //
        // - 最初に選択されている項目に合わせないと挙動がおかしくなる
        dropdown.captionText.text = dropdown.options[0].text;
    }

    // Update is called once per frame
    void Update()
    {

    }

    // - フィールド

    string[] gameObjectNamesToSave = new string[]
    {
        "Red Cube",
        "Green Cube",
        "Blue Cube",
    };

    // - イベントハンドラ

    public void OnSave()
    {
        Debug.Log($"{(dropdown.value)}+1番へ、セーブしたい");

        foreach (var gameObjectName in gameObjectNamesToSave)
        {
            var gameObject = GameObject.Find(gameObjectName);
            // ゲームオブジェクトの名前には、いろんな文字が使えるので、区切りなるような文字がない。とりあえずドット区切りにする
            var nameSpace = $"Slot{dropdown.value}.{gameObjectName}";

            PlayerPrefs.SetFloat($"{nameSpace}.x", gameObject.transform.position.x);
            PlayerPrefs.SetFloat($"{nameSpace}.y", gameObject.transform.position.y);
            PlayerPrefs.SetFloat($"{nameSpace}.z", gameObject.transform.position.z);
        }
    }

    public void OnLoad()
    {
        Debug.Log($"{(dropdown.value)}+1番から、ロードしたい");

        foreach (var gameObjectName in gameObjectNamesToSave)
        {
            var gameObject = GameObject.Find(gameObjectName);
            // ゲームオブジェクトの名前には、いろんな文字が使えるので、区切りなるような文字がない。とりあえずドット区切りにする
            var nameSpace = $"Slot{dropdown.value}.{gameObjectName}";

            gameObject.transform.position = new Vector3(
                PlayerPrefs.GetFloat($"{nameSpace}.x"),
                PlayerPrefs.GetFloat($"{nameSpace}.y"),
                PlayerPrefs.GetFloat($"{nameSpace}.z"));
        }
    }
}

「　👆　よし、ドロップ・ダウン・リストの使い方を覚えたぜ」

「　やったぜ！」

「　やったわね！」

📅 2023-03-15 wed 19:18

「　次は、XML 形式で保存できるように改造しようぜ」

📖 【Unity】JsonUtilityを使ったJson化

「　👆　分からんことがいっぱいなので調べるぜ」

「　よし、簡単なとこだけ　つかんだので　そこだけやろ」

「　👆　階層構造はこうなるぜ。
関係あるところを見ていこう」

Assets.Scripts.Models.SaveData.GameObject.cs:

namespace Assets.Scripts.Models.SaveData
{
    using UnityEngine;

    /// 
    /// UnityのGameObjectをラッピング
    /// 
    [System.Serializable]
    public class GameObject
    {
        // -^ その他

        /// 
        /// 生成
        /// 
        /// 
        /// 
        internal static GameObject FromGameObject(UnityEngine.GameObject gameObject)
        {
            return new GameObject
            {
                name = gameObject.name,
                x = gameObject.transform.position.x,
                y = gameObject.transform.position.y,
                z = gameObject.transform.position.z
            };
        }

        // - フィールド

        public string name;
        public float x;
        public float y;
        public float z;

        // - メソッド

        internal Vector3 ToPosition()
        {
            return new Vector3(this.x, this.y, this.z);
        }
    }
}

「　👆　GameObject と同名で、保存したいところだけ作ったクラスを用意するぜ。
クラス名の上の行に [System.Serializable] が付いているのを忘れるなだぜ」

Assets.Scripts.Models.SaveData.Init.cs:

namespace Assets.Scripts.Models.SaveData
{
    using System.Collections.Generic;
    using ModelOfSaveData = Assets.Scripts.Models.SaveData;

    /// 
    /// セーブ・データ
    /// 
    public class Init
    {
        // - その他

        internal Init()
        {
            this.gameObjects = new List();
        }

        // - フィールド

        // JsonUtilクラスは、Dictionary型には対応していない
        public List gameObjects;

        // - メソッド

        /// 
        /// ゲームオブジェクトの追加
        /// 
        /// 
        public void AddGameObject(ModelOfSaveData.GameObject item)
        {
            this.gameObjects.Add(item);
        }
    }
}

「　👆　SaveData.Init クラスが、セーブデータ・クラス階層構造のトップ・レベルのクラスだぜ。
セーブスロット１個分のデータが全部入ってると思えだぜ」

Assets.Scripts.SaveDataManager.cs:

using TMPro;
using UnityEngine;
using ModelOfSaveData = Assets.Scripts.Models.SaveData;

public class SaveDataManager : MonoBehaviour
{
    TMP_Dropdown dropdown;

    // Start is called before the first frame update
    void Start()
    {
        dropdown = GameObject.Find("Save Slot Dropdown").GetComponent();

        // ドロップダウンリストのラベル
        dropdown.options[0].text = "Save Data 1";
        dropdown.options[1].text = "Save Data 2";
        dropdown.options[2].text = "Save Data 3";

        // コンボボックスのラベル
        //
        // - 最初に選択されている項目に合わせないと挙動がおかしくなる
        dropdown.captionText.text = dropdown.options[0].text;
    }

    // Update is called once per frame
    void Update()
    {

    }

    // - フィールド

    string[] gameObjectNamesToSave = new string[]
    {
        "Red Cube",
        "Green Cube",
        "Blue Cube",
    };

    // - イベントハンドラ

    public void OnSave()
    {
        // セーブデータ・モデルの作成
        var saveDataModel = new ModelOfSaveData.Init();

        // 記憶したいゲームオブジェクトを格納
        foreach (var gameObjectName in gameObjectNamesToSave)
        {
            var gameObject = GameObject.Find(gameObjectName);
            var gameObject2 = ModelOfSaveData.GameObject.FromGameObject(gameObject);
            saveDataModel.AddGameObject(gameObject2);
        }

        // JSON文字列化（シリアライズ）
        var jsonText = JsonUtility.ToJson(saveDataModel);

        // 保存
        Debug.Log($"{(dropdown.value)}+1番へ、セーブしたい。 Json:{jsonText}");
        PlayerPrefs.SetString($"Slot{dropdown.value}", jsonText);
    }

    public void OnLoad()
    {
        // 読取（JSONテキスト取得）
        var jsonText = PlayerPrefs.GetString($"Slot{dropdown.value}");
        Debug.Log($"{(dropdown.value)}+1番から、ロードしたい。 Json:{jsonText}");

        // セーブデータ・モデルへ復元
        var saveDataModel2 = JsonUtility.FromJson(jsonText);
        if (saveDataModel2==null)
        {
            // 復元できません
            Debug.Log($"{(dropdown.value)}+1番 ロードできませんでした。 Json:{jsonText}");
            return;
        }

        // 記憶されているゲームオブジェクトを取出し
        foreach (var gameObject2 in saveDataModel2.gameObjects)
        {
            var gameObject = GameObject.Find(gameObject2.name);
            gameObject.transform.position = gameObject2.ToPosition();
        }
    }
}

「　👆　セーブデータを読み書きするクラスだぜ」

「　これで　ゲームをセーブできるな」

WebGL

「　WebGL 形式で出力して、ブラウザで動かしても　セーブ／ロード　できんの？」

「　👆　よっしゃ、実験してみるかだぜ」

「　👆　できたり、できなかったりするな、ちょっと　調べるか」

「　気になったのは、 デバッグ・ログ そのまんま出てくるのか　整えないと　カッコ悪いな」

📅 2023-03-15 wed 22:38

「　👆　よし、動いていることもあるし　完成とするかだぜ」

「　わらう」

「　Unity のサイトにアップロードしましょう！」

Unity Play

📖 Unity Play

「　👆　アップロード後に　ゲーム画面上の×ボタンを押して　ブラウザの戻るボタンを押したら
画面が真っ白になった！」

「　一度　間違った操作を行うと　続けて　間違った操作を行ってしまう。
わらう」

「　何もできん」

「　今日は終わりかしらねえ」

📺 Save Data Practice

📅 2023-03-15 wed 23:41

「　👆　１時間放置したら　アクセスできるようになった。アップロードした。
もう終わり！」

＜おわり＞

01.人間がAIに支配される未来が来る？

2020-04-03T19:27:48+09:00

※こちらは「ひとりぼっちPython」連載記事です。連載一覧はコチラ

はじめに

今回は「人工知能」「AI」について触れてみます。

（本記事は概念やイメージを掴むための入門向けのお話のため、Pythonのコードや技術的な内容はありませんのでご了承ください…！）
　
　
人工知能とかAI、この数年くらいで急によく聞くようになったワードかなと思います。どんどん新製品や新サービスが出てきたりニュースにも登場したりしていて、進歩が激しい分野なんだなっていうのがわかります。

僕も普段家でAmazonでのネットショッピングやGoogleスマートスピーカーを使うことが多いのですが、これらもAIが活用されているのですよね。
知らず知らずのうちにAIの便利な機能を使っていたり、AIによってオススメ商品を買わされていたりします（クレカの請求が怖い）。

そんな感じで身近なところでも使われていて、とにかく頻繁に人工知能やAIという言葉は聞くけれど、じゃあ

「AIってズバリ、何？」

という単純で素朴な質問に対して、明快に答えられないな…と思ったのです。

「うーん、なんか良くわからないけど、色々できてしまうスゴイやつ…？」

僕の語彙力の引き出しを全力で引っ張ってみても、そんな程度の回答で悲しくなりました…。

皆さんはどう答えますかね？

いろんな観点がありそうですが、自分なりの解答を得たいと思い、人工知能・AIの入り口を紐解いてみます。

AIと聞いて抱くイメージ

「AIって何？」っていう直接的な疑問は一旦置いておいて、まずはAIと聞いてどんなイメージを思い浮かべるでしょうか？

便利ロボット？学習して成長していくやつ？
人間より上位の存在？下位の存在？
ポジティブな印象？ネガティブな印象？

なんとなく僕は、人類が支配されてしまいそうな怖いイメージを持っています。AIが人類を支配するというよりは、AIを活用して色々やっている上位の人達が大規模にデータを集めていて、僕たち下々の人間は知らないうちに彼らに支配されてゆく…そんなイメージです（ネガティブ思考全開）。

身近には便利になっている気がするけど、実はそれは甘い汁を吸わされているんじゃないか…と、考えすぎると疑心暗鬼の闇に沈んでしまうので、あまり考えないようにして生活しています。
　
　
「シンギュラリティ」 という言葉があります。

想像上の未来のお話で、 「AIなどの技術が、自ら人間より賢い知能を生み出すことが可能になる時点」 を指す言葉のようです。
人工知能が進歩しすぎて人間の能力を超えてしまう時、と考えるとわかりやすいかもしれないです。
そんな時代がいつしか来る、と言われています。

「自分で考えて仕事ができるAIロボットに僕らの仕事が奪われるんじゃないか」

とか、そんな言葉も聞きますよね。

その真偽は僕ら常人に想像がつかない範囲だと思います。
まだ見ぬ未来に不安を覚えるより、今存在している現実的なAIについて考えてみることで、僕らの生活を便利で豊かなものにしてくれるAIさんに寄り添ってみることにします。
そうすることで、仮にそんなファンタジーな世界が訪れた時でも対策ぐらいは立てられそうですよね。

想像上のAIと現実的なAI

どこかの偉い人が定義した「強いAI」と「弱いAI」という言葉があります。
「AI・人工知能」という大きなくくりの中には２種類があって、それらを分けている分類です。

まず 「強いAI」 とは「汎用人工知能」とも呼ばれて、 「自意識を持った人間同様の知能を持つ存在」 を指す言葉のようです。
つまり、人間のように自ら考えて、行動することができるAIのこと。よくターミネーターといった例えが登場します。ドラえもんもこの分類に入るのでしょうか。
こちらは今は想像上の存在で、本当にこのようなAIができるかどうかもよくわかりません。
上のシンギュラリティは、このような人間以上の知性を持った「強いAI」が登場した世界、と置き換えるとわかりやすいのかなと思います。

一方で 「弱いAI」 とはもっと現実的かつ実用的なもので、 「特定の機能に特化したAI」 のことを指します。
人間の機能の一部分のみにフォーカスして、その処理をすることに特化したもの、と考えて良いかなと思います。

そんな訳で、今はまだ全知全能な「強いAI」が存在しない（できるかもわからない）現状、僕らが普段関係しているのはこの「弱いAI」に分類されているもの、と考えて良さそうですね。

（強い・弱いという区別も素人目からしたら何か違和感があるなと思ってしまうのですが、この辺りは色々議論されている部分でもあるようですね）

どんなAIが今は実用化されているだろうか

そんなこんなで漠然としたイメージだけ抱いてネガティブ思考に堕ちていても仕方がないので、もうちょっと地に足をつけて考えてみます。
まずは具体的に、実用化されているAIとして思いつくものを挙げてみました。

将棋や囲碁のプロ棋士に勝てる人工知能
ペッパー君に代表されるAIロボット
AIによって無人でチャット対応ができる、企業のカスタマーサポート
スマートスピーカーに使われている音声アシストなど。声を認識してインターネットを介して調べ物やお店の予約、買い物など秘書的な活躍をしてくれる
Web広告やネットショッピングでオススメ商品を提供してくれる

他にもたくさんあると思うんですが、何か思い着くのはありますかね？
　
　
自動運転技術なんかも今は研究が進んでいますよね。
聞くところによると、海外のUber社は今はタクシーのシェアリングサービスですが、それによって人間様の行動のデータを集めて自動運転のための情報を集めている…だとか（正確な情報かは知りません）。

余談ですが、Uberは僕もアメリカに行った時に乗ってみました。すごく便利ですねあれ。
クレジットカードを登録しておくことで現金での支払いは不要。タクシーに乗りたい時にスマホアプリで予約すると、ほんの数分でお迎えが来てアプリに通知が入ります。
僕が経験したのは、本当は自分が乗るはずじゃないタクシーに載っちゃって途中で間違いに気づいた運転手さんにその場で放り出されたり、
町を案内してくれた友人がUber運転手をやっていて突然「ちょっと１時間稼いでくる」と出て行って数時間戻ってこなかったり、
おそらくUber社は、そんな人間らしさをデータとして集めて心温まるAIを作ろうとしているのでしょう…。

余談でした。

AIは何でも出来る訳じゃない？

先ほど挙げたものはどれも、その特定の分野では優れているのですが、実は万能なものではありません。
例えば将棋や囲碁が強い人工知能は人生ゲームやモノポリーでは勝てないし、例えば洋服屋のカスタマーサポートのチャットボットが急に自動車業界に部署異動させられてしまったら、お客さんがマフラーの交換の見積もりを尋ねた時になんか上司に怒られる事態が発生してしまいそうです。

このように、 現実的なAIとは「何か特定の機能・分野に特化したもの」 であり、 AIにも「出来ること」と「出来ないこと」がある 訳です。

人間で考えても、誰しも得意不得意ってありますよね。
それがAIだと極端になっていて、得意なものはとことん得意だけど、自分の習熟していない分野になるとからっきしダメになってしまうのです。

AIではその得意不得意が特にデータに依存してきます。
基本的に積み重ねられた文字や画像などのデータを学習することで識別したり分析したりしていて、それも学習のためには大量のデータが必要になってくるのです。
特定の分野に強いAIは、その分野について大量のデータをもとに学習しているのです（詳細は省きますが「強化学習」とか必ずしもそうじゃないようですが）。

Amazonや楽天市場は大量のお客さんがいて大量の購入履歴があるため、「◯◯代の✖︎✖︎県在住の男性。こういう商品をよく買っているので、こんなのをお勧めしたら買ってくれるかも」とピンポイントで商品を勧める（レコメンドする）ことができるのですが、

それを一個人が販売システムから作ったとしても、お客さんが少ないので学習するデータが少なく、その人が買わなさそうなトンチンカンな商品を勧めてしまったりするのです。

…それはそれで作ってみたい。
（絶対その人が興味なさそうな本とか音楽、動画を勧めてくるサービスが１つくらいあってもいい）

一例としてデータの必要性を挙げましたが、まだまだ今のAIの制約はたくさんありそうです。
この辺り、もうちょっと具体的に紐解いてみたいのですが今回はこの辺までとして、次回は「AIに出来ること・出来ないこと」あたりにフォーカスしてまとめてみたいなって思います。

今回はおしまい。

今回のまとめ

「AIって何？」という疑問に対しての明確な答えにまでは辿り着くことができませんでしたが、
ひとまずのところ「万能でなんでもできるもの」ではなくて「人間の機能の一部分を代替してくれるもの」と考えることができそうですね。

用語

人工知能（AI）
シンギュラリティ
「強いAI」と「弱いAI」

参考

絵でわかる人工知能明日使いたくなるキーワード68 (サイエンス・アイ新書) | 三宅陽一郎, 森川幸人, 森川幸人 |本 | 通販 | Amazon

人工知能解体新書ゼロからわかる人工知能のしくみと活用 (サイエンス・アイ新書) | 神崎洋治 |本 | 通販 | Amazon

序章「ひとりぼっちPython」

2020-03-27T21:45:06+09:00

雑記

巷で話題のPython。
言語別エンジニアの年収グラフでは１位を獲得しており（どっかで見た気がする）、近年話題の飛び交う「機械学習」「AI」「ブロックチェーン」にもよく活用されている言語ということで、とても人気なのが伺えます。
寝る前のお供に時々「日経ソフトウェア」という雑誌を購入しているのですが、ここ最近の表紙を見るとほとんどPythonという文字で埋め尽くされています。

ただ、その人気の裏側というか、実際にどうなのかというのがわからないのが正直なところです。安易に個人で初心者が手を出して痛い目を見るんじゃないのかなあとか。正直ちょっとPythonって敷居が高い印象があります（言語的には比較的取り組みやすそう？）。

で、まあ好奇心に負けて（？）Pythonに少し取り組んでみた訳です。いろんな言語に取り組むのはベストプラクティスでないと怒られそうですが、都合の悪いことは聞かないこととします!!!!!

実際に「機械学習」の基礎の基礎みたいな部分をUdemyで学習してみました。回帰分析を学んでみたのですが、やっぱり面白いのですね。
もともと数学的な分野は好きな部類なので、もうちょっと勉強してみたいなって思いました。

そんなこんなで 「ノンプログラマ」で本業の傍ら趣味と実益を兼ねて学習をしながら「ひとり開発」に取り組んでいる人間 が、Pythonについて取り組んでみたことや興味のあるトピックについて 知識を広げてみたいと思っているのがこの連載です。

この連載で取り上げたいこと

（１）Pythonでどんなツールが作れるの？どんな身近な課題が解決できるの？
（２）Pythonといえばよく聞く、機械学習・AI・IoT・ブロックチェーンなどの現代の気になるワードについて
（３）個人レベルでどうこれらに取り組める？

これらについて調べたこと、考えたこと、実際に取り組んでみたことを取り上げてトピックにしてみたいなーって。

この連載の目標

pythonに限らずプログラミング自体そうなんですが

「なんとなくできるとカッコいい！」
「とにかくPCに触れているのが好き！」

というだけで学習を続けるのも限界があります。

２０代で若ければそれで技術をつけて就職！転職！というストーリーは全然ありで良いのかもしれないのですが、３０代に入ってある程度人生が固まってきている自分自身の現状、漫然とやっても限界があるしなあ。と、そんな思いがどうしても出てきてしまいます。

好きでやる、だけじゃ続けられない。
やるからには何か意義のあることをしたいな、って思う訳です。

そうなると大事なのは「出口」かなって思っています。
「Pythonに取り組むことで何ができるんだろう？」
「どんな身近な課題が解決できるようになるのだろう？」

そういうのを模索する過程で、世の中のニュースやよく知らない技術についてもっと理解しつつ、実際に意義のあるものを作れるようになろう、と取り組んでみるのがこの連載の目標です。

読んでくれた方と一緒に勉強していくような、そんな感じを目指しています。

…と、何かちゃんとしたことを言ってしまったのですが
企画倒れになる気がするのでまあ気ままにやりましょう…。

のんびりアルジェブラをやろうぜ☆（＾～＾）＜その４＞

2019-06-29T22:19:48+09:00

＜前回の続き＞

またまたまた次の日

「　ほんとは　１０２４０進数　があると　見やすいと思うんだが、
そんな進数変換プログラムを書こうと思うと　数年間　休みが欲しいぐらいなんで　省く☆」

2^10 * 10 = 10240

「　どんどん省いていこう☆」

「　話が脱線しているけど、家屋を退き倒したところが　道よね」

「　きふわらべの質問は、九九の対角線の１桁目は　なぜ　ラウンド・トリップ（往復）
しているのか？　だった☆」

「　それだけじゃないけどな☆」

「　わたしの回答は　カンタンなものだが、説明がいる☆」

「　ｎの２乗　１、４、９、１６、……というやつは　どんどん大きくなっていき、
それが１０個のなんとか倍　続いたときに　１０進数というのは
１０のｎ乗というやつで　１０、１００、１０００、……と　速く大きくなっていって、
増え方の速さの噛み合わせが　ラウンド・トリップするグループに　あるからだぜ☆」

「　お父んの　しゃべりが下手くそで　さっぱり分からん☆」

「　緑のたぬき　でか盛り　できたわよ！」

「　例えば　白玉と　赤玉　が交互に並んでるとするだろ☆」

「　２個ずつ　おまとめ　すれば……☆」

「　紅白饅頭が５箱できる☆」

「　３個ずつ　おまとめ　すれば……☆」

「　セットが　２パターンになるな☆」

「　このような　数の　模様　のようなものを見ているだけで、数に違いはない☆
しかし　こんな　ざっくりした説明で　満足できるわたしたちでは　ないだろう☆」

「　満足した☆　もう寝ろ☆」

「　お湯を入れた　緑のたぬき　でか盛り　の麺が伸びてるんだけど！
食べないの？」

（ずるるる……☆）

「　伸びてるのに……☆」

「　少しずつ　数の仕組みを見ていこうぜ☆
記事が　＜その４＞　になったせいで、気にくわないが　再掲する☆」

        10進数   80進数   80進数10進表記       x^2   xa   ax  a^2
        ------  ------  ------------    ---------------------
  0^2 =      0       0  [  ][  ][ 0]    [    ][   ][   ][  0]
  1^2 =      1       1  [  ][  ][ 1]    [    ][   ][   ][  1]
  2^2 =      4       4  [  ][  ][ 4]    [    ][   ][   ][  4]
  3^2 =      9       9  [  ][  ][ 9]    [    ][   ][   ][  9]
  4^2 =     16       g  [  ][  ][16]    [    ][   ][   ][ 16]
  5^2 =     25       p  [  ][  ][25]    [    ][   ][   ][ 25]
  6^2 =     36       A  [  ][  ][36]    [    ][   ][   ][ 36]
  7^2 =     49       N  [  ][  ][49]    [    ][   ][   ][ 49]
  8^2 =     64       #  [  ][  ][64]    [    ][   ][   ][ 64]
  9^2 =     81      11  [  ][ 1][ 1]    [    ][   ][   ][ 81]
 10^2 =    100      1k  [  ][ 1][20]    [ 100][   ][   ][  0]
 11^2 =    121      1F  [  ][ 1][41]    [ 100][ 10][ 10][  1]
 12^2 =    144      1#  [  ][ 1][64]    [ 100][ 20][ 20][  4]
 13^2 =    169      29  [  ][ 2][ 9]    [ 100][ 30][ 30][  9]
 14^2 =    196      2A  [  ][ 2][36]    [ 100][ 40][ 40][ 16]
 15^2 =    225      2$  [  ][ 2][65]    [ 100][ 50][ 50][ 25]
 16^2 =    256      3g  [  ][ 3][16]    [ 100][ 60][ 60][ 36]
 17^2 =    289      3N  [  ][ 3][49]    [ 100][ 70][ 70][ 49]
 18^2 =    324      44  [  ][ 4][ 4]    [ 100][ 80][ 80][ 64]
 19^2 =    361      4F  [  ][ 4][41]    [ 100][ 90][ 90][ 81]
 20^2 =    400      50  [  ][ 5][ 0]    [ 400][   ][   ][  0]
 21^2 =    441      5F  [  ][ 5][41]    [ 400][ 20][ 20][  1]
 22^2 =    484      64  [  ][ 6][ 4]    [ 400][ 40][ 40][  4]
 23^2 =    529      6N  [  ][ 6][49]    [ 400][ 60][ 60][  9]
 24^2 =    576      7g  [  ][ 7][16]    [ 400][ 80][ 80][ 16]
 25^2 =    625      7$  [  ][ 7][65]    [ 400][100][100][ 25]
 26^2 =    676      8A  [  ][ 8][36]    [ 400][120][120][ 36]
 27^2 =    729      99  [  ][ 9][ 9]    [ 400][140][140][ 49]
 28^2 =    784      9#  [  ][ 9][64]    [ 400][160][160][ 64]
 29^2 =    841      aF  [  ][10][41]    [ 400][180][180][ 81]
 30^2 =    900      bk  [  ][11][20]    [ 900][   ][   ][  0]
 31^2 =    961      c1  [  ][12][ 1]    [ 900][ 30][ 30][  1]
 32^2 =   1024      c#  [  ][12][64]    [ 900][ 60][ 60][  4]
 33^2 =   1089      dN  [  ][13][49]    [ 900][ 90][ 90][  9]
 34^2 =   1156      eA  [  ][14][36]    [ 900][120][120][ 16]
 35^2 =   1225      fp  [  ][15][25]    [ 900][150][150][ 25]
 36^2 =   1296      gg  [  ][16][16]    [ 900][180][180][ 36]
 37^2 =   1369      h9  [  ][17][ 9]    [ 900][210][210][ 49]
 38^2 =   1444      i4  [  ][18][ 4]    [ 900][240][240][ 64]
 39^2 =   1521      j1  [  ][19][ 1]    [ 900][270][270][ 81]
 40^2 =   1600      k0  [  ][20][ 0]    [1600][   ][   ][  0]

（ずるる……☆）

「　わたしが　緑のたぬき　を食べ終わるまで　上の表でも　眺めておいてくれだぜ☆」

（ずるる……☆）

「　８０進数って　何なのよ！」

「　１０進数の　ノッテイションを変えただけだぜ☆
左の箱は要らなかったか☆　真ん中の箱に８０を、右の箱に１を掛けて足せだぜ☆」

「　ｎの２乗を　何進数　で書いても　１桁目がラウンド・トリップして見えるが、
数自体は　ただ増えてるだけ　というのが　感じられたかだぜ☆」

「　これは　波の見え方　のようなものだと感じられてきただろうか☆」

「　もう寝なさい！」

まーたまたまーたまた次の日

「　波を説明するために道具がいるだろ☆　道具を説明する☆　のんびり行こう☆」

「　これデカルト座標☆
ルネ・デカルトが　デカルト座標を使っているところを知らないが　その業績の大きさから
みんなのよく使う直交座標に　デカルトの名前を残している☆」

「　何が　デカルト　っぽいかと言うと、
ｘアクシズと　ｙアクシズが　直角に交わっていることを　デカルトっぽいと言っている☆」

「　次に　ポラー☆　極座標だぜ☆
ｘアクシズの代わりに　アングル　だな☆」

「　デカルト座標に比べて４倍ぐらいでかくなるので
ブログで描くには　でかすぎる　かわいいやつだぜ☆（＊＾～＾＊）」

「　ポラーは　横が　ひとかたまり　しかなくて　隣がないことと、
タテが０のとき　アングルがなくなってしまうことに　注意してくれだぜ☆」

「　じゃあ　まず　ｘ＝１，ｙ＝１　のところに　赤い箱を置くぜ☆」

「　あんまり　でかい画像を　連続して貼り付けると　追い出されるぜ☆？」

「　１分経つごとに　隣に　赤い箱がコピーされると思ってくれだぜ☆
１０分経つと　デカルト座標では　水平な直線、
ポラーでは　円になるな☆」

「　物理は　さっぱり知らないが、これを　等速直線運動、
タテ幅は　速度で　１、
コピーしたとき箱はタテに増減してないので　加速度は　０、
箱を全部足して　１０　になったこれを　移動した距離　だと思ってくれだぜ☆」

またまーたまた次の日

「　計算サイトを使って　資料を作っていたんだが、数が　まるまっている　ことに気づいて　おじゃんになった……☆」

「　それを資料ではなく、ゴミという☆　捨てろだぜ☆」

「　累乗を計算できるプログラムを自作するかだぜ☆？」

「　自作せず、Python 3 を使えだぜ☆」

「　…………☆」

＜書きかけ＞

【WPF】PostgreSQL に接続してデータを操作（登録、更新、削除）してみる

2019-06-26T09:51:09+09:00

おはようございます。

前回に引き続き PostgreSQL を使って、登録、更新、削除をしてみたいと思います。

前回の記事はこちら。
【WPF】PostgreSQL に接続してデータを取得して表示する

プログラムの修正

追加処理の修正

MainWindow.xaml.cs

        /// 
        /// 追加ボタンクリックイベント
        /// 
        /// 
        /// 
        private void add_button_Click(object sender, RoutedEventArgs e)
        {
            logger.Info("追加ボタンクリック");

            // データを追加する
            // PgDbContext に変更
            //using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))
            using (var context = new PgDbContext())
            {
                // データ作成
                // テーブルはコンテキスト経由でアクセスする
                //var table = context.GetTable();
                Cat cat = new Cat();
                cat.No = 5;
                cat.No = 5;
                cat.Name = "こなつ";
                cat.Sex = "♀";
                cat.Age = 7;
                cat.Kind = "01";
                cat.Favorite = "布団";
                // データ追加
                // コンテキスト経由でエンティティを追加
                //table.InsertOnSubmit(cat);
                context.Cats.Add(cat);
                // DBの変更を確定
                // メソッド変更
                //context.SubmitChanges();
                context.SaveChanges();
            }

            // データ再検索
            searchData();
            MessageBox.Show("データを追加しました。");
        }

更新処理

MainWindow.xaml.cs

        /// 
        /// 更新ボタンクリックイベント
        /// 
        /// 
        /// 
        private void upd_button_Click(object sender, RoutedEventArgs e)
        {
            logger.Info("更新ボタンクリック");

            // 選択チェック
            if (this.dataGrid.SelectedItem == null)
            {
                MessageBox.Show("更新対象を選択してください。");
                return;
            }

            // データを更新する
            // PgDbContext に変更
            //using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))
            using (var context = new PgDbContext())
            {
                // 対象のテーブルオブジェクトを取得
                // テーブルはコンテキスト経由でアクセスする
                //var table = context.GetTable();
                var table = context.Cats;
                // 選択されているデータを取得
                Cat cat = this.dataGrid.SelectedItem as Cat;
                // テーブルから対象のデータを取得
                var target = table.Single(x => x.No == cat.No);
                // データ変更
                target.Favorite = "高いところ";
                // DBの変更を確定
                // メソッド変更
                //context.SubmitChanges();                
                context.SaveChanges();
            }

            // データ再検索
            searchData();

            MessageBox.Show("データを更新しました。");
        }

削除処理

MainWindow.xaml.cs

        /// 
        /// 削除ボタンクリックイベント
        /// 
        /// 
        /// 
        private void del_button_Click(object sender, RoutedEventArgs e)
        {
            logger.Info("追加ボタンクリック");

            // 選択チェック
            if (this.dataGrid.SelectedItem == null)
            {
                MessageBox.Show("削除対象を選択してください。");
                return;
            }

            // データを削除する
            // PgDbContext に変更
            //using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))
            using (var context = new PgDbContext())
            {
                // 対象のテーブルオブジェクトを取得
                // テーブルはコンテキスト経由でアクセスする
                //var table = context.GetTable();
                var table = context.Cats;
                // 選択されているデータを取得
                Cat cat = this.dataGrid.SelectedItem as Cat;
                // テーブルから対象のデータを取得
                var target = table.Single(x => x.No == cat.No);
                // データ削除
                // メソッド変更
                //table.DeleteOnSubmit(target);
                table.Remove(target);
                // DBの変更を確定
                context.SaveChanges();
            }

            // データ再検索
            searchData();
            MessageBox.Show("データを削除しました。");
        }

まとめ

サクッとした記事になりましたが、ひとまず PostgreSQL はここまでとして次回は Oracle を試してみたいと思います。

ソースはこちら

GitHub

ではでは。

【WPF】PostgreSQL に接続してデータを取得して表示する

2019-06-25T10:05:02+09:00

おはようございます。

今回は、PostgreSQLを使ってデータを検索、データグリッドに表示してみます。
お決まりですが、プログラムは前回までのものを流用します。

【WPF】ProgressRingを使って時間のかかる処理を分かりやすくする

また、PostgreSQLをインストールしていない場合は次の記事を参照して、パソコンにインストールしてください。

PostgreSQL 9.6.3 をインストールしてテーブルを作成する

Nuget でパッケージをダウンロード

ソリューションエクスプローラーからプロジェクトを選択、右クリックし
「Nuget パッケージの管理」を選択

Nuget パッケージ管理画面が表示されるので、
検索窓に「Npgsql 6」を入力し、「EntityFramework6.Npgsql」を選択、
インストールボタンをクリックします。

プレビュー画面が表示される場合は「OK」ボタンをクリックします。

出力ビューに「終了」が表示されれば完了です。

スキーマの作成

PostgreSQL ではスキーマ単位の管理をしておかないと困ることになります。

スキーマ指定しないでテーブル作成すると「public」スキーマに作成されるのですが、
C#からの接続時には必ず（やってみた限りでは）スキーマ指定しないといけないので、まずはスキーマを作成しておきます。

CREATE SCHEMA dora;

テーブルの作成

作成したスキーマににテーブルを作成
SQLite の時と同じテーブル、データを用意します。

このとき、テーブル名やカラム名は小文字にしておくこと。

CREATE TABLE IF NOT EXISTS dora.mstkind (
        kind_cd CHAR(2) NOT NULL
        , kind_name VARCHAR(20)
        , primary key (kind_cd)
);


CREATE TABLE IF NOT EXISTS dora.tblcat (
        no INTEGER NOT NULL
        , name VARCHAR(20) NOT NULL
        , sex CHAR(3) NOT NULL
        , age INTEGER DEFAULT 0 NOT NULL
        , kind_cd CHAR(2) DEFAULT '00' NOT NULL
        , favorite VARCHAR(40)
        , PRIMARY KEY (no)
);

INSERT INTO DORA.MSTKIND VALUES ('01', 'キジトラ');
INSERT INTO DORA.MSTKIND VALUES ('02', '長毛種（不明）');
INSERT INTO DORA.MSTKIND VALUES ('03', 'ミケ（っぽい）');
INSERT INTO DORA.MSTKIND VALUES ('04', 'サビ');
INSERT INTO DORA.MSTKIND VALUES ('09', 'その他');
INSERT INTO DORA.TBLCAT VALUES('1','そら','♂','6','01','犬の人形');
INSERT INTO DORA.TBLCAT VALUES('2','りく','♂','5','02','人間');
INSERT INTO DORA.TBLCAT VALUES('3','うみ','♀','4','03','高級ウェットフード');
INSERT INTO DORA.TBLCAT VALUES('4','こうめ','♀','2','04','横取りフード');

設定ファイルの修正

次のようにします。
重要な部分は、「entityFramework」タグと「system.data」タグ。

App.config

プログラム修正

新規クラスの追加

DbContextを継承したクラスを作成します。
このクラスでデータベースへの接続、Entityへのマッピングなどを行います。
デフォルトのスキーマを変更する場合、「OnModelCreating」メソッドにて設定可能です。

PgDbContext.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.Data.Entity;
using Npgsql;

namespace WpfApp1
{
    class PgDbContext : DbContext
    {
        private const string ConnectionString = "Server=localhost;User ID=USER01;Password=USER01;Database=DB01;port=5432";

        // コンストラクタにて接続文字列を設定
        public PgDbContext() : base(new NpgsqlConnection(ConnectionString), true) { }

        public DbSet Kinds { get; set; }
        public DbSet Cats { get; set; }

        // スキーマを変更する場合にはここに設定
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            //Configure default schema
            modelBuilder.HasDefaultSchema("dora");
        }
    }
}

Entityクラスの修正

アノテーションが今までのとちょっと違うので修正します。

Kind.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace WpfApp1
{
    [Table("mstkind")]
    class Kind
    {
        [Key]
        [Column("kind_cd")]
        public String KindCd { get; set; }
        [Column("kind_name")]
        public String KindName { get; set; }
    }
}

Cat.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace WpfApp1
{
    [Table("tblcat")]
    class Cat
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        [Column("no")]
        public int No { get; set; }
        [Column("name")]
        public String Name { get; set; }
        [Column("sex")]
        public String Sex { get; set; }
        [Column("age")]
        public int Age { get; set; }
        [Column("kind_cd")]
        public String Kind { get; set; }
        [Column("favorite")]
        public String Favorite { get; set; }
    }
}

宣言の追加

MainWindow.xaml.cs

using Npgsql;
using System.ComponentModel;

接続処理の変更

テーブル作成以外、全ての箇所を変更します。

MainWindow.xaml.cs

//using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))
using (var context = new PgDbContext())

テーブル作成は今まで通りコマンドで行います。
（また別途、DbContext でのやり方は紹介します）

テーブル作成クエリの変更

SQLite とは微妙に違うところ（型、長さ）を変更。

MainWindow.xaml.cs

// テーブルが存在しなければ作成する
// 種別マスタ
StringBuilder sb = new StringBuilder();
sb.Append("CREATE TABLE IF NOT EXISTS mstkind (");
sb.Append(" kind_cd CHAR(2) NOT NULL");
sb.Append(" , kind_name VARCHAR(20)");
sb.Append(" , PRIMARY KEY (kind_cd)");
sb.Append(")");
command.CommandText = sb.ToString();
command.ExecuteNonQuery();

// 猫テーブル
sb.Clear();
sb.Append("CREATE TABLE IF NOT EXISTS tblcat (");
sb.Append(" no INTEGER NOT NULL");
sb.Append(" , name VARCHAR(20) NOT NULL");
sb.Append(" , sex CHAR(3) NOT NULL");
sb.Append(" , age INTEGER DEFAULT 0 NOT NULL");
sb.Append(" , kind_cd CHAR(2) DEFAULT '00' NOT NULL");
sb.Append(" , favorite VARCHAR(40)");
sb.Append(" , PRIMARY KEY (no)");
sb.Append(")");

command.CommandText = sb.ToString();
command.ExecuteNonQuery();

検索処理の修正

MainWindow.xaml.cs

        /// 
        /// 検索処理（非同期）
        /// 
        /// 
        /// 
        private void SearchProcess(object sender, DoWorkEventArgs e)
        {
            // 猫データマスタを取得してコンボボックスに設定する
            //using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))
            // PgDbContext に変更
            using (var context = new PgDbContext())
            {
                String searchName = this.search_name.Text;
                String searchKind = (this.search_kind.SelectedValue as Kind).KindCd;

                // データを取得
                // context から DbSet を取得
                //Table tblCat = con.GetTable();
                var tblCat = context.Cats;

                // サンプルなので適当に組み立てる
                IQueryable result;
                if (searchKind == "")
                {
                    // 名前は前方一致のため常に条件していしても問題なし
                    result = from x in tblCat
                             where x.Name.StartsWith(searchName)
                             orderby x.No
                             select x;
                }
                else
                {
                    result = from x in tblCat
                             where x.Name.StartsWith(searchName) & x.Kind == searchKind
                             orderby x.No
                             select x;

                }
                this.dataGrid.ItemsSource = result.ToList();
            }
        }

コンバーターの修正

データグリッドに表示する際に値を変換している箇所も、DB接続しているため変更します。

KindConverter.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.Data.Linq;
using System.Data.SQLite;
using System.Data.SQLite.Linq;

// Converter 用
// IValueConverter、CultureInfo
using System.Windows.Data;
using System.Globalization;


namespace WpfApp1
{
    /// 
    /// 種別コンバータークラス.
    /// 
    public class KindConverter : IValueConverter
    {
        /// 
        /// データ変換処理
        /// 
        /// 
        /// 
        /// 
        /// 
        /// 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))
            // PgDbContext に変更
            using (var context = new PgDbContext())
            {
                // データを取得
                //Table tblCat = con.GetTable();
                //Kind k = tblCat.Single(c => c.KindCd == value as String);
                var kind = context.Kinds.SingleOrDefault(c => c.KindCd == (String)value);
                if (kind != null)
                {
                    return kind.KindName;
                }
                return "";
            }
        }

        /// 
        /// データ復元処理
        /// 
        /// 
        /// 
        /// 
        /// 
        /// 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            using (var context = new PgDbContext())
            {
                // データを取得
                //Table tblCat = con.GetTable();
                //Kind k = tblCat.Single(c => c.KindCd == value as String);
                var kind = context.Kinds.SingleOrDefault(c => c.KindName == value as String);
                if (kind != null)
                {
                    return kind.KindCd;
                }

            }
            return "";
        }
    }
}

起動してみる

無事に起動、検索することができました。

まとめ

ひとまず、元々の処理（SQLite、MySQL）とあまり変更せずに実装することができました。

ちょっと長くなってしまったので、
登録、更新、削除はまた次回とさせていただきます。

ではでは。

僕がプロダクト開発を続ける理由

2019-06-23T07:08:50+09:00

ちょうど一週間くらい前。「プロダクト開発について整理しよう！」と思い立って、はじめたブログですが、これで一旦、最終回とします。やっぱり、無理に書こうとすると、良いものってできない。。だから、また学んだことがあったときに綴っていければと！

毎日ブログを更新するたびに、リツイートやいいね！、リプをくれた方々、読んでくれた人たち、すごく励みになりました。ありがとうございます！ちょっと、本気でブロガーもありかなって思いました。そんなブログにハマりつつあった僕がやっぱりプロダクトを開発し続ける理由をシメとして共有していきます。

これまでのことを読んで、プロダクト開発をやってみたいという人が増えたり、最近やってなかったけど、またプロダクト開発を再開してみるかという人が一人でも増えたら。すごく嬉しいですね。

今はプロダクトとして、開発会議と、個人開発のフリマを運営しています。そこに、明日からEast Hackersというオンラインサロンを追加します。どうしてこれらを始めるに至ったか、そして運営していて思ったことなど、赤裸々に綴っていきたいと思っています。

開発会議について

開発会議は、プロダクト開発のノウハウや知見を共有できるコミュニティサイトです。もともと、Indie Hackersというサイトが大好きで、これをローカライズするような形でリリースに至りました。本当に最初は同じようなものを作っていこうという気持ちでやってみたのですが、Qiitaでトレンド入りしたり、多くの開発者の方々に気にかけてもらうようになってから、気を取り直してリニューアルしたりもしました。

なので、アイデアに散々書いてきた僕ですけど、開発会議に関しては、かなり趣味的に作ったのがキッカケでした。運営し始めてきてから、サイトに気付かされたことの方が大きいです。今では、日本のモノづくりや、個人開発をする人たちを全面的に応援できるサイトになれるよう日々、改善をしながら運用をしています。

個人開発のフリマについて

開発会議でインタビューをしているうちに、「いつかサービスを売却してみたい！」という声もよく聞くようになってきました。サービス売却というと、数千万円、数億円のイメージがありますが、もっと小規模で売買をできるようになってもいいんじゃないか？という仮説のなかで、小規模M&Aサイト「個人開発のフリマ」を作りました。

僕の中では、開発会議と個人開発のフリマに関しては変わらず、個人開発をメジャーなものにしていきたいという思いで続けています。それは、自身が一人で続けてきて失敗を共有できる場所がなかったり、評価される場所がなかったことに課題を感じていたことにありますし、僕は何よりもモノづくりが大好きなので、もっとモノづくりに加わる人たちが増えれば良いなと心から思っているのでやっています。

大前提として、慈善活動してやるつもりはないので、ちゃんと自分がいなくても回るくらいの仕組みにするまでプロダクトを成長させていきたいと思っています！

プロダクト開発を続ける理由

面白いから

プロダクト開発って、プログラミング、セールス、マーケティング、その他諸々なビジネスのエッセンスが詰まっています。その一つ一つを試行錯誤で学んで、実践に移していくのってすごく面白いです。そして、全てのアクションに対して結果がついて回ります。僕は何かを学びたいと思って、プロダクト開発をやっているわけではありませんが、プロダクト開発をやったことで次や他のことに生かせることはたくさんあります。

お金を稼げるから

モチベーション高く維持していくために必要な要素だと思います。まだまだプロダクト開発で食べていけるほどではないですが、ちゃんとビジネスモデルを仕込めば、お金を稼ぐこともできます。自分のプロダクトでキャッシュを生むって世の中に価値を出している感が半端ないし、当たれば額も大きくなっていくのを夢見てるのはありますね！

やりたいから

僕がやりたいのは、スタートアップや開発者の方々のように何かを作ってみたいと思っている人たちのためにプロダクトを作ることです。何かを作ってみたいと一緒にいると勇気が湧いてきて、そういう気持ちがちゃんと世の中を良くしていくと信じています。だから、そういう人たちに価値を見出しているもらえる何かをこれからも作っていきたいです！

そして、もう一つが日本のためにできることをやっていきたいです。移住し始めてから、自分が日本人として何ができるのかについてすごく考えるようになりました。このモノづくりの領域から、自分が貢献できることを考えやっていきたいです。

さいごに

そして、しつこいくらいに宣伝してきた、East Hackersです。これをなぜやるかについては、別の視点からお話する必要があると思ったので、珍しく長文を用意させていただきました！モノづくりに関わっていない人でも読み物として楽しめるかなと思い、noteで書いてみました。

友人の少ない日本人がアメリカに移住して6ヶ月経った結果
https://note.mu/svfreerider/n/n2f57ac648d54

アナザーストーリーとして楽しんでいただければ嬉しいですね！これからEast Hackersにはリソースを割いていくことになりますが、開発会議も個人開発のフリマも疎かにならないよう頑張っていきたいと思ってます！もう僕の人生でプロダクトを開発する、成長させる以外にやることないんですよね。そして、これをやってる時が一番幸せってことも分かってます。より良いプロダクトを生み出し、挑戦する人たちに勇気を与えられるよう頑張りましょう！

FREERIDERのチートコード

2019-06-22T05:47:53+09:00

はじめに

ちょっと番外編的な感じになってしまうかもしれないですが、今回はプロダクト開発や、それ以外の場面で個人的に意識しているコツとかを話していければと思っています！ちなみに、チートコード（Cheat Code）は、Kiipという会社を作ったBrian Wong氏の書籍のタイトルから取ってきました。

まず、大前提として僕はプロダクト開発をやりながらも、幾つか日本のクライアントさんからお仕事をもらいながら、リモートワーク＋フリーランス的に生計を立てています。あと、アメリカに在住しています。つまり、ちょっと特殊なバックグラウンドかもしれないので、これらのコツが合わないという方かもいるかもしれないので、参考程度にしていただければなと思っています！

チートコード紹介

やりたいことは先にやる！

小さい頃にお母さんから、「宿題してから遊びなさい！」と教育された方も多いはず。ですが、フリーランスと個人開発を両立する上で僕は「遊んでから宿題する」ようなスタイルに変えました。大抵、フリーランスとか仕事が延々に続くことをやってると、忙しくて個人開発の時間を作れないと思うんですよね。僕もそうでした。で、全部仕事終わってから、よし個人開発するかと思うと、疲れてやらないなんて感じになるんですね。。

だから、僕は先にやりたいことをやってから仕事するやり方に変更しました。好きなこと先にやった方が効率良いんですよね！じゃあ、仕事やれなくなったらどうするんだよ！ってなるじゃないですか。やるんですよね、仕事は。どんなに時間が足りなくなっても仕事は責任があるのでやります。でも、プロダクト開発は責任がないからやらなくなる。だったら、どうせやる方を後回しにするようにしました！

ラッキーなことに、僕はいまアメリカにいるので、クライアントから連絡が来始めるのは夕方以降です。まさに理想なスタイルが築けています！

自己主張しない

議論する時もそうですが、プロダクト開発の場面でもあまり自己主張をしないようにしています。これはPGの有名なエッセイKeep Your Identity Smallにならっているんですけど、話し合いのなかで自分がどうのこうのって要素が入ると、毎回こじれてしまうんですよね。感情をなるべく出さずに、客観的にみてどうなのかという視点を常に磨くようにしています。この客観的視点というのは経験や知見を学べば学ぶほど育まれていくものなので、意識してみると良いと思います！

プルよりもプッシュする

押してダメなら引いてみろ。だいたい、上手くいくケースって経験上プルの方が多いと思っています。仕事がない時に、いろんな求人サービスに登録したり、「仕事ください！」って言って回るよりも、プロダクト開発に専念したりして、それをSNSとかで発信したりしてる時の方が良い案件の相談がきたりすることが多いように思います！

プッシュって、「お願いします」ベースになりがちなので、足元見られやすいんですよね。その分、案件の質も落ちるんですよね。だから、いろんな人にお願いメールを送るよりも、ブログ書いたり、SNSで発信したりして、向こうから来るのを待った方が良い結果になりがちだったりします。プロダクト開発の時もそうですね。

紹介よりもDM

一方で、プッシュしなければ勝ち得ない場面もあります。相手と自分の接点がまるでない場合や、確実に伝えたい相手が決まっているときには、プルよりもプッシュの方が効率は良いです！例えば、どうしても会いたい相手がいるとして、その人と繋がるためにはプッシュするしかありません。

その時に緩い繋がりを使って、やんわり紹介してもらうよりも、自分から直接DMした方がよほど効果的であるケースが多いです。実際に、日本にいるときは、海外の著名なIT起業家が訪日するたびに、TwitterでDMやリプを送って「会ってくれ！」と言ってました。

実際に会ってくれて、今でも続いている仲の人もいます。彼らは日本のイベントとかに登壇しに来てたりもするんですけど、そういう場で会うよりも1対1で会えた方が絶対有意義です。あえて、イベントには行かず、いつもそういうやり方を取っていました。

ここに補足すると、僕みたいに会ってくれとDMする人たちはたくさんいると思うんです。そうなるとライバルを出し抜いて会ってもらうために、自分がその人に提供できる価値を出すといいと思います。カフェをするのは、あまり相手に価値はないです。ですが、その人を空港まで迎えに行って、ホテルを案内して、観光地も案内するとかなら、カフェするよりよほど相手に価値があると思いませんか？そういうテクニックも織り交ぜていくと良いと思います！

さいごに

時間は平等ですが、時間の使い方って人それぞれだし、使い方によっては普通の何倍も価値を出せるようになってくると思います！だから、生産性については常に意識して行動してみるのが良いと思います。またどこかで紹介してみたいなと思いますが、結構いろんなツールを使ってなるべく生産的な働き方を意識するようにはしています。している方だと思います！

化けるアイデアを生み出すための仮説

2019-06-21T09:19:22+09:00

はじめに

先日、公開しましたアイデアに関する記事がけっこう好評だった？ので、もう少し僕なりにアイデアについて書くことがありそうだと思ったので、補足的に今日はやろうかなと思います。決して、ネタ切れとかではないです（笑）

まあ、ざっくり言うと、プロダクト開発のアイデアは作り手、もしくは作り手の周りにいる人たちの抱える課題から生まれるのが正攻法だよね！という話をしました。もちろん、そうなんですけど、じゃあ抱えている課題に対する解決策であれば何でもアイデアとして正しいかどうかといえば、そうではない気がしていて。

例えばですけど、僕は昔シェアハウスの検索サイトのようなものをしていました。具体的には、シェアハウス事業者と契約的なのを交わして、サイトから誘客して、入居が決まったらお金をシステム利用料として支払ってもらうものです。不動産屋っぽいですね。

このアイデアは確かに、シェアハウスの事業者と、シェアハウスを探している人たちが抱えている課題を解決しているかもしれません。ですが、これから大きくスケールしていくような見込みはありません。年間数百万の規模まではすごく頑張れば望めるかもしれませんが、それ以上は厳しいと思ってしまいます。

別の観点から考えてみると、普段受託の仕事をしています。外注先の企業の課題を解決しています。普段会社で働いている人たちは、自分を雇用している会社、また、会社のクライアントの課題を解決していると思います。課題を解決しているからといって、プロダクト開発のアイデアにはなり得ません。

課題を解決する、あるいは人が欲しがるものを作るというのは、プロダクト開発のアイデアとしては不十分であって、本当に化けるアイデアを生み出すためには、既存のサービスの10倍以上優れたサービスもしくは、今までとはまったく違うサービスを作る必要があります。

いま開発しているプロダクトは、Google 翻訳よりも、1%くらい精度が高く翻訳することができる。これからリリースしようと思っているシェアハウスの検索サイトは、他の検索サイトと違って、位置情報からも調べられるんだ。これらは本当に既存のサービスよりも10倍優れた製品でしょうか？その一機能が、キラーな要素で、ユーザーの体験をまるで変えてしまうものであれば別ですが。

10倍を定義するのは難しいですが、具体的な事例をあげるとこんな感じです。Uberは普通のタクシーを捕まえるよりも10倍早く目的地にたどり着ける。Slackは既存の社内チャットの10倍自由に楽しくやり取りができるようになった。ICOは既存の10倍以上、資金調達を楽にしてくれました。

じゃあ、こういうアイデアをどうやって生み出すのか。課題から始まるのは勿論ですが、化けるアイデアにはどんな特徴があるのでしょうか。これから紹介する仮説はアイデアを生み出す方法というよりは、アイデアの特徴を示しているに過ぎません。しかも、僕の仮説です。なんで、参考程度に「そうかも！」と思ってもられば良いなと思います。

マイノリティを見つける

アイデアの定説として、「未来に生きて欠けてるものを作る」があります。じゃあ未来のヒントはどこにあるのかというのを考えてみます。僕はマイノリティにあると思っています。

電話はもともと、家庭や会社に一台とかしかありませんでした。マイノリティでした。ですが、今や電話を持ち歩いていない人はいないほどに普及しました。タクシーを日常的に使えるのはビジネスマンや、限られたケースだけでした。ですが、Uberがあることで、誰もが普通にタクシーのような体験を簡単にできるようになっています。

マイノリティはただ人数が少ないということを指しているのではなくて、正しいことを知っていて、それを信じている人たちです。今でいう代表的なマイノリティは、フリーランスやリモートワーカーかなと思っています。フリーランスと、そうでない人にはどのような違いがあるのか、フリーランスになりたい人がいるとして、それができていないなら、何が足りていないのか、それを補完できるプロダクトはきっと化けるアイデアになると思います！

プライバシーを破壊する

インターネットの世界で成功したサービスの多くは、これまでプライバシーを破壊してきた傾向にあります。これは、Angel Listの創業者であるNaval Ravikantが提唱していたことなのですが。

Flickrは、写真をデフォルトでカメラロールにしまい非公開にしている状態を破壊することで成功しました。
LinkedInは、普通履歴書は誰にも公開しないのが普通だった状態を破壊することで成功しました。
Foursquareは、位置情報、あなたがどこにいるかを非公開にしていた状態を破壊しました。
Twitterは、心の中に閉まっておく、メモしておく個人的な気持ちが非公開になっている状態を破壊しました。

こんな感じで、プライベートになっているものを公開にしてみることで爆発的に伸びたサービスというのがあったんですね。

さいごに

いろいろと仮説を書いてみましたが、なかなか後付け的な理論ばかりなので最終的にはやった後にしか、それが正しいかどうかなんて分からないのかもしれません。でも、いろいろと考えていくとプロダクト開発ってやっぱり奥が深い。。

チーム開発をやってみた気づきと反省

2019-06-20T11:42:02+09:00

かれこれ何年も個人開発に打ち込んでいるわけですが、個人でなくてチームでやっていた時期も結構ありました。最初にプロダクトをリリースしていた頃、エンジニアでもなかったので、結果的にさまざまな立場でプロダクト開発に関わっていることになります。

今は個人で開発をしていることに落ち着いているのですが、機会があればまた誰かと何かを作ってみたい！と思っていますし、自分の主要なプロダクトが市場の波に乗ってきたら会社化して体勢を整えていくことも視野に入れています。

サービスの開発に関わる人を増やすって、会社で言えば採用なわけですが、売上も出ていない個人開発だとなかなか人を採用するまでの余裕って生まれないんですよね。僕も以前、受託で稼いだお金でプロダクトのマーケティングや、一部の開発を友人などに外注したこともあるのですが、やっぱり上手くいくかどうか分からないプロダクトで何十万円とかコストがかかってくるのは、精神的にも経済的にも好ましくないです。

それでも、誰かと一緒にやるのであれば、レベニューシェアみたいなやり方があります。株式に似ていて、売上が出たり、売却できた時に報酬を山分けしようぜ！というやつです。お互い負担なくスタートできるので、より良いやり方ではあるものの、大抵のプロダクトは途中で上手くいかなかったりするので、その時が辛いです。

だいたい、最初は開発者が労力をかけてサービスを作り始めるので、実際に出して上手くいかなかったら、開発者の方がコストが多大で終わってしまうのが多いのです。僕は、どちらの立ち位置でも関わったことがあるので、両方の辛みが分かります。頑張って開発してくれたけど振るわず、サービスを広められなかった自責もあれば、頑張って開発してるけど、この人は何をしてくれるんだろう・・と思ったことも正直あります。

僕が関わったことのあるチーム開発での経験と、反省。それから、結局どういうやり方がいいのかなということを書いていきたいと思います。

チーム開発での経験

AI系サービス

学生時代に、10才年上のデザイナーさんと、さらに10才年上のエンジニアさんと、3人でプロダクトを開発することになりました。まず、それだけバラバラの世代がどこで知り合ったかといえば、確か何かのワークショップ？アイデアソン？みたいなので同じグループでした。その時に出したアイデアをイベント後も一緒にやろうということになりました。

アイデアは、ボットの質問に答えながら自分の分身のようなAIを育てていくものだったのですが、毎月ミーティングや、開発を進めながら半年くらいやっていたと思います。僕はプロダクトそのものを作ることに関しては何もできなかったので、ユーザーとなりうる人のヒアリングや、サービスを広めるための施策を考えたりしてました。

結局、チームは風化していきました。イベントで出会ったということもあって、多少関心の接点はあったものの、お互いの生活風景がまったく異なっていたので、何も分かり合えませんでした。でも、この時、初めてプロダクトを作るということを経験して、しかも組んだ2人が業界に長い方だったので、色々と1から教えてもらったのはラッキーでした！チーム開発では、誰かの仕事っぷりを直に感じることができるので、自分よりスキルが高いという人と組んだ方が絶対良いなとその時思いました。

インターンシップメディア

アメリカに滞在している時に、語学学校が一緒だった友人と、シリコンバレーで働きたいけどその機会を見つけられない人向けに、現地の情報や、インターンできるスタートアップを紹介するインターンシップメディアを作りました。二人で記事を作ったり、取材をしたりするのはとても楽しかったです。しかし、やっていくうちに、自分はここに優先度を高く、比重を置いていたのに対して、相手がそうでなかったことで熱量の違いを感じて、あまり良くない別れかたをしてしまいました。その時は相手の気持ちを汲み取れず、一方的に自分のやる気を押しつけてしまったことに反省していて、今後チームでやる時は絶対に険悪な形で終わらないようにしようと決意しました。

共同創業

アメリカでルームシェアをしていた友人と一緒に、日本で会社を立ち上げました。一年以上寝食を共にしてきた仲だったので、この人とならどんな苦難も乗り越えていくと信じ、さまざまなプロダクトを一緒に立ち上げてきました。この時も彼がエンジニアで、僕はコードを書いていなかったので、彼がコードを書いている間に集客用のオウンドメディアを作ったりと、少しでもプラスになることを探していて頑張っていました。

結果、売上も見えないまま、余裕がない中でのスタートアップで関係も険悪になり、最終的に相手が会社を去りました。プライベートでは仲良くなれても、ビジネスでも良好で進められるとはまた別なんだなと思いました。会社を去った後も、彼とは連絡を取り合っていますし、飲みにいったりもしてます。一緒にプロダクトを作った仲間って、例え失敗しても、その期間一緒に夢を追った仲間なわけですから、最高ですよね。

Twitterカード系サービス

前回と結構時間が空いて、1年半以上ぶりにチーム開発をしたのが、Twitterカードを使ったミニアプリです。一緒にやることになった人とは、コワーキングスペースで出会いました。文字通り、意気投合して、出会ってから3週間とかでサービスリリースしてました。この時こそ、僕がメイン開発で、相手がマーケティングを担当してくれました。サービスはリリース初日からバズって、すごいアクセスがある中で夜通し通話と繋いで、バグを直したり、どういう動きをするのか話し合うのは良き思い出ですね。結構、マーケ、開発と役割をきっちり分けてしまったがゆえに、お互いがその役割に干渉しづらい空気になったのが良くなかったですね。

予定調整アプリ

Googleカレンダーとシンクして、予定調整ができるサービスを作りました。一緒に作った人とは、共通の友人経由で出会って、一緒に仕事するよりも、どちらかといえば飲み友達でした。ですが、彼の腕前と仕事での評判は予々聞いていたので、なんか一緒にできないかなとタイミングを伺っていました。そこで、サービスのアイデアを考えて、一緒にやらないかと提案してみました。作り始めてからは、僕がバックエンド、彼がフロントエンドでやる予定だったのですが、結局、開発で自分が足を引っ張ってしまい、両方彼が実装することになりました。その時は、本当に申し訳なかったですが、二人でファミレスオールして開発したのは、プロダクト開発をしてきた人生で選り取りにエキサイティングな思い出です。サービスは上手くいきませんでしたが、今でもサービスの相談に乗ってもらっています。やっぱり、自分が非開発のポジションで入ってしまうと、リリースまで手薄になるし、リリースしてからも上手くいかなかったら自責が半端ないので、もっと、MVPから一緒にやっていった方がいいかもしれませんね。

チーム開発に対する見解

結果、一緒にプロダクト開発をしてくれた人たちにはすごく感謝しています。プロダクト開発にはビジネスのエッセンスが込められていて、他の人がどのような想いやモチベーションでやるのかから、自分には思いつかないマーケティング的視点まで、なかなか学ぶ点がたくさんあるのです！

もちろん、そういう意味では誰と組むかが大事だったりもするのですが。結論的に、個人開発なら失敗も成功も全部自分のものになるわけですが、チーム開発だと失敗しても成功しても、その人と組んだことで得られるものがあると判断できた場合にのみやってみるのが良いんじゃないかなと思います！

あとは持分ですよね、どういう条件でやるのかは最初のうちからちゃんと（できれば契約も混みで）決めておくのが良いと思います。必ずしも、均等が良いわけではないですし。でも、この人とビジネスやってみると面白そうだなって人に気軽に、なんかやりましょ！って声かけてみればよいと思います。

プロダクトを閉じる時。ピボットで成功しよう

2019-06-19T10:56:53+09:00

はじめに

プロダクトを閉じるときほど、開発者にとって辛いことはないかもしれませんね。よく、開発会議のインタビューで「最初に開発したプロダクトは何ですか？」と尋ねさせていただいてるのですが、おそらく個人開発者の多くが今日に至るまで一つ以上のプロダクトを作ってきたし、きっと閉じたり、運営を続けたりを繰り返していると思います。

僕自身も本当にたくさんのプロダクトを閉じてきたし、たまに、あれってこういうやり方でやれば、もっと上手くできたんじゃないかなと思い起こしたりすることもあります。今も幾つかプロダクトを運営していますが、何らかの理由で閉じてしまう可能性もあるかもです。

なぜプロダクトは死ぬのか？

よく競合に食われたとか、法規制がどうのっていう問題も挙げられますが、だいたいのプロダクトは他殺ではなく、自殺です。だから、プロダクトを作っている時に、類似サービスが出てきてもそんなに気にする必要はないんじゃないかなと思いますね。

要は、開発者がこのプロダクトはやりようがない、やっていても楽しくないってなった瞬間にプロダクトは閉じられていきます。あんまりユーザーがいるかいないかのような成績は関係なくても、ユーザーがついていても閉じる時は閉じるし、ユーザーがいなくてもやり続ける人はいます。

続けるか、続けないかは開発者次第ですが、個人的にはどんなに続けたくても、無理だという理由に納得できるなら、キッパリ閉じた方が生産的かなと思っています。アイデアに盲信して、一年くらいのめり込んでしまい、お金も時間も無駄になってしまった経験があるので、あくまで成功することを前提にするなら、見極めはすごく大事です！

一方で、Airbnbのように一年くらいしてからやっと芽が出てくるパターンもあるので、続けるか、続けないかの基準はここでは書き切れなさそうだなと思っています。ただ、プロダクトは死んでも、開発者が死ななければまだこれからめちゃくちゃ良いプロダクトを生み出せる可能性は残っています。

ピボット後に成功したプロダクトたち

今では誰もが知っているプロダクトで方向転換して成功した事例を幾つか見ていきましょう！

Twitter

みんな大好きTwitterも最初は、Twitterではありませんでした。もともと、Odeoというポッドキャストのプラットフォーム（iTunesのような）を作っていた会社の中における社内ベンチャー的にはじまりました。確かに、Twitterは創業者のジャックドーシーが5年前から温めていたアイデアとしても有名ですが、Odeoが上手くいっていないときにTwitterのプロジェクトをスタートし、今ではここまで大きくなったのです。

Youtube

こちらも面白いのが、Youtubeって最初は出会い系サイトだったんです！ユーザーは自己紹介のビデオをアップロードして、理想の相手を探せる動画を使った出会い系だったのですが、ユーザーが理想の相手を探すことよりも動画をアップロードしておくことに価値を感じていたのを発見し、現在のYoutubeへとピボットを果たしました。

Slack

Slackは、Slackを作る会社の社内ツールとして開発されてきました。表向きはゲーム会社でした。創業者のスチュワートバターフィールドは、その以前、写真共有サービスFlickrを立ち上げた起業家でもあります。ちなみに、その時も表向きはゲームを作っていたという。。

Pinterestも何回も失敗しながら、今のサービスに着地していることを創業者本人がこちらの動画で語っています。ちなみに、Pinterestの前はToteというショッピングアプリを作っていたそうです。ユーザーはそこそこついていたみたいですが、アプリ上でユーザーは購入せず、お気に入りをするだけだったそうです。そこから、お気に入りしておくことに特化したPinterestが生まれたんですね。

Instagram

ティーンズに大人気のInstagramもリリース当初は、こんなにスタイリッシュではありませんでした。最初はBurbnという、位置情報や写真を共有できるソーシャルチェックインとして始まりました。確かにInstagramに似通った部分もあって、ユーザーの動きを見ながら、本当に大切な機能だと判断した写真投稿の機能だけが残り、今のInstagramになりました。

さいごに

もう世界中の知らない人がいないレベルのプロダクトを作る開発者でも、プロダクトを閉じて作り直すという経過を経て、それを作り上げているんです。そう考えると、プロダクトを閉じるなんて全然恥ずかしいことじゃないと思います。

でも、プロダクトを閉じるためにプロダクトを作る人なんていないわけですから、閉じると決断するまでは、ずっと続けられるプロダクトを作ることに精一杯尽くしていかなきゃですね。

【WPF】自作カレンダー　その２（動的生成）

2019-06-19T09:36:38+09:00

自作カレンダーその２です。
今回は、Xamlではなくコードからカレンダーを生成します。

最終的に年間カレンダー的なものにしようと思うので、
Xamlで定義すると Grid だらけになってしまうし、色々やろうと思ったらやっぱり動的に生成した方がやりやすいような気がするので。

前回のプログラムはこちら。

【WPF】自作カレンダー　その１（とりあえず当月を表示）

スタイル定義の変更

まずはスタイルの外出しをします。

StyleDic.xaml

ポイントは、日付セルの上をマウスオーバーした際と、クリックして選択した際に背景色を変更するところですかね。

画面の変更

画面に年月を選択するコンボボックスと、選択された日付を表示するラベルを追加しました。
後はカレンダー用の Grid がなくなってすっきりしました。

MainWIndow.xaml

プログラム修正

新規クラス追加

新規で、年月コンボボックス用と、日付セル用のクラスを追加します。

MonthInfo.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CalendarSample
{
    /// 
    /// 年月情報
    /// 
    public class MonthInfo
    {
        /// 
        /// コンストラクタ
        /// 
        /// 
        public MonthInfo(String yearMonth)
        {
            this.YearMonth = yearMonth;
            this.YearMonthWithKanji = getYear() + "年" + getMonth() + "月";
        }

        /// 
        /// 年月
        /// 
        public String YearMonth { set; get; }

        /// 
        /// 年月（YYYY年MM月）
        /// 
        public String YearMonthWithKanji { set; get; }

        /// 
        /// 年を返します.
        /// 
        /// 
        public String getYear()
        {
            if (String.IsNullOrEmpty(YearMonth)) return "";
            return YearMonth.Substring(0, 4);
        }

        /// 
        /// 月を返します.
        /// 
        /// 
        public String getMonth()
        {
            if (String.IsNullOrEmpty(YearMonth)) return "";
            return YearMonth.Substring(4, 2);
        }
    }
}

DateInfo.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CalendarSample
{
    /// 
    /// 日付情報
    /// 
    public class DateInfo : MonthInfo
    {
        /// 
        /// コンストラクタ
        /// 
        /// 
        /// 
        public DateInfo(String yearMonth, String day) : base(yearMonth)
        {
            this.YearMonthDay = yearMonth + day;
            this.Date = new DateTime(int.Parse(getYear()), int.Parse(getMonth()), int.Parse(day));
        }

        public DateTime Date { set; get; }

        /// 
        /// 年月日
        /// 
        public String YearMonthDay { set; get; }

        /// 
        /// 年月日（YYYY年MM月DD日）
        /// 
        public String getYearMonthDayWithKanji()
        {
            return String.Format("{0:yyyy年MM月dd日（ddd）}", Date);
        }

        /// 
        /// 日を返します.
        /// 
        /// 
        public String getDay()
        {
            if (String.IsNullOrEmpty(YearMonthDay)) return "";
            return YearMonthDay.Substring(6, 2);
        }
    }
}

コードビハインドの修正

年月コンボボックスの項目設定と、カレンダーの生成メソッドを追加したりしました。

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using MahApps.Metro.Controls;

namespace CalendarSample
{
    /// 
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : MetroWindow
    {
        private Rectangle selectedRec;
        private Style selectedRecStyle;

        public MainWindow()
        {
            InitializeComponent();

            // 前月から6カ月分のリストを作成し、当月を選択させる
            List list = new List();
            DateTime now = DateTime.Now;
            DateTime dt = now.AddMonths(-1);
            for (int i = 0; i < 6; i++ )
            {
                list.Add(new MonthInfo(String.Format("{0:yyyyMM}", dt)));
                dt = dt.AddMonths(1);
            }
            this.cbYearMonth.ItemsSource = list;
            this.cbYearMonth.DisplayMemberPath = "YearMonthWithKanji";
            this.cbYearMonth.SelectedIndex = 1;

            createCalendar(this.cbYearMonth.SelectedItem as MonthInfo);
        }

        /// 
        /// 年月コンボの選択変更イベントハンドラー.
        /// 
        /// 
        /// 
        private void cbYearMonth_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            createCalendar(cbYearMonth.SelectedItem as MonthInfo);
        }

        /// 
        /// 指定された年月のカレンダーを作成
        /// 
        /// 
        private void createCalendar(MonthInfo monthInfo) {

            CalendarContainer.Children.Clear();

            // グループボックス
            GroupBox calendarGroup1 = new GroupBox();
            calendarGroup1.Header = monthInfo.YearMonthWithKanji;
            calendarGroup1.Style = FindResource("gp-normal") as Style;

            // グリッド
            Grid calendarGrid1 = new Grid();
            calendarGrid1.Style = FindResource("grid-calendar") as Style;
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(20) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });

            // グリッド枠線
            Rectangle border = new Rectangle();
            border.Style = FindResource("rec-border") as Style;
            calendarGrid1.Children.Add(border);

            for (int col = 0; col < 7; col++)
            {
                Rectangle week = new Rectangle();
                week.Style = (col == 6) ? FindResource("rec-week-sat") as Style : FindResource("rec-week") as Style;
                week.SetValue(Grid.ColumnProperty, col);
                calendarGrid1.Children.Add(week);

                Label lbWeek = new Label();
                lbWeek.Style = FindResource("lb-week") as Style;
                lbWeek.Content = ("日月火水木金土").Substring(col, 1);
                lbWeek.SetValue(Grid.ColumnProperty, col);
                calendarGrid1.Children.Add(lbWeek);
            }

            // ヘッダ行下線
            Rectangle underlining = new Rectangle();
            underlining.Style = FindResource("rec-underlining") as Style;
            calendarGrid1.Children.Add(underlining);

            // グループボックスにグリッドを追加
            calendarGroup1.Content = calendarGrid1;
            CalendarContainer.Children.Add(calendarGroup1);

            // 当月の月初を取得
            var firstDate = new DateTime(int.Parse(monthInfo.getYear()), int.Parse(monthInfo.getMonth()), 1);

            // 曜日番号の取得
            int dayOfWeek = (int)firstDate.DayOfWeek;

            // 月末を取得
            int lastDay = firstDate.AddMonths(1).AddDays(-1).Day;

            // 1日から月末までを走査
            for (int day = 1; day <= lastDay; day++)
            {
                // セル位置
                int index = (day - 1) + dayOfWeek;
                // 横位置
                int x = index % 7;
                // 縦位置
                int y = index / 7;

                // テキストブロックを生成してグリッドに追加
                var tb = new TextBlock();
                tb.Text = string.Format("{0}", day);
                // 土日は文字色を変更する
                if (x == 0)
                {
                    tb.Style = FindResource("txb-date-sun") as Style;
                }
                else if (x == 6)
                {
                    tb.Style = FindResource("txb-date-sat") as Style;
                }
                else
                {
                    tb.Style = FindResource("txb-date") as Style;

                }
                calendarGrid1.Children.Add(tb);
                tb.SetValue(Grid.ColumnProperty, x);
                tb.SetValue(Grid.RowProperty, y + 1);

                // 四角形を生成してグリッドに追加
                // セルの枠線などを表示し、イベントをハンドリングする用
                var rec = new Rectangle();
                DateInfo dt = new DateInfo(monthInfo.YearMonth, string.Format("{0:00}", day));
                rec.DataContext = dt;
                // 枠線を調整
                rec.Style = (x == 6) ? FindResource("rec-date-sat") as Style : FindResource("rec-date") as Style;
                // イベント設定
                rec.MouseLeftButtonDown += date_MouseLeftButtonDown;
                calendarGrid1.Children.Add(rec);
                rec.SetValue(Grid.ColumnProperty, x);
                rec.SetValue(Grid.RowProperty, y + 1);
            }
        }

        /// 
        /// セル（日）をクリックした際のイベントハンドラ.
        /// 
        /// 
        /// 
        private void date_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // 既に選択されたセルがある場合はスタイルを戻す
            if (selectedRec != null)
            {
                selectedRec.Style = selectedRecStyle;
            }

            // 選択されたセルの取得
            Rectangle rec = sender as Rectangle;

            // 選択セルの保持
            selectedRec = rec;
            selectedRecStyle = rec.Style;

            // 選択時のスタイルに変更
            rec.Style = FindResource("rec-date-selected") as Style;

            // ラベルに日付をセット
            lbSelectedDate.Content = (rec.DataContext as DateInfo).getYearMonthDayWithKanji();
        }
    }
}

起動してみる

起動後は当月を表示するようにしました。

日付を選択すると、選択箇所の背景色が変わり、選択された日付が右上に表示されます。

まとめ

なんとなく使えそうな気がしてきました。
バインディングなんかがうまく利用できていませんが、それは追々ということで。

次回は、年間カレンダーにしようかと思います。

ではでは。

ユーザーヒアリングのすすめ

2019-06-18T13:31:11+09:00

はじめに

より良いプロダクトづくりをするために、ユーザーヒアリングはすごく大事だと言われています。ユーザーヒアリングをしていると思わぬ見落としに気づくことができたりして、例えば、Twitchは初期に相当数のユーザーにヒアリングをしたそうですが、その中でユーザーにとってもっとも深刻なことはTwitchが「Team Liquid Star Craft」のファンサイトで掲載されていないことだったとか。そんなコアなこと自分たちでやっていたら分かるはずもなくて、ユーザーにヒアリングして初めて理解できることもあるってわけです。

じゃあ、ユーザーヒアリングってどうすれば良いのでしょうか？個人開発を初めてすぐの時は、ユーザーヒアリングが大事であるだけを鵜呑みにして、とにかく登録してくれたユーザーにアポイントを取って、できるだけ対面で会うようにしました。それを一年続けた結果、Facebookの友達数が増えただけで、代わりに生き残ったサービスは一つもありませんでした。

実際のところ、周りの話を聞いてもまともなユーザーヒアリングをするのは大概難しいように思います。まず、プロダクトがない状態だったら、ユーザーがいないので（ユーザー）ヒアリングになります。もちろん、ユーザー、それもただ登録しているだけの人ではなく、ヘビーユーザーに意見を聞けることが一番理想です。しかし、プロダクトを作ったり、ユーザーがつく前からヒアリングってしておきたいものですよね。

どんな人がヒアリングの対象になりうるのか？

ヘビーユーザーがいない場合のヒアリング対象は、3パターンあるかなと思ってます。分かりやすい例があるといいと思うので、Airbnbを取ってみましょ。一応説明すると、Airbnbは、自分の家で空いている部屋を宿泊施設に旅行客に貸し出すことができるシェアリングエコノミーです。

競合他社のプロダクトを使ってる

Airbnbがスタートする4年前から、似たようなサービスでCouchSurfingというのがありました。CouchSurfingとAirbnbの違いは、取引に際して金銭のやり取りがあるかどうかだけで、基本的に空いている部屋を旅行者に明け渡すという意味ではほぼ同じユーザー体験を提供していたといえます。CouchSurfing人は、すでに知らない人の家に泊まる/知らない人を泊めるのハードルをクリアしていて、Airbnbのユーザーにもなる可能性が高いですよね。じゃあ、「どうやったら、乗り換えてくれますか」って聞けば良さそう。

すでに代替手段を用いて、行為を習慣化している

少し競合の部分に被るところもあるかもしれませんが、Airbnbが始まる前からAirbnbぽいことをしている人たちはいました。Craiglistは、中古家具の売買や、部屋探しなど生活にいまつわる掲示板として有名なのですが、要するに人と人で自由に取引を行ってたのですね。そこで、Airbnbのように知らない人の家に数日間宿泊するようなことも行われていました。彼らは専用プラットフォームがないから、仕方なく、別のサイト（今回でいうCraiglist）や方法（代替手段）で補完していたわけですね。そういう人なら自分のサイトのユーザーにもなってくれそうですよね。

プロダクトによって解決される問題を抱えている

プロダクトがなぜ成立しているのかといえば、何かしらの問題を解決しているからです。Airbnbでいえば、住んでいる家にいらない空きスペースがあるけど、有効活用できないという問題（ホスト視点）を解決していることになります。こうした家に過剰スペースを持っていて、「どうするか・・・」と考えている人たちにヒアリングしても何か見えてくるものがありそうですね。

どんなことを聞けば良いのか？

ユーザーと話すときに勘違いされがちになっているのが、アイデアを検証するために色々と用意してしまうことです。「これはしますよね？」、「あれはしますか？」とまるで誘導尋問のように質問をして、YESと答えれば、「よし、仮説は検証された！」と思ってはりきってしまうパターンです。ユーザーと話す最大の目的とは、そこからアイデアを得ることです。話していくなかで、もっと使ってもらえそう、改善した方が良いなと思うことを書き留めていくのです。

実際に会う場合には、質問事項とかを用意しなきゃ失礼かと思うかもしれませんが、大事なのはユーザーがどんな人なのかを知ることだったりもして、雑談をしているくらいの方が良いアイデアを思い浮かぶかもしれません。ユーザーがどんな生活をしているか聞いて、この隙間の時間ならサービスを使ってもらえるかもしれないと、相手の話をヒントに組み立てていくんです。

もう普通の人ヒアリングはやめよ

アンケート的なものと、ヒアリングは別物ですね。アンケートって、何万何十万の意見を集計して少しは説得力が出てくるかもですが、周りの友達数人に聞いたことってアンケートでも何でもなくて、もちろんヒアリングでもありません！

一度、友人にペットのSNSを作るからヒアリングに乗ってくれと言われたのですが、ペットを飼っていない僕にそれを聞いても何にも参考にならないですよね。というか、むしろ雑音が反映されてしまうので、かえってマイナス効果が強いんだと思います。

一般的な機能や、パッとした見た目について聞くぐらいは良いと思いますが、サービスの根幹に関わるところを普通の人に聞くのは危険です！万人受けするサービスを作るのは後で良いので、まずは最初の100人に愛されるサービスを作っていきましょ。

一番のユーザーはあなたであるべきかも

Aribnbの例に戻ると、彼らはサンフランシスコという立地で高い家賃を払うことに苦しんでいました。だったら、「ロフトの空きスペースにマットレスを敷いて、お金を稼げるんじゃないか？」と思いつき、実際にそれで人を募集したところ、泊まる人が現れたことからサービスをスタートしました。

まずは、自分が緊急性の高い問題を抱えていて、他のやり方で何とか補完しているけど、これでは不足だと感じていることがないか考えてみませんか。それを解決するプロダクトを作るなら、ユーザーヒアリングは最初のうちは自問自答すれば良いわけですからね。モチベーションも高まりながら、プロダクト開発を続けられるはず！

さいごに

ちょっと今日の記事は「こうすべき！」みたいな強調が多くなってしまったかもしれません。。僕自身がこれまでユーザーヒアリングに失敗してきたので、ちゃんと失敗から学ばなきゃなとずっと思ってきた分、そういう口調になってきたかもです。どのパターンが正解かどうかは、それぞれのケースにもよると思うので、参考程度にしていただければと思います！

【WPF】自作カレンダー　その１（とりあえず当月を表示）

2019-06-18T10:06:23+09:00

WPFには、カレンダーコントロールが標準であるんですが、
スケジューラ－みたいなことはできないし、あくまで選択された日付を取得するためのものになっています。

常に表示して、カレンダーに対してアクションするようなコントローラーも
需要はあると思うので、標準で使えるようにしてくれればいいのにと思いながらちょっと自作してみます。

今回は新規で専用にプロジェクトを作成します。

プロジェクト作成

VisualStudio2017を起動し、
新規プロジェクトを作成、名前を「CalendarSample」とします。

作成方法などは下記の記事を参考にしていただければ。
Visual Studio 2017 Community のインストールから Hello World

また、スタイルに「MahApps.Metro」を利用するので、
分からなければこちらの記事を参考にしてください。
【WPF】MahApps.Metro で見た目をスタイリッシュにしてみる

プログラム実装

スタイルの設定

App.xaml

MahApps.Metroのスタイル設定を記述します。

StyleDic.xaml

プロジェクト直下に「Style」ディレクトリを追加し、上記ファイルを作成します。

画面の作成

MainWindow.xaml

コードビハインドの実装

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using MahApps.Metro.Controls;

namespace CalendarSample
{
    /// 
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : MetroWindow
    {
        private Rectangle selectedRec;

        public MainWindow()
        {
            InitializeComponent();

            CalendarGropu1.Header = String.Format("{0:yyyy年MM月}", DateTime.Now); 

            // 当月の月初を取得
            var firstDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

            // 曜日番号の取得
            int dayOfWeek = (int)firstDate.DayOfWeek; 

            // 月末を取得
            int lastDay = firstDate.AddMonths(1).AddDays(-1).Day;

            // 1日から月末までを走査
            for (int day = 1; day <= lastDay; day++)
            {
                // セル位置
                int index = (day - 1) + dayOfWeek; 
                // 横位置
                int x = index % 7;
                // 縦位置
                int y = index / 7;

                // 土日は文字色を変更する
                Color color = Colors.Black;
                if (x == 0)
                {
                    color = Colors.Red;
                }
                else if (x == 6)
                {
                    color = Colors.Blue;
                }

                // テキストブロックを生成してグリッドに追加
                var tb = new TextBlock()
                {
                    Text = string.Format("{0}", day),
                    FontSize = 12,
                    Foreground = new SolidColorBrush(color),
                    Padding = new Thickness(0, 10, 10, 0),
                    HorizontalAlignment = HorizontalAlignment.Right,
                    VerticalAlignment = VerticalAlignment.Top
                };
                this.CalendarGrid.Children.Add(tb);
                tb.SetValue(Grid.ColumnProperty, x);
                tb.SetValue(Grid.RowProperty, y + 1);

                // 四角形を生成してグリッドに追加
                // セルの枠線などを表示し、イベントをハンドリングする用
                var rec = new Rectangle();
                rec.HorizontalAlignment = HorizontalAlignment.Stretch;
                rec.VerticalAlignment = VerticalAlignment.Stretch;
                // 背景色を設定しないとイベントを検知できないらしいので透過色を設定
                rec.Fill = Brushes.Transparent;
                // 枠線を調整
                rec.Margin = (x == 6) ? new Thickness(0.0, -1.0, 0.0, 0.0) : new Thickness(0.0, -1.0, -1.0, 0.0);
                // イベント設定
                rec.MouseLeftButtonDown += date_MouseLeftButtonDown;
                this.CalendarGrid.Children.Add(rec);
                rec.SetValue(Grid.ColumnProperty, x);
                rec.SetValue(Grid.RowProperty, y + 1);

            }
        }

        /// 
        /// セル（日）をクリックした際のイベントハンドラ.
        /// 
        /// 
        /// 
        void date_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // 既に選択されたセルがある場合は初期化
            if (selectedRec != null)
            {
                selectedRec.StrokeDashArray = null;
                selectedRec.StrokeThickness = 0;
            }

            // 枠線に点線をセット
            Rectangle rec = sender as Rectangle;
            rec.Stroke = Brushes.Black;
            DoubleCollection dbc = new DoubleCollection();
            dbc.Add(1);
            dbc.Add(1);
            rec.StrokeDashArray = dbc;
            rec.StrokeThickness = 1;

            // 選択セルの保持
            selectedRec = rec;
        }
    }
}

ポイントは、
「Grid」を使い枠組みを作成してセルに日付用の「Rectangle」、「TextBlock」を配置することです。

起動してみる

日付セルをクリックすると、枠に点線が表示されるようにしました。

まとめ

今回はここまでとなります。

次回以降、このカレンダーを使って色々試してみたいと思います。

ではでは。

作って終わらない！スケールしないことをしよう！

2019-06-17T08:38:32+09:00

はじめに

プロダクトを作るのって楽しいですよね。で、いよいよリリースってなるとワクワクします！でも、リリースして1,2人がサインアップして使われない、みたいな状態になると、本当ショックでそのまま放置・・・。このサイクルを何巡もしちゃってませんか？そうならないためにも、確かに最初のアイデアはすごく大事なんですけど、出してすぐに使われなかったからといって、それがダメなアイデアであるとは限らないです。

今や知らない人がいない民泊サービスのパイオニアAirbnbも、最初の一年は泣かず飛ばずで、クレジットカードで資金調達をしていたというエピソードもあるほどです。（笑）リリースしてまずやらなければいけないことって何でしょうか？それを考えないまま、リリースすると結局、「ダメだった。。」と気落ちしてしまうわけですね。

リリースしてから（もしくは、リリース前でもOK）、僕たちがやることはズバリ「スケールしないこと」が良いとされています。Y Combinatorという、AirbnbやStripe、Dropboxを輩出したアクセラレーターでは、この「スケールしないことをしよう」を第一のアドバイスとして起業家に伝えています。

スケールしないことというのは、その言葉の通り、ユーザーが爆伸びするようなことを狙ってやるのではなく、その行為をしたことでユーザーが一気に増えることはないけど、プロダクトそのものを改善する一助になることを指してます。

ユーザーヒアリングとかそうじゃないですかね。使っているユーザーに、なぜ使っているのか、どうすればお金を払ってくれるのかを聞くみたいな。ユーザーヒアリングについては、また次回とかに詳しく書こうかなと思っています！

で、スケールしないことってどんなこと？って思いますよね。こういうのは具体例をいっぱい見た方が参考になると思うので、いくつかスケールしないことの事例を紹介していこうかなと思います！

スケールしないことの事例

Stripe

一番有名な事例から紹介します。Stripeといえば、決済のAPIを提供しているスタートアップですね。パトリックコリソンと、ジョンコリソンの双子が作ったんですけど、YCに伝わる有名な諺に「コリソンインストレーション」があります。これは、コリソンが実際に会って誰かにStripeの紹介をした時に、相手が「良いサービスだね、使ってみるよ！」と答えると、「ありがとうございます。では、パソコンを貸してください。」と言って、その場でパソコンにStripeをインストールしたやり方です。

普通だったら、「ありがとうございます。じゃあリンク送っておきますね。」ですよね。その場でインストールしてもらうという一見強引だけど、確実にユーザーに使ってもらえる方法をやっていたわけです。

Airbnb

Airbnbは典型的な「スケールしないこと」をして這い上がったスタートアップの一つです。リリースして当初、創業者たち自らがホストをしてる家に宿泊しに行き、写真を撮影して回っていったのです。一軒、一軒訪れて。YCではプログラムが行われている時に、週一で会食があったそうですが、いつも彼らはスーツケースをガラガラ引いて会合に参加していたそうです。また、ブライアンチェスキーはいつもヘッドセットを着用して自らがカスタマーサポートを担当していたそうです。素晴らしい。

お気に入りの画像やアイデアをピンで保存しておけるサービス、Pinterest。彼らが最初にしたことは、デザイナーたちの会合に出かけて自分たちのサービスを広めることでした。また、自らが運営で写真のミートアップを開くなど、Webのサービスだけど、現実世界でユーザーを増やしていきました。特に好きなエピソードが、ベンシルバーマンが毎日Appleストアに赴いて、怒られるまで、置いてあるPCのスタート画面をPinterestに変え続けたことですw

Meraki

Merakiはルーターの会社で、やがてCiscoに買収されました。彼らはルーターをいきなり外注で依頼することなく、最初は自分たちの手づくりでルーターを作って売っていました。また、これに続いてスマートウォッチのPebbleも最初の100台を自分たちで作って売っていたそうです。ハードウェアってビジネスにするの大変そうですが、最初は自分たちで作って売ればコストは抑えてスタートできそうですね！

Tinder

ホットオアノットで、男女の出会いを実現してくれるTinderは、最初大学のサークル一つ一つずつ営業をかけて、アプリをダウンロードしてくれるように促進したそうです。使ってくれそうなユーザーに対して直談判して進んでいくやり方ですね。

Wufoo

このエピソードがすごく好きです。Wufooは、Googleフォームのようなフォームを簡単に作成できるツールを作っていました。（Survey Monkeyが買収）彼らは最初に使ってくれたユーザーに対して一人一人手書きの感謝状を書いて送っていたのです。結構、USのサービスはこういうやり方をする企業が増えてますが、その先駆けがWufooでした！

スケールすることもしよう

スケールしないことをすることは、すごく大事ですが、同時並行もしくは、遅れてスケールをすることも仕込んでいくのが良いかなと思います。いわゆる、グロースハックというやつですね。多くのハックは、技術を伴うので、開発者には有利な戦法かなと！

Dropbox

リファラルキャンペーンを大々的にやり始めた、最初の会社です。今や当たり前になったリファラルキャンペーン（友達を紹介するとクーポンがもらえる、無料になるみたいな）。Dropboxはこのやり方で、15ヶ月で400万人のユーザーを獲得しました。

Airbnb

Airbnbは、民泊の物件を投稿する際にクラシファイドサイトのCraiglistにも同時投稿する機能を加えました。Craiglisthは、Airbnbが誕生するずっと前から存在する何でも屋のようなサイトで、実際にAirbnbと似たような掲示板（ホームスワッピング）のようなのがありました。後からこれがバレて、Craiglistにバンされたそうですが、工夫を凝らしたやり方ですよね！

「Pin it Forward」キャンペーンを実施して、ユーザーを増やすことに成功しました。ピンタレストは、著名なブロガーとパートナーを組み、ブロガーコミュニティの中でピンタレストを紹介するような運動を扇動しました。

さいごに

サービスの育て方を知らない僕たちは作って終わりになりがちです、運が良ければバズって終わり。でも、僕たちがやれることってまだまだ残されているっていうのが、こうした事例を見ている勇気が湧いてきませんか？今や世界中のユーザーに使われているあんな企業や、こんな企業も最初はこんなにも地道に頑張ってたわけです。

そして、マーケットハックはそれはそれで面白そうだし。熱中しているあいだに、新しいツールとかも思いつきそうですよね！そんなわけで、こういうマーケティング事例とか、アイデアをお互いに密にシェアできるオンラインサロンをやってくので、よろしくお願いします！（さりげなく宣伝するのムズイ！）

プロダクト開発におけるMVPをちゃんと考える

2019-06-16T08:21:10+09:00

はじめに

MVPって知ってますか？バスケや野球で選手が表彰される方じゃなくて、スタートアップやプロダクト開発の場面でよく言われる方です。MVPは、Most Viable Productの略で、実用最低限に実装されたプロダクトのことを言います。2010年あたりに、エリックリースが「リーンスタートアップ！」という本の中で、まずプロダクトの工数を見積もって開発を進める前に、このプロダクト本当にいけるんか？！っていうところをちゃんと検証してから、プロダクト開発に着手しようという理論です。

分かりやすく言えば、プロダクトがいけるかどうかを確かめるために、コードなんて書く必要がないってことです。いけるならやればいいし、いけそうにないなら止める。普通、アプリ作ろうと思ったら、何ヶ月もかかるし、お金も時間も奪われますよね。それでダメだって分かったら、これまでのコスト（涙）ってなる。だから、これを最低限に抑えようぜっていうのが、MVP。スタートアップや個人開発のように、リソースが限られている僕らには知って損はないやり方なのかなって思います。

どんなのがMVPっていうのか？

主に海外の事例になりますが、「これぞ！MVP」というものを幾つか紹介していきますね。

Dropbox

MVPの事例を探したとき、一番初めにヒットするのがDropboxですね。Dropboxはプロダクト開発をしている最中に、デモンストレーションのビデオを作り、HackerNewsに投稿したことで75,000の事前登録者を獲得することに成功します。サービスを出す前にこれだけ登録者を得られるってすごいですよね。やる気上がりそう。

ProductHunt

今や開発者コミュニティの代表的サイトとなった、ProductHunt。実は創業者のRyanは開発者でもなければ、共同創業者も持たないというバックグラウンド。彼が最初に始めたのはニュースレターでした。投資家や創業者に対して、自分が探したプロダクトの最新情報をメールで送っていたのですね。

Buffer

Bufferは、SNS予約投稿ツールとして不動の地位を築いています。彼らはリリース前に、こういうサービスを作ろうと思っているよ！というランディングページを用意し、事前登録者を誘いました。登録者が増えるたびに、幾らだったら払うかみたいな検証も少しずつ加えていって、プロダクトの検証を進めました。（LPは会議のアイデア機能でも作れるのでぜひ！）

Zappos

カスタマーサポートの神として崇められているオンライン靴ECのZapposも、最初はコストを欠けずに経営していました。彼らは、簡単なホームページを作成し、靴の写真を並べて、在庫は持ちませんでした。ページ上で靴が売れたら、経営者本人が靴を買いにいって配送するという仕組み。

Uber

最近上場した白タクサービスのUberも、リリース時はあんなに立派な位置情報は用いておらず、SMSで近くの車を呼ぶ仕組みでサービスを成立させていました。また、最初は創業者たち自らが車を控えていて、運転手をやっていたそうです。

MVPは、有名サイトのURLをアーカイブで検索して、リリース頃まで巻き戻れば見れるので結構勉強になりますよ〜。

ちゃんと考える

Facebookのマークザッカーバーグも「完璧よりも、まず終わらせろ！」って言ってるし、Linkedinのリードホフマンも「v1.0は恥ずかしいくらいで良い」って言ってます。もうまさに世の中MVP万歳！みたいな空気になってるけど、果たしてそうなんでしょうか。

これだけMVPの良さや事例を書いてきたのですが、僕個人としてはMVPの考えに対して半分賛成、半分懐疑的に受け止めています。どうしてかという理由は2つあって、1つはMVPでダメだったからといって諦めるべきなのかと、MVPでうまくいったら本当にうまくいくかどうか、です。

MVPでダメだったからといって諦める理由になり得ないという点から話していきましょう。ランディングページを出した時点では、そんなに人を集められることができなくても、実際にアプリを出してみたら、バズって多くの人に使ってもらえることになったというのもなくはないのではないでしょうか。

例えば、フリマもTwitterで事前登録を募集した際にはそんなに良き反応なかったんですけど、えいやで作ってみたら、出して初週から成約したり、多くの開発者の方々に出品をしていただけることになった。もちろん、まだまだ成功といえるには程遠いんですが、事前登録を出した時とは思いもよらぬ結果になったのは事実です。

Bufferや、Dropboxの例は興味深いんですけど、LPのようなものを出す場合にはMVPよりもマーケティング的な要素が強いんじゃないかなとも思っています。ただ、そこから事前登録したユーザーの声とか聞いていくと、だんだん検証が取れていくのかもしれませんが。

もう一つの点が、MVPでうまくいったら本当にうまくいくかどうかという点です。いいね！と、本当にお金払うは全然気持ちが違います。無料だったら使う人や、事前登録だったら登録する人はいても、実際にお金を払ってまで使うという人の属性とは違うと思うのです。1000いいね！をもらって誰もお金を払わないプロダクトよりも、0いいね！で10人の顧客がいる方がうまくいっているように思いませんか？

つまり、この2点に対しての僕なりの答えは、MVPは完成品の延長線上にあるべきということです。もし、ECだったらMVPの段階からモノを売るべきだし、SaaSだったら最初からお金を払って使ってもらうべきだと思います。フリーミアムって考え方はあんまり好きじゃないんですよね。MVPのVは、顧客から実用（Viable）ですが、開発者からすると検証可能（Validatable）っていうことです。

もっとちゃんと考える

ここまでは理論の話でした。コストを最低限に抑えて、いけるかどうかの検証ができるのがMVPです。ですが、顧客からしたら「知らねーよ」って話ってわけです。自分が顧客だったら、不完全なものよりも完全なものを使いたがるだろうし、開発者側のテストに付き合うつもりは毛頭ないのです。だから、MVPの段階からちゃんと顧客の欲しいものを作る必要があります。

ここでいうスケートボードを目指したいですよね。スケートボードを使えば、歩くよりも早く移動できるし、車よりも使い方もシンプルで分かりやすい。もちろん、作るにあたっても車よりずっとコストは削減できる。
MVPは、ちゃんと顧客が使う一番の理由を抑えつつ、それをいかに最低コストで開発できるかを考えて開発することなんですね、多分。

少し自分のことを補足すると、冒頭でコードを書かないってことを書いたのですが、そこは本質ではないので無視しても良いと思ってます。僕も開発者なので、むしろコードを書いた方が早い時の方がMVPを素早く作れたりすることの方が多いですし。だいたい、一週間で作れるかどうかをMVPになり得るかどうかで判断していますね。

おわりに

ちょっと最後無理やりまとめた感もありますが、結構海外には成功したスタートアップの創業者たちが、唸るレベルの記事をたくさん残してくれていて参考になるし、勇気が湧いてきます。そういう記事をたくさんシェアしていこうと思っているのが、世界中のユーザーに愛されるプロダクトを作るオンラインサロン「East Hackers」です。6/24にスタートするので、ぜひ事前登録お待ちしてます！（これはMVP！そして宣伝！！）

個人開発でアイデアを出す方法

2019-06-15T10:56:51+09:00

はじめに

個人開発のアイデアを出すのって難しいですよね。厳密に言えば、正しいアイデアを出すのがすごく難しいと思います！「これは絶対イケる！」と思って、今まで散々プロダクトを出してきた人も、期待はずれの結果に苦しめられてきたかと。大丈夫です、僕もその一人です。

デザインや、細かい機能部分については後からでも変えられますが、根っことなるアイデア部分って取り返しがつかないやつです。だからこそ、ヒットするプロダクトを作るためにはアイデア出しがすごく大切なんですよね。
でも、無理やり出そうとすると、決して良いものは出てこないし、自然に出てきたアイデアがベターだと思うんです。

Y CombinatorをつくったPGも「正しいアイデアを出そうとするんじゃなくて、正しいアイデアを出せる人物になれ」とか無茶振りを言っています。（このエッセイはなんども読み返す価値ありです！）今回は、僕が失敗や、上手くいった人たちの経験談を読んで、「確かに。これは当たってそう！」と感じたアイデアを得る方法を紹介していければなと。

自分自身が望むモノを作る

鉄板ですよね。自分が欲しいから作る理論。でも、気をつけなければならないのが殆どの開発者が「自分が作りたいものを作ってしまっている」点ですね。React Native使ってみたいからスマホアプリ！Solidity触ってみたいからブロックチェーンのサービス作ってみるぞ！これは、自分が欲しいからではなく、作りたいから作っているわけですね。

別に作ること自体が悪いわけではないですし、勉強として個人開発をやるには凄く良いモチベーションかと思います！ただ、他の人に作ったサービスを提供しても、使う理由があまりないです。。だから、ちゃんと自分が欲しいものを作りましょう！

エンジェル投資家のジェイソン氏は、欲しいものの例を分かりやすく「ビタミン」と、「鎮痛剤」と比喩してました。これは何かというと、ビタミンは毎日食べてると体が良くなるもの、アイデアのジャンルでいうと、メディアとか、ミニアプリ系がこれに当たりそう。Youtubeとかまさにじゃないですかね。なくて生活困るわけじゃないけど、あると毎日ハッピーになるみたいな！（Youtuberにとっては稼ぎ口なのでなくてはならないものかもしれませんが）鎮痛剤は、言葉通り、痛みに効くアイデアですね。何か困っていることがあって、これを解決するために作るようなイメージですね。Dropboxとか、Gmailとか始めツール系はその性質が強いぽいです。ちなみに、Dropboxは、創業者のドリューヒューストン宿題の論文をUSBに入れて大学でプリントアウトしようと思った時に、家にUSBを忘れたことに気づき、「ファイルはクラウド上にあるべきだ！」と痛みを感じて作り始めたそうです。彼は一人でDropboxの原型を作ったので個人開発の鏡です！

つまりは、自分が困っていたり、あると良いなと思うものを、もっと言えばお金を払ってもよいかどうかを考えて、YES！というものを作る方法です。あんまり技術どうこうは考えなくても良いと思います。

身近な人が困っている課題を解決する

ただ、課題！課題！ってなってると、課題って見つからないんですよね。世の中、特に日本ってすごく便利な国で、たいていのものは既に解決されてるんです。自分で課題が見つけられない場合は、身の回りの人が困っていることを解決しあげるというのはどうでしょうか？

これの良いところは、1つめで話したような「欲しいものではなく、作りたいものを作ってしまう」症候群を避けることができる点です。身近な人は近ければ、近いほど良いと思っています。そして、もっと言えば専門的であればあるほど良いですよね。

例えば、看護師をやっている友だちのスケジュール調整の問題を解決するとか、Youtubeで動画投稿をはじめた友だちがもっと簡単に動画編集できるソフトを作るとか。ただ、自分の問題ではない分、どこまで続けていくモチベーションを保てられるかが勝負になってくると思われます。。

誰かにやって欲しい面倒事に取り組む

個人的には、これが一番好きです。これまた、PGのエッセイから引用したものなのですが。みんながやりたくないことを進んでやる、つまり自分はやりたくないから誰か他の人にやってもらいたいなというアイデアを選ぶ方法です。

典型例が、Stripeです。Stripeは、開発者ならご存知な方も多いと思いますが、決済の仕組みをAPIで提供しているサービス。今でこそ、当たり前になっている決済サービスづくりですが、Stripeがなければ個人開発で決済導入なんて面倒な極みです。その面倒を買って出てくれたのが、Stripeだったわけです。実際、作るのは面倒臭かったらしく、いろんな金融とか決済の会社にアポ取って、赴いて許可もらって、APIを実装していくみたいに進めていったそうです。

個人開発のレベルでそのようなリソースを多分に使うことは難しいかもですが、ヒントとしては頭に入れておいても良いような気がします。日常で生きていると、結構ありませんか？「あ、この問題誰か解決してくれないかなー。」とか思うことって。行列に並んだり、レシートの整理だったり。

別の目標を設定して足りないモノを補完する

問題がないなら、問題を作れば良いのです！今の自分に満足していなければ、それって理想に対して何かが問題で満足していないということですよね。月収100万円だの、ダイエットでマイナス10キロとか、なんでも良いので目標を設定してみましょう。そこに辿り着くために、一番最適な方法を取ってみて、それができないなら何かが問題になっているはずです！これで、問題が生まれるわけです。

月収100万円とか、ダイエットでマイナス10キロとかの目標って、個人的な目標というよりは、広く一般的にも望んでいる人が多そうじゃないですか？もし、こうした目標に対して、それを実現できるサービスを作ることができれば、それを目標にしている多くの人が使ってくれるという理論になりますね！

他のサービスを試してみる

僕は、いつもこのやり方を取るようにしてます。他のサービスを使っていて不足だなとか、もっとこうできるんじゃないかなという形で自分のプロダクトを作る方法です。この発想を幅広で考えていくと、極論インターネットを使ったことがない人がインターネットのサービスを作ることってできないですよね。スマホも然り。

僕らが普段使っているサービス、失敗や脅威を乗り越えて愛されている答えなわけです。そして、次のサービスって今のサービスの補完や、改善から生まれているように感じています。今までホテルっていう便利なサービスを使ってたけど、安くて、楽しく過ごせるなら人の家でもいいじゃんっていうのがAirbnbで、Uberをタクシーに対して同じことを行ないました。

だから、今自分たちが常日頃から使っているサービス（Webサービスやアプリだけでなく）を本当にこれが最適解なの？って疑問を呈してみることで、新しいアイデアが生まれるんじゃないかなと思っています。

さいごに

「これがアイデアを出す方法や！」と書きましたが、ぶっちゃけ自分も上手いアイデアを出せたことはありません。だから、自分が気づいたことまでを紹介したって感じです！開発会議のインタビューとかで、開発者の方がどんなところからアイデアを思いついたか聞いているのですが、やっぱり身近なところを解決しようとするケースが多いかなって思います。

今日から、24日まで学んだことをガンガン共有していきたいと思います！こんな感じでプロダクト開発のノウハウをぶつけ合いたいという方や、お前のアイデア出す方法甘い！俺はこんな感じで出してるぜ！って方は、世界中で愛されるプロダクトを作るためのオンラインサロン「East Hackers」を始めるので、ぜひ覗きにいっていてくれると嬉しいですね！（これは宣伝！）

アニメーションについて1

2019-06-06T02:40:29+09:00

前置き

Unityを触る上でアニメーションはとても大事。らしい。
ま僕アニメーション部分担当した事ないですがw
なので先ずはアニメーションの基礎知識を学ぶのが必要らしいので↓のサンプルを元に勉強して行く。
(動作させた動画も撮ったけどどこにあげていいものかよく分からんので一旦保留。)

3DRunゲーム

(これ画像サイズ調節できる機能ないんか・・？）

障害物をぴょんぴょん乗り越えて行くオートスクロール系の3Drun。
これにはどんな技術が使われてるんだろうか。

Unityアニメーション基礎知識

Mecanim（メカニム）

・UnityにはMecanimと呼ばれるアニメーションシステムがある。
・Unity 4.0から導入されたアニメーションの機能。(ちなみに今はUnityの最新は2019)
・これ、スクリプト書かずにアニメーションが作れる（！？）らしい。

閑話

という事でMecanimを利用する事でプログラマーに頼らずアニメーション担当のスタッフだけでアニメーション部分の作成が可能なのだ！素晴らしい。分担って最高。

という事でアニメーションについてでは基本的にコードは書かず、
Unityの機能Mecanimと仲良くなって行こうと思います。
本格的にUnityのAnimetorコンポーネントとか触って行くのはまた次回。

Mecanimについての詳しい説明は参考サイトの方を見てください。ここに限らずググれば色々出てきます。多分触って覚えた方が分かりやすい感じですが。
ってあれ？この参考サイトにアニメーションの作り方書いてある？w

^o^・・・

ま、まぁ僕の方でもある程度掻い摘んで載せて行きます。
了

参考サイト

Mecanimについて

Unityでゲーム作る(方針のみ)

2019-06-05T02:03:50+09:00

Unityでゲーム作りたい

「ゲーム作るかー」と思ってても中々やらんし、ゲーム案件最近触ってないんで勉強がてらやっていきます。
先ずは記事だけ。明日から触って行く。
暇があったら別記事でhtml5ゲームの方も作ります。今はunity。

技術とか知見になる予定のもの

Unity
UniRx
2D/3D
AR/VR

閑話

俺の考えてるゲーム絶対面白いのに作る時間ないが？
作り方わからんが？

と多少プログラム触ってきたけど「おし、作るか！」から「はい完成！」とはいかないゲーム。
WebGL？iOS？Android？Steam？とかプラットフォーム選別から始めちゃうと「あ、だり」となってやらない事も多い。
「Unityのチュートリアル一通りやったぞwふんw」
って人には不要な記事かもしれない。

基本参考書の順番で作って行く。
2Dアクションゲームが本当は作りたいけど参考書の順番で作って行く。

参考書

Unityゲームプログラミング・バイブル

GatsbyJSでMarkdownの記事を表示させよう

2019-01-22T08:36:53+09:00

GatsbyJSでMarkdownの記事を表示させよう

Markdownファイルをそのまま表示させることは出来ません。
そこで、Markdownファイルを表示するページを動的に生成する必要があります。
Gatsbyでそのようなことをする場合はgatsby-node.jsを使います。
やることは2つです。
+ onCreateNode
+ createPage
onCreateNodeでslugを動的に生成します。(xxx.com/my1stpost/のmy1stpostにあたる部分)
そのslugを元にtempleteファイルを作成し、createPageでpageを生成します。

gatsby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    const blogPost = path.resolve(`./src/templates/blog-post.js`)
      // graphqlからデータの取得
    resolve(
      graphql(
        `
          {
            allMarkdownRemark(
              sort: { fields: [frontmatter___date], order: DESC }
              limit: 1000
            ) {
              edges {
                node {
                  fields {
                    slug
                  }
                  frontmatter {
                    title
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        // 投稿ページの生成
        const posts = result.data.allMarkdownRemark.edges

        posts.forEach((post, index) => {
          const previous =
            index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: post.node.fields.slug,
            component: blogPost,
            context: {
              slug: post.node.fields.slug,
              previous,
              next,
            },
          })
        })
      })
    )
  })
}
  // slugの生成
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

次にblog-post.jsを作っていきます。

import React from 'react'
import { Link, graphql } from 'gatsby'

import Layout from '../components/Layout'
import SEO from '../components/seo'

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (
      
        
        {post.frontmatter.title}
        
          {post.frontmatter.date}
        
        {{ __html: post.html }} />
        

        
          
            {previous && (
              
                ← {previous.frontmatter.title}
              
            )}
          
          
            {next && (
              
                {next.frontmatter.title} →
              
            )}
          
        
      
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

これで準備が出来ました。

確認作業

それでは確認作業をしてみましょう。
gatsby developでサーバーを立ち上げ
http://localhost:8000/aにアクセスしてみましょう。

404と表示されますが上記のようにディレクトリが分かれているのがわかります。ちゃんと/my1stpost/があります。
早速、アクセスしてみましょう！

ちゃんと表示されていますね！お疲れ様でした。

「連載」の記事 - Crieit

Unity練習 セーブデータを作ろうぜ（＾～＾）？

01.人間がAIに支配される未来が来る？

序章「ひとりぼっちPython」

のんびりアルジェブラをやろうぜ☆（＾～＾）＜その４＞

【WPF】PostgreSQL に接続してデータを操作（登録、更新、削除）してみる

【WPF】PostgreSQL に接続してデータを取得して表示する

僕がプロダクト開発を続ける理由

FREERIDERのチートコード

化けるアイデアを生み出すための仮説

チーム開発をやってみた気づきと反省

プロダクトを閉じる時。ピボットで成功しよう

【WPF】自作カレンダー その２（動的生成）

ユーザーヒアリングのすすめ

【WPF】自作カレンダー その１（とりあえず当月を表示）

作って終わらない！スケールしないことをしよう！

プロダクト開発におけるMVPをちゃんと考える

個人開発でアイデアを出す方法

アニメーションについて1

Unity練習　セーブデータを作ろうぜ（＾～＾）？

【WPF】自作カレンダー　その２（動的生成）

【WPF】自作カレンダー　その１（とりあえず当月を表示）