2020-01-05

2020年気になること

あけましておめでとうございます、株式会社スマレジ、開発部のmasaです。

年末年始、皆さんはいかがだったでしょうか？masaは前回書いた通りインフルエンザで大変でした。。。（先週のブログのときが実は一番辛かった・・・）

今回は、2020年に気になるものをジャンル別に書いていきたいと思います。

1. スマレジ編

今年は何といってもスマレジ4.0ですね。

このブログをご覧いただいているエンジニアの方は、スマレジDevelopesrから登録はお済ですか？

smaregi.jp

ご登録いただくと、スマレジの開発パートナーに関する最新情報が随時届きますので、ご登録をお願いいたします。

2. 世の中編

何といってもオリンピックの年ですよね。日本選手の活躍にも期待ですが、ウチの製品がインバウンドのお客さんに触れてもらう良い機会にもなると思うので、これを機にスマレジが世界に広がればいいなと思います。

3. エンジニア的に気になること

PHPer（といってもほかの言語も書くけど）としては、PHP8の動向がきになりますね。特にJIT。

qiita.com

パフォーマンス問題の多いイメージのあるPHP(PHPが悪いというより、コードの書き方とかバージョンの問題もあるとおもうけど。。。）ですが、これで他の言語に速度面で並ぶことはできるのでしょうか。

4．趣味なこと（どうでもいい）

個人的にはFFCCのリマスター版がでたりと、今年もリマスター熱が熱めで期待しております・・・！

いろいろとイベントが多く、去年にもましてあわただしい1年になると思いますが、

今年もよろしくお願いいたします。

2019-12-29

一年を振り返って

こんにちは！株式会社スマレジ、開発部masaです。

皆様、体調を崩しておりませんか？

masaはインフルエンザにかかってしまい、布団でうなっております。。。

今日はこの一年を振り返ってみようとおもいます。

スマレジでの一年

僕がスマレジに入社したのは、2019年1月1日でした。なので、今年を振り返ること＝スマレジの一年を振り返ることになります。

最初のころは僕は主にWebAPIの開発と保守を担当していました。その後、在庫パッケージの店間移動や軽減税率対応など、幅広く担当させてもらいました。

中でも一番印象に残ったのは、軽減税率対応でした。

軽減税率対応

今だからいえることですが、本当に大変でした。。。なにせいつもの開発と違う部分がたくさんありましたから。

納期がある（スマレジはASPのため、納期という概念が薄い）
仕様がすでに決まっている
今まで以上に他部署との連携が必要

主に異なっていたのはこの三点です。

特に1と2が辛かったです。軽減税率の仕様自体、使用の策定をしている政府ではふわふわしている部分も多かったのに、10月1日施行は揺るがないし…。それもあってか、割とスクラップ＆ビルドな開発だったので、最終的なものを作る以上のコストがかかっていました。

来年の抱負

なんといっても、スマレジ4が来年はあるので、そこに注力したいですね。

詳しいことはいえませんが、社外のエンジニアとの技術的なつながりが濃くなるのは間違いないので、DXにも意識をおいた開発ができるといいですね。

2019-12-22

Lucid Chart APIをたたいて（？）みた（３）（Lucid ChartのテーブルをPHPの配列に変換する）

こんにちは、株式会社スマレジ、エンジニアのmasaです。

今日も前回に引き続き、Lucid Chart APIを触っていきます。前回のブログは↓ masa2019.hatenablog.com

Lucid ChartのテーブルをPHPの配列に変換する

前回、矩形と矢印をSimpleXMLElement型で取得するところまでを実装しました。単純な矩形なら、これだけでも十分扱えそうですが、テーブル構造のものは少々面倒なつくりになっています。というのも...

f:id:masa2019:20191222182446p:plain — 対応関係のサンプル

というように、keyにセルのどの位置かを文字列で渡して、valueにtextを記載している構成なのです。そこまでLucid Chart上で表構造を使い倒す気はないんですが、こういうのって気が付いたときに変換処理を作っておかないと、あとで後悔（結局あっちこっちで表からの取得が独自実装になる。特に多人数開発だと）することになるので、変換用の処理を、前回作ったコンポーネントに追加します。

BaseConponentにエラーメッセージ処理を追加する

今回実装するにあたって、例外で落としたい場合と別に、エラー情報を呼び出し側に返す（処理自体は続行）パターンもあったのでエラー情報を配列にためて、処理実行後に取り出せるようにしました。

BaseConponent.php

    /**
     * エラー情報を設定
     * @param String $errorMessage
     * @param bool $log ログ出力区分
     */
    protected function setErrorInfo(String $errorMessage, $log = true){
        $this->errorInfo[] = $errorMessage;
        if ($log) {
            Log::error($errorMessage);
        }
    }

矩形情報から、テーブル情報だけを取り出す

今回はテーブル構造をもつオブジェクトを配列に変換したいわけなので、特定の型だけを処理する振り分けをする必要があります。 Lucid Chartでは矩形それぞれをclassというプロパティで識別することができるので、今回はそれを利用します。

    /**
     * LucidChartの表構造を表すクラス一覧（TODO::他にあったら追記）
     */
    const LUCID_TABLE_CLASS_LIST = ["DefaultTableBlock",];
    ...(中略)

    /**
     * ページ情報配列を作成
     * @return array
     */
    public function getTableInfos() {
       $blocks = $this->getBlocks();
       $pageInfos = [];
       foreach ($blocks as $block) {
           $aryInfo = (array)$block;
           if (!in_array($aryInfo["class"],self::LUCID_TABLE_CLASS_LIST, true)) {
               //テーブル以外はスキップ
               continue;
           }
           $pageInfos[] = $this->getTableInfo($block);
       }
       return $pageInfos;
    }

変換処理部分

ソースは↓

    /**
     * 一つ分のページ情報を返す
     * @param \SimpleXMLElement $block
     * @return array
     */
    private function getTableInfo(\SimpleXMLElement $block) {
        if (!isset($block->textAreas)) {
            //そもそもの構造がおかしい（もしくはAPIの仕様変更）ので落とす
            $this->setErrorInfo("pageInfo(block->textAreas) is undefined.");
            throw new UnexpectedValueException("pageInfo(block->textAreas) is undefined.");
        }
        $res = [];
        foreach ($block->textAreas as $index => $pageInfoFragment) {
            if (!isset($pageInfoFragment->textArea)) {
                //個々のセルについてはエラーを出すだけ
                $this->setErrorInfo("[$index] textArea is not found.");
                continue;
            }
            $this->addToArray($res, $pageInfoFragment->textArea);
        }
        Log::info("セル情報");
        return $res;
    }

    /**
     * SimpleXMLElement型でkey, valueというメンバを持つ場合、
     * key => valueとなる配列を返す. なかったらfalseを返す。
     * @param \SimpleXMLElement $val
     * @return bool|array
     */
    private function getMap(\SimpleXMLElement $val) {
        $res = [];
        if (!isset($val->key)) {
            return false;
        }

        if (!isset($val->value)) {
            return false;
        }
        $val = (array)$val;
        $key = $val["key"];
        $value = $val["value"];
        $res[$key] = $value;
        return $res;
    }

    /**
     * セル情報を配列に追加
     * @param array $res 追加される配列
     * @param \SimpleXMLElement $fragment 追加する情報
     */
    private function addToArray(&$res, $fragment) {
        $convertedFragment = $this->getMap($fragment);
        if ($convertedFragment == false) {
            $this->setErrorInfo("textArea Property(key or value) is not found.");
            return;
        }
        foreach($convertedFragment as $key => $value) {
            $newIndexString = str_replace(self::LUCID_TABLE_CELL_HEAD, "", $key);
            $newIndex = explode(self::LUCID_TABLE_CELL_INDEX_DELIMITER, $newIndexString);
            if (count($newIndex) != 2) {
                //表なので、x,y座標の二つを想定。それ以外はエラー
                $this->setErrorInfo("key string is wrong.");
                return;
            }
            if (!isset($res[$newIndex[0]])) {
                $res[$newIndex[0]] = [];
            }
            $res[$newIndex[0]][$newIndex[1]] = $value;
        }
    }

getTableInfoで例外を投げているのは、API仕様変更時にダウンさせるためです。こういうの、なまじ空配列とか返しちゃうと、一部で連携できていないことに気が付かないなんてことが・・・。

特に最近では複数のサービスのAPIを組み合わせて使うケースも増えてきていると思いますので、 API側の仕様変更に気が付かなかったときを想定した実装（つまりダウンさせてデータを守る）にしたほうがいいんじゃないかな？と僕は思います。そうしない場合、意図しないDBの書き込みが発生し、データ資産そのものを失う恐れがあるからです。

2019-12-15

Lucid Chart APIをたたいて（？）みた（２）

こんにちは、株式会社スマレジ、開発部のマサです。

今回はLucid Chart APIから取得したXMLをPHPの扱いやすい形にするところをやっていきます。前回のブログ↓ masa2019.hatenablog.com

Laravelでコンポーネントを追加する

参考にしたサイト様↓ saba.omnioo.com

上記のサイト様はLaravel5ですが、6でも同じ手順でできました。

下準備

※doc_root\app\ControllerにComponentを追加する場合、

composer.jsonの下記を追加

        "classmap": [
            "database/seeds",
            "database/factories",
+            "App/Http/Controllers/Component"
        ]

config/app.php

    /*
    |--------------------------------------------------------------------------
    | Class Aliases
    |--------------------------------------------------------------------------
    |
    | This array of class aliases will be registered when this application
    | is started. However, feel free to register as many as you wish as
    | the aliases are "lazy" loaded so they don't hinder performance.
    |
    */

    'aliases' => [
    (中略)...
        /** custom */
        'Component' => 'app/Http/Controllers/Component',

コンポーネントを作る

基底用のクラスをつくる。

namespace App\Http\Controllers\Component;

/**
 * 基底コンポーネント
 * Class BaseComponent
 * @package App\Http\Controllers\Component
 */
class BaseComponent
{
    public function __construct()
    {

    }

}

Lucid Chart用コンポーネント

今回はとりあえず矩形（blocks)と矢印(lines)を取得する部分を実装します。前回のブログではXML文字列をdeveloper kitから取得していましたので、それに合わせたインターフェースにしておきます。本当はアクセスキーとトークンを設定しておくんですが…大人な事情でしばらくはこれで。

namespace App\Http\Controllers\Component;
use http\Exception\UnexpectedValueException;

/**
 * Lucid Chartの矩形読み込みコンポーネント
 * Class LucidComponent
 * @package App\Http\Controllers\Component
 */
class LucidComponent extends BaseComponent
{
    /**
     * 画面遷移図の情報
     * @var null|Object $displayTransitionStructure
     */
    public $displayTransitionStructure = null;

    public function __construct($xmlString) {
        parent::__construct();
        $this->displayTransitionStructure = $this->loadDisplayTransitionStructureByXml($xmlString);
    }

    /**
     * XML文字列の画面遷移図を読み込む
     * @param $xmlString
     * @return bool|Object
     */
    public function loadDisplayTransitionStructureByXml($xmlString) {
        //TODO:画面遷移図のヘッダ情報のチェック

        return simplexml_load_string($xmlString);
    }


    /**
     * 矩形情報を返す
     * @return array
     * @throws UnexpectedValueException
     */
    public function getBlocks()
    {
        if (is_null($this->displayTransitionStructure)) {
            throw new UnexpectedValueException("Structure info(this->displayTransitionStructure) is undefined."); //例外回りはまだ触りつつなので、別の適切なクラスがあればご指摘下さい。。。
        }
        if (!isset($this->displayTransitionStructure->blocks)) {
            throw new UnexpectedValueException("Structure info you set does not have block info. please check your Lucid Chart.");
        }
        $blocks = $this->displayTransitionStructure->blocks;
        $res = [];
        foreach ($blocks->block as $key => $block) {
            $res[] = $block;
        }
        return $res;
    }

    /**
     * 矢印情報を返す
     * @return array
     * @throws UnexpectedValueException
     */
    public function getLines()
    {
        if (is_null($this->displayTransitionStructure)) {
            throw new UnexpectedValueException("Structure info(this->displayTransitionStructure) is undefined.");
        }
        if (!isset($this->displayTransitionStructure->lines)) {
            throw new UnexpectedValueException("Structure info you set does not have line info. please check your Lucid Chart.");
        }
        $lines = $this->displayTransitionStructure->lines;
        $res = [];
        foreach ($lines->line as $key => $line) {
            $res[] = $line;
        }
        return $res;
    }
}

Lucid Chart APIをたたいて（？）みた（１）

こんにちは！株式会社スマレジ、開発部のマサです。本日はLucid Chartを触ってみたので、その備忘録です。 Lucid Chartについては、過去ブログに記載しているので、そちらを見てみてください。

masa2019.hatenablog.com

Lucid Chart APIとは

公式のAPIページ www.lucidchart.com

Lucid ChartはTermプラン以上のユーザにAPIを提供しており、

SSO用の認証
Lucid Chart上で作成した図の離散グラフ情報や画像情報

等、様々な用途のAPIを提供しています。今回はそのうち、図のグラフ情報を利用します。

なぜ触ろうと思ったのか

Laravelのroute機能を触っているとき、「画面遷移」がある程度決まっているなら、 routeの定義もある程度一意に記述できるのではないかと思い、図から定義を自動生成できないかと考えたのがきっかけです。

とにかく呼んでみる

APIの利用はTermプラン以上ですが、図のグラフ情報を取得するだけなら、別の方法があります。

www.lucidchart.com

ここの真ん中位にあるClient side debuggingに、こんな記載があります。

To see what the graph API will give you from a server side call, without having to make a server call, you can open a document in Chrome, open the javascript console (ctrl+shift+j) and type: lucid.getGraphData() This will output an XML string of the graph data for the selected blocks and lines, or if none are selected it will output the state of the entire document.

要は「chromeのディベロッパーツール(F12)のconsoleにlucid.getGraphData()がうちこまれると、離散グラフ情報が取れるよ」というわけです。やったぜ。スマレジもAPI利用可能なプランは少しお高めなので、管理画面からこういう風にコンソールに打ち込んで参照APIのレスポンスを試せるみたいな方法があってもいいかもしれないですね。

ちなみに、LucidChartのAPIはJSONではなくXML形式です。（実は結構古いサービスなんですかね）

例１　シンプルに矩形ふたつを矢印でくっつける

Image

f:id:masa2019:20191208165911p:plain — 例１

XML（documentId,versionは加工しています）

<?xml version="1.0"?>
<document>
  <documentId>xxxxxx-xxxxxxxxxxx-xxxxxxxxxxx-xxxxx</documentId>
  <title>画面遷移</title>
  <version>9999</version>
  <blocks>
    <block>
      <id>pagdsxZzraNR</id>
      <class>ProcessBlock</class>
      <textAreas>
        <textArea>
          <key>Text</key>
          <value>処理1</value>
        </textArea>
      </textAreas>
    </block>
    <block>
      <id>vagdeHN-.b_S</id>
      <class>ProcessBlock</class>
      <textAreas>
        <textArea>
          <key>Text</key>
          <value>処理2</value>
        </textArea>
      </textAreas>
    </block>
  </blocks>
  <lines>
    <line>
      <id>xagd9_EZHdso</id>
      <endpoint1>
        <style>None</style>
        <block>pagdsxZzraNR</block>
      </endpoint1>
      <endpoint2>
        <style>Arrow</style>
        <block>vagdeHN-.b_S</block>
      </endpoint2>
    </line>
  </lines>
</document>

各矩形と矢印にIDが振られているんですね。これは扱いやすい。また、その矩形のスタイルもわたってきます。例えば矢印が黒塗りじゃなく、白塗の場合は<style>Hollow Arrow</style>という風に変わります。見た目によって意味づけする場合は、ここを見て判定すれば処理を分けられそうですね。

例2 表や矢印に文字を入れた場合

Image

f:id:masa2019:20191208171349p:plain — 例２

XML

<?xml version="1.0"?>
<document>
  <documentId>xxxxxx-xxxxxxxxxxx-xxxxxxxxxxx-xxxxx</documentId>
  <title>画面遷移</title>
  <version>9999</version>
  <blocks>
    <block>
      <id>r35cov-kQI~U</id>
      <class>DefaultTableBlock</class>
      <textAreas>
        <textArea>
          <key>Cell_0,0</key>
          <value>detail</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_1,0</key>
          <value>title</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_1,1</key>
          <value>ユーザ情報</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_2,0</key>
          <value>controller</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_2,1</key>
          <value>User</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_3,0</key>
          <value>action</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_3,1</key>
          <value>view/{id}</value>
        </textArea>
      </textAreas>
    </block>
    <block>
      <id>AZ5cyTtONMi9</id>
      <class>DefaultTableBlock</class>
      <textAreas>
        <textArea>
          <key>Cell_0,0</key>
          <value>list</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_1,0</key>
          <value>title</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_1,1</key>
          <value>一覧</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_2,0</key>
          <value>controller</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_2,1</key>
          <value>User</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_3,0</key>
          <value>action</value>
        </textArea>
      </textAreas>
      <textAreas>
        <textArea>
          <key>Cell_3,1</key>
          <value>index</value>
        </textArea>
      </textAreas>
    </block>
  </blocks>
  <lines>
    <line>
      <id>~15cXKeTv-KI</id>
      <endpoint1>
        <style>None</style>
        <block>AZ5cyTtONMi9</block>
      </endpoint1>
      <endpoint2>
        <style>Arrow</style>
        <block>r35cov-kQI~U</block>
      </endpoint2>
      <text>id</text>
    </line>
  </lines>
</document>

ポイントは表の情報は<key>Cell_3,1</key>のようにkeyにindexがはいるところと、矢印に文字列を入れた場合は<text>id</text>のように、endpointと同じ階層にtextが登録されるところですね。

というわけで、APIをたたくところまでを紹介しました。次回は、これをLaravelのコンポーネントに突っ込むところをやろうかなと思います。

2019-12-01

LaradockにStoryBookを入れてみた(Vue.js)

こんにちは！株式会社スマレジ、エンジニアのmasaです。今日は、以前から触っている環境にStoryBookを入れて、アプリ登録までやってみたので、手順を残したいと思います。

StoryBookって？

公式ページ

storybook.js.org

Storybook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment. Learn Storybook to create bulletproof UI components, along the way you’ll build an app UI from scratch. (公式ページIntro to Storybookより)

masa的は作成したフロントエンドアプリを登録するカタログだと思っています。複数プロダクトだしているASPの場合だと、プロダクト間でデザインをある程度統一したかったりするわけですが、プロダクトごとに独立して実装しちゃうと、デザインやUIの変更が発生したときの調査コストがバカにならない。そういうときのために日ごろからStoryBookに登録しておけば、アプリを一覧で見ることができる、大体そんな認識です。

あと、フロントエンジニアとデザイナーとのコミュニケーションツールにもなるのかな。その辺の意見は↓を見て思いました。

qiita.com

masaはバックエンド中心の開発なので、フロントメンバーとデザイナーとのコミュニケーションはそこまで詳しくないです。ただ、スマレジの場合、新しいUIを作成するときはデザイナーさんがワイヤーフレームを作成してくれるので、フロントアプリのレビュー時に ↑のStoryBookがなぜ必要かで書かれているような、「ワイヤーフレームとデザインちがうやん」みたいな突っ込みは作った当人以外なら誰でも突っ込めます（実際突っ込む）。だから、UI部品作成毎に登録だけでもしてくれると、すぐにフィードバック返せて手戻り防止にもなる（かも？）とは思います。

バックエンドが関係する話だと、APIのインターフェースを一緒にここに書いちゃえるとこですね。特にフロント専門の人だと、「API周りは既存資産のコピペじゃないと作れない。。。」みたいな場合もあるとかないとか。ただ、作った時はいいですが、回収したときにStoryBook側のメンテもやらないといけないので、そこは改修フローに入れておかないとだめですね。

まずは入れてみる

※現在の構成については過去のブログ masa2019.hatenablog.com をご参照ください。

参考にしたサイト様

qiita.com

まずは、dockerコンテナに入って、フロントエンドの作業ディレクトリまで移動。

cd <your laradock path>/laradock
docker exec -it laradock_workspace_1 bash #人によってworkspace名は違うかも。これはデフォルト
cd <your path to frontend work directory>/frontend

でStoryBookをインストール

# Storybook for Vue のインストール
$ npm i -D @storybook/vue

StoryBookのデフォルトのポート番号は6006。違うポートにしたい場合はpackage.jsonに追記。

{
  "scripts": {
    "storybook": "start-storybook -p <利用したいポート番号> -c .storybook",
    "buid-storybook": "build-storybook -s public"
  }
}

新しいポートを解放してあげる必要があるので、laradock側のdocker-composeをちょっと変える。

### Workspace Utilities ##################################
    workspace:
    (中略)
      volumes:
        - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}${APP_CODE_CONTAINER_FLAG}
      extra_hosts:
        - "dockerhost:${DOCKER_HOST_IP}"
      ports:
        - "${WORKSPACE_SSH_PORT}:22"
        - "6006:6006"
      ...

