投稿者「masaaki」のアーカイブ

自作のLightningコンポーネントをリファレンス化

masaaki|2018年08月24日
Salesforce

Summer ’18でLightning Component Library(コンポーネントライブラリ)が正式リリース

全国のSalesforce Lightningコンポーネント職人待望の「Lightning Component Library(コンポーネントライブラリ)」が正式リリースされました。

Salesforce Summer ’18 リリースノート

Lightningコンポーネント開発に特化したリファレンスのようです。
いままでLightningコンポーネントの情報っていろんなところに分散してて散らかっている印象があったのですがこれはすばらしい。

既存のリファレンスとの比較表はこちらにありました。
その他のドキュメントサイトとの違い

Salesforce組織にログインしていないときはこちらで見れます。
https://developer.salesforce.com/docs/component-library

ログインしたときは以下で接続可能です。後述しますが基本こちらを見るのをおすすめします。
https://<myDomain>.lightning.force.com/componentReference/suite.app

リファレンスとしての機能

リファレンスがビジュアル化されているので仕様やサンプルソースといった欲しい情報まですぐたどり着けます。

自分が作ったコンポーネントもリファレンス化

組織にログインした状態だと、自分でつくったコンポーネントもリファレンス化されます。
https://<myDomain>.lightning.force.com/componentReference/suite.app

名前空間cからたどれます。

DOCUMENTATIONに記載したExampleが表示されます。

コンポーネント概要とドキュメンテーションの記載

各Attributesの記載も可能です。

今回使用したサンプルコードは以下のとおりです。

SampleComponent.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="SampleController" 
                description= "コンポーネントの説明">

    <aura:attribute name="nickname" type="String" default="World" description="変数の説明"/>

    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
               <h1 class="slds-text-heading--label">Sample</h1>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
   {!v.nickname}
    <ui:button label="btn" press="{!c.myAction}"/>

</aura:component>

SampleComponentController.js

({
	myAction : function(component, event, helper) {
		var action = component.get("c.helloWorld");
        action.setParams({name: component.get("v.nickname")});

        action.setCallback(this, function(res) {
            var state = res.getState();
            if(state === "SUCCESS") {
                component.set("v.nickname", res.getReturnValue());
            }
        });
        $A.enqueueAction(action);
	}
})

SampleComponent.auradoc

<aura:documentation>
    <aura:description>Documentation デスクリプション
        <p>
          <code>サンプルソース</code>
        </p>
    </aura:description>
    <!-- 本来はrefにExample用コンポーネントを指定する?! -->
	<aura:example name="SampleComponent1" ref="c.SampleComponent" label="ラベル名1">
        <p>
            オプションの説明1
        </p>
    </aura:example>
	<aura:example name="SampleComponent2" ref="c.SampleComponent" label="ラベル名2">
        <p>
            オプションの説明2
        </p>
    </aura:example>
    
</aura:documentation>

Lightning Component Library まとめ

Lightningコンポーネント開発に関わる情報が一元化されました。
自分で作ったコンポーネントもリファレンス化されるのでコメント記法も統一化できそうです。

いいんじゃないですか。これからコンポーネント開発が捗りそうです。

今年、エンジニア ライフハックで効果があった施策はこれです

masaaki|2017年12月06日
開発よもやま

はじめに

ランサーズ Advent Calendar 2017 6日目の記事です。

こんにちは。開発部 ビジネスインフラ担当の土屋です。
CakePHP、Ruby on Rails、Salesforceなどを使って社内メンバーが利用する業務システム、会計システムの開発を行っています。
今年2017年は、自分自身のライフハックに取り組んだ1年でした。振り返りの意味でそれを吐き出してみたいと思います。

そもそもライフハックを意識した背景

  • 昨年、パパになりました。早く家に帰りたい理由ができました。
  • 社内の刺激。複業をしているタレント社員やママメンバーが新しいスタイルで成果を出している姿を目の当たりにしました。
  • 役割の幅が増えました。Quant、ランサーズアドバイザー、Pook、ランサーズTOPなど。今年はいろんなサービスが立ち上がりました。