.storybook/config.jsを作成。この時、sassやstylusを入れている場合は、パスを合わせて書いてあげる必要があります。

import { configure } from '@storybook/vue';
import Vue from 'vue';
const req = require.context('../src/stories', true, /\.stories.js$/);
configure(req, module);
//stylusの読み込み
defaultConfig.module.rules.push({
    test: /\.styl$/,
    loader: 'style-loader!css-loader!stylus-loader'
});
import HelloWorld from '../src/app1/components/HelloWorld';

Vue.component('item', HelloWorld);

function loadStories() {
//なぜかrequre()でパスが解決できなかった(フルパスにしてもだめ。webpackの設定なにかいるんかな。。。）ので、公式ドキュメントに記載されていた方法で
//    require('../src/stories');
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

あわせて、webpack.config.jsを作成し、stylus情報を書きこみます。この辺りは↓サイト様を参考にしました。 qrunch.net

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                test: /\.styl(us)?$/,
                use: [
                    'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'stylus-loader'
                ],
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.styl'],
        alias: {
            'assets': path.resolve('path/to/assets'),
            '~': path.resolve(__dirname, '../')
        }
    }
};

今回は前々回つくった、VuecliのHelloWorldページの一部のリンクをaxiosでとってきているVueを登録してみます。

import { linkTo } from '@storybook/addon-links';
import HelloWorld from './../app1/components/HelloWorld';