業務や会計フローを作る業務エンジニアとしては誇らしい限りなのですがスキルアップが追いつきません。

今のスタイルの延長線上では詰むと感じ、ライフハックに取り組みました。

タスクを持たないモブプログラミング

モブプログラミングは、同じ場所、同じ時間、同じPCで、同じ課題に挑む開発アプローチです。
開発PCは1台で操作役をドライバーと呼び、それ以外のメンバーをナビゲーターと呼びます。

ミーティング→タスクを数軒追加、持ち帰る→タスクを消化する→が、消化しきれず積まれていく
というフローから
ミーティング→モブプログラミングをしてその場でリリースする→タスクを持たない
という転換をしました。

3H程度マネージャやディレクターに立ち会ってもらい、
その場で要件定義、実装、レビュー、リリースを行うスタイルを取りました。

詳しくはこちらにレポートしています。
https://engineer.blog.lancers.jp/2017/08/mob/

モブプログラミングメリデメ

  • タスク管理コスト減
  • 待ち時間ゼロでリリースできる
  • エンジニアではないメンバーも技術に興味が湧く
  • 技術的に無理、もその場で判る。
  • 事業メンバー vs 開発メンバーから みんな vs 問題の構造になった。
  • 差し込み業務がないのでパフォーマンスUP
  • モテたい一心でパフォーマンスUP
  • 集中しているので疲れる。
  • 待ちが発生してしまうメンバーも。
  • 時間内に完成しない時がある。

朝型シフト

5:00起床、朝食、出勤し、7:00から活動できる状態にしています。
ただ闇雲に早く来ているだけではなくて自分の中にメソッドを設けています。

午前07:00-12:00は重要度高タイム。
午後13:00-18:00は優先度高タイム。
18:00帰宅。

毎日が上手く行くわけではありませんが、この原則に基づいて動いています。

午前中 重要度高タイム

業務にしろ自己啓発にしろ「脳内シェアを奪う何か」を解消するための時間にしています。
例えば、セミナー登壇やLTが入るのは嬉しい半面、資料が作成できていないと焦りが生じて脳内シェアを奪います。
資料が作成できていない状態で当日を迎えると脳内シェアの殆どが埋め尽くされ、業務のパフォーマンスが大幅劣化します。
そうなる前にやっつけてしまおう、という主旨です。

これを実現するためにGoogleカレンダーの平日午前中を以下の名目でロックしています。
「午前中を集中タイムにしたいです。という希望」
こうすることで、本当に緊急な要件以外差し込みが入らなくなりました。

午後 優先度高タイム

締め切りが近づいている開発やタスクに着手します。
ミーティングやモブプログラミングも午後に行っています。
午前中に脳内シェアを空けたので効率はいいと思います。

ミーティングを締め切りとして使うとメリハリが付きます。
定刻になると始まってしまうので、それまでに必要なタスクを消化してアジェンダを立てておく必要があります。
タスクを受け取ったら「2日後に報告のミーティングを入れておきます。」といった具合です。

朝渋

朝型生活が難しい方は朝コミュニティに参加してみてはいかがでしょうか。
自分は朝渋というコミュニティに入っています。
http://asa-shibu.tokyo/
http://asa-shibu.tokyo/2017/10/06/interview-about-1-graduating-class/

朝の渋谷の本屋で著者イベントや部活動が開催され、早起きしたくなっちゃう要素が盛り沢山です。
生活スタイルや働き方に向き合った結果、早起きにたどり着いた方々なので心地良さを感じます。

朝をどうハックするか、という意見交換もしています。
カレンダーロックのアイデアも主催者井上さんから教わったものです。