export default {
  title: 'HelloWorld',
};

export const toStorybook = () => ({
  components: { HelloWorld },
//ここでつくったテンプレートを呼び出す。
    template: '<HelloWorld :ecosystems="[{\'link\': \'hogehoge\',\'name\': \'welcome to StoryBook!\'}]" />',
//今は要らない（と思う）
  methods: { action: linkTo('Button') },
});

toStorybook.story = {
  name: 'to Storybook',
};

でnpm run storybookすると・・・

f:id:masa2019:20191201193139p:plain — こんな感じに

ちゃんと、:ecosystemsで設定した配列も反映されています。

やって感じたこと

StoryBookは、パーツを作って、それをカタログ登録して、という２段階の実装になるんですね。カタログ登録のほかにもテスト機能もあるので、想定される入力パターンを列挙して、その時の表示を確認する・・・みたいな使い方ならありかも？登録だけする運用なら、カタログ登録の省エネ化がいるなーと感じました。単純に手間が増えちゃうので。

2019-11-24

すでにファイルが存在するフォルダにgit hubのremoteを設定する

こんにちは！株式会社スマレジ、開発部のmasaです。

軽減税率が始まって、もうすぐ二か月・・・。軽減ってついているのに増税されている違和感に皆様離れましたでしょうか？私は慣れません。