朝型シフトメリデメ

  • 朝のイベントはお財布に優しいです。夜のイベントと比較すると半額以下です。モーニングとディナーの違いみたいなものでしょうか。
  • 朝のコミュニティを通じてあらためて”働き方”と向き合えるようになりました。
  • 家族の時間が増えました。
  • 遅い時間に始まる飲み会が参加できません。最近は声すらかかりません。すんません。

最後に

今年、効果があったと言えるライフハック「モブプログラミング」と「朝型シフト」を紹介させて頂きました。いかがでしたでしょうか。
他にも開発エディタをVisual Studio Codeにしたとかポモロードアプリ使うとか進行中のライフハックがあるんですが、それはまたの機会に。

タスク管理改善を追い求めたら モブプログラミングになった話

masaaki|2017年08月24日
開発よもやま

ビジネスインフラの土屋です。
社内の業務フロー構築、改善を担当しています。

2017.08.23、Lancers新しい働き方LABで、GYOMU Hackers Night vol.3というイベントが開催されました。
ビジネスチームを支えるシステム管理者や業務エンジニアのための集いです。
そのイベントでLTをさせていただきました。

発表内容

サマリー

  • 変革期(多角期)は、業務エンジニアのタスクが倍増
  • 今までの運用フローでは乗り切れない
  • アプローチの一つとしてモブプログラミングがオススメです

モブプログラミングの感想

モブプログラミングに参加したメンバーはみんな手応えを感じています。
課題はまだまだあると思いますが今後もこのアプローチを活用して事業メンバーの後押しをしていきたいと思います。

Salesforceの人工知能、Einstein (アインシュタイン)の画像認識してみた

masaaki|2017年02月17日
ツール/ライブラリ

こんにちは。土屋です。

現在、ランサーズ社内の業務フローや会計周りの開発を担当しています。
今回はSalesforceの人工知能、アインシュタインについてです。

SalesforceのAI、Einstein (アインシュタイン)は、2017年02月現在、まだ日本では利用できません。
米国圏のみで公開され、リードや商談をスコアリングして営業メンバーをサポートしています。
ただし日本ではAPIパイロット版として画像認識が利用可能となっています。

アインシュタインAPIで画像認識するための手順

まずはサービス登録します。

Einstein Predictive Services
https://api.metamind.io/signup
サインアップが終わると証明書(pemファイル)をダウンロードできます。

先ほどの証明書を使ってトークンを取得します。
自分はトークンの有効期限(Expiration in Mins)を1500にしました。どのくらい延ばせるんですかね。
https://api.metamind.io/token

これで準備が整いました。

画像認識方法

curlで打ってJSONで返ってきます。URL上の画像でもローカルのファイルでも認証可能です。

URLの画像を指定

curl -X POST -H "Authorization: Bearer <トークンID>" -H "Cache-Control: no-cache" -H "Content-Type: multipart/form-data" -F "sampleLocation=<画像のURL>" -F "modelId=GeneralImageClassifier" https://api.metamind.io/v1/vision/predict

ローカルファイル画像を指定

curl -X POST -H "Authorization: Bearer <トークンID>" -H "Cache-Control: no-cache" -H "Content-Type: multipart/form-data" -F "sampleContent=@<ローカルファイルフルパス>” -F "modelId=GeneralImageClassifier" https://api.metamind.io/v1/vision/predict

認証制度を検証してみた

まずはこの画像から。きっと米国圏のモノは認識率高いはずですよね。ただ、全体を写したものではないので難しいかもしれません。

 

curl -X POST -H "Authorization: Bearer トークンID" -H "Cache-Control: no-cache" -H "Content-Type: multipart/form-data" -F "sampleContent=@/tmp/pizza.JPG" -F "modelId=GeneralImageClassifier" https://api.metamind.io/v1/vision/predict
{
    "object": "predictresponse", 
    "probabilities": [
        {
            "label": "pizza, pizza pie", 
            "probability": 0.8296536
        }, 
        {
            "label": "French loaf", 
            "probability": 0.08105719
        }, 
        {
            "label": "burrito", 
            "probability": 0.024039445
        }, 
        {
            "label": "bagel, beigel", 
            "probability": 0.020101538
        }, 
        {
            "label": "dough", 
            "probability": 0.008420182
        }
    ]
}

おぉぉぉ!!やりました。ピザ82.9%です。さすがアインシュタイン!!

次はこの画像。犬は何%で認識されるでしょうか。

{
    "object": "predictresponse", 
    "probabilities": [
        {
            "label": "Chihuahua", 
            "probability": 0.44336274
        }, 
        {
            "label": "Pembroke, Pembroke Welsh corgi", 
            "probability": 0.11063137
        }, 
        {
            "label": "Cardigan, Cardigan Welsh corgi", 
            "probability": 0.05807279
        }, 
        {
            "label": "Great Pyrenees", 
            "probability": 0.037888717
        }, 
        {
            "label": "tennis ball", 
            "probability": 0.033948038
        }
    ]
}

チワワ44%、ウェルシュ・コーギー・ペンブローク11%、ウェルシュ・コーギー・カーディガン5.8%。この犬、ウェルシュ・コーギー・ペンブロークなので惜しい!!
まさか犬種で回答くるとは。テニスボール3.3%も気になりますね。

最後。我らがランサーズ君。アインシュタインはランサーズ君をご存知でしょうか。

{
    "object": "predictresponse", 
    "probabilities": [
        {
            "label": "balloon", 
            "probability": 0.21734992
        }, 
        {
            "label": "mortarboard", 
            "probability": 0.08641696
        }, 
        {
            "label": "street sign", 
            "probability": 0.062016807
        }, 
        {
            "label": "wall clock", 
            "probability": 0.05705674
        }, 
        {
            "label": "bathing cap, swimming cap", 
            "probability": 0.052012373
        }
    ]
}

バルーン21.7%、角帽8.6%、道路標識6.2%、時計5.7%、水泳帽5.2%。。。
アインシュタイン、、、まだまだ勉強不足ですね。

いかがでしたでしょうか。
面白いのでみなさん試してみてください。

文献

Introduction to the Salesforce Einstein Predictive Vision Service (Pilot)

https://metamind.readme.io/v1/docs

Salesforceでサービス連携

masaaki|2016年12月21日
Ruby

こんにちは。masaakiです。

前月の振り返り、今後の方針共有、メンバー紹介、表彰、交流を目的とした決騎会というイベントを毎月実施しています。
つい先日の決騎会でギターを弾く機会があり、死ぬまでに叶えたいドリームリスト100のひとつ「渋谷で大勢の前でライブ」が叶いました。しかもスタンディングオベーション。ありがとうございます。

さて、
ランサーズではSalesforceというCRM製品を導入しています。今回は、どうやって他サービスと繋いでいるかをご紹介します。

ランサーズサービスとの連動

PHPやRubyから接続しています。
Ruby on RailsからSoapforceで接続するのがカンタンです。

rails new salesforce_sample -d mysql
cd salesforce_sample/

Gemfileに追加

gem ‘soapforce’

以下、コンソールでの例です。

rails c
client = Soapforce::Client.new(:host => ‘test.salesforce.com’)
client.authenticate(:username => ‘ユーザー名’, :password => ‘パスワード’)
client.find_where(‘Account’, Name: ‘テスト株式会社’)

upsertも用意されています。存在してたらUPDATE、存在してなかったらINSERTになります。

client.upsert(‘Account’, ‘ClientID__c’, ClientID__c: 5000, Name: ‘テスト株式会社’)

外部キー(この例で言うClientID__c)は、Salesforce側で外部IDフラグをONにしておく必要があります。

チャットワークとの連動

今度はSalesforceからプッシュする方法。
SalesforceにChatterというチャットツールが用意されているのですが、
弊社ではチャットワークを愛用しています。

apexクラス ソース