今日は、タイトルの通りついやっちゃいがちなgit repositoryを作る前に開発始めちゃったときの備忘録です。

Git リポジトリを作り忘れるのは・・・

がっつり「〇〇をつくるぞ！」って思っているときは忘れないものなんですが、触ったことのないフレームワークとか環境をお試しで触ってて、そのままごちゃごちゃいじり倒していると、「あー、このままこれに作っちゃいたいな」と思うことってないですか？私はしょっちゅうです。

で、毎回リモート設定をググるのもアレなので、備忘録。

1. SourceTreeでCreate

f:id:masa2019:20191124105405p:plain

2. git hubで新しいプロジェクトを作成し、Clone用のURLを取得

f:id:masa2019:20191124105837p:plain

3. 1で作ったリポジトリをSourceTreeで開くと、リモートが！になるのでクリック

f:id:masa2019:20191124110051p:plain

4. 「設定ファイルを編集」を押して、↓の画面のマーカー部分に2のURLを貼る

f:id:masa2019:20191124110321p:plain

5. いつも通りcommit して pushすればリモートにソースが上がる。

masa2019’s blog

株式会社スマレジの開発部でスマレジのサーバサイドを作っています

2020年気になること

一年を振り返って

スマレジでの一年

軽減税率対応

来年の抱負