public with sharing class HelloTest {

    private String myMessage = '';

    public void push() {
        String result = '';
        Http http = new Http();
        HttpRequest request = new HttpRequest();

        request.setEndpoint('https://api.chatwork.com/v1/rooms/ルームID/messages');
        request.setMethod('POST');
        request.setHeader('X-ChatWorkToken', ‘トークン’);
        request.setBody('body=Salesforceから送信');

        HttpResponse response = http.send(request);
        Integer status = response.getStatusCode();
        if (status == 200){
            myMessage = response.getBody();
        }else{
            myMessage = status.format() + response.getBody();
        }
    }

    public String message {
        get{
            return myMessage;
        }
    }
}

Visualforceソース

<apex:page controller="HelloTest">
    <h1>チャットワーク送信サンプル</h1>
    <apex:form >
    <apex:commandButton action="{!push}" value="チャットワーク送信"/>
    </apex:form>
    {!message}
</apex:page>

まとめ

Salesforceはクラウドサービスの老舗というかレジェンドになると思うんですが今年もTwitter買収話とか、アインシュタインとか、鼻息荒い感じがいいですよね。
今後も注目していきたいと思います。

意外とすんなり作れたApple Watch 開発環境

masaaki|2015年03月23日
iOS

 

ランサーズ エンジニアの土屋です。

先日社内勉強会で行った、Apple Watch開発の環境構築内容を共有します。Apple Watch開発するぞ!という方のお役に立てたら幸いです。

Apple Watchについておさらい

2015/03/10のApple Spring ForwardでApple Watchが正式発表されました。
合わせて対応するiOS8.2、xcode6.2正式版が公開されています。
http://k-tai.impress.co.jp/docs/news/20150310_691929.html
http://www.gizmodo.jp/2015/03/apple_watch_57.html

イベントの臨場感出ています。
アップルSpring Forwardイベント速報:12インチMacBook、Apple Watch正式発表
http://japanese.engadget.com/2015/03/09/apple-spring-forward-live-blog/

レシピ

前提条件です。

iOSデベロッパプログラム

https://developer.apple.com/jp/programs/
年間参加費 ¥11,800 (税別)

Xcode 6.2 以上

https://developer.apple.com/xcode/downloads/
6.2からAppleWatch開発環境(watchkit)が入っています。

iOS8.2以上 (iPhone)

8.2にバージョンアップするとアプリ「Apple Watch」が追加されるのですぐわかります。
01_iPhone

前提条件が整いましたら以下、手順になります。

Apple Watch開発環境構築手順

1.まず、iPhoneアプリケーション プロジェクトを生成

xcode起動後、「Create a new Xcode project」を選択します。
次にiOS -> Application -> Single View Applicationを選択します。

02_xcode_project_select

今回はプロダクト名をtestAppとしました。
03_xcode_project_edit

 

2.Watch Kitを追加する

左ツリーのプロダクトにカーソルを合わせます。 メインビューの一番下にLinked Frameworks and Librariesがあります。+ボタンのところからWatch Kitを追加します。
04_xcode_lib

ライブラリ一覧から探すことになるので、Watchで検索します。
05_xcode_lib_add
Linked Frameworks and LibrariesにWatchKit.frameworkが追加されたことを確認します。
06_xcode_lib_add

 

3. Watch Kit Appを追加

いよいよWatch Kitを追加します。File -> New -> Target を選択します。
07_xcode_new_target

AppleWatch ->WatchKit Appを選択します。
08_xcode_watchkit

4. Hello World

Interface.storyboardでUIを作成します。
あとは、いつものiOS開発と同じです。今回はラベルをペコリと貼り付けてみました。
09_xcode_story_board
実行(command+r)します。シミュレーターが起動します。
10_xcode_hello

 

まとめ

  • 開発環境構築は意外とカンタン
  • iOS(iPhone)の上にAppleWatchが乗る構造

以上、AppleWatch環境構築でした。いかがでしたでしょうか。