Lucid Chart APIをたたいて（？）みた（３）（Lucid ChartのテーブルをPHPの配列に変換する）

Lucid ChartのテーブルをPHPの配列に変換する

BaseConponentにエラーメッセージ処理を追加する

矩形情報から、テーブル情報だけを取り出す

変換処理部分

Lucid Chart APIをたたいて（？）みた（２）

Laravelでコンポーネントを追加する

下準備

コンポーネントを作る

Lucid Chart用コンポーネント

作ったコンポーネントを使う

Lucid Chart APIをたたいて（？）みた（１）

Lucid Chart APIとは

なぜ触ろうと思ったのか

とにかく呼んでみる

例１　シンプルに矩形ふたつを矢印でくっつける

例2 表や矢印に文字を入れた場合

LaradockにStoryBookを入れてみた(Vue.js)

StoryBookって？

まずは入れてみる

やって感じたこと

すでにファイルが存在するフォルダにgit hubのremoteを設定する

株式会社スマレジの開発部でスマレジのサーバサイドを作っています

スマレジでの一年

軽減税率対応

来年の抱負

Lucid ChartのテーブルをPHPの配列に変換する

BaseConponentにエラーメッセージ処理を追加する

矩形情報から、テーブル情報だけを取り出す

変換処理部分

Laravelでコンポーネントを追加する

下準備

コンポーネントを作る

Lucid Chart用コンポーネント

作ったコンポーネントを使う

Lucid Chart APIとは

なぜ触ろうと思ったのか

とにかく呼んでみる

例１ シンプルに矩形ふたつを矢印でくっつける

例2 表や矢印に文字を入れた場合

StoryBookって？

まずは入れてみる

やって感じたこと

例１　シンプルに矩形ふたつを矢印でくっつける