moyashidaisuke's diary

平日はエンジニア、土日はミュージシャン(自称)のダイスケです。プログラム関連とかギター関連とかなんでも。

はてなブログ「Material」テーマのカスタマイズ

前回はMaterialテーマを設定しました。

moyashidaisuke.hatenablog.com

数ヶ月たっていくつか気になるところが出てきたので、色々カスタマイズします。

headingタグ(h1、h2とか。見出しタグ)

before

f:id:moyashidaisuke:20180718202115p:plain

h1とh2とh3がほぼ同じ見た目なので、記事のブロックがわかりにくいです。 こういう事です。私にはほぼ同じに見えます。

after

f:id:moyashidaisuke:20180718214003p:plain

かっこよくなりました。

やったこと

fontawesomeの設定

www.marorika.com

これだけでは見た目変わりませんが、この後使います。

cssの設定

hitsuzi.hatenablog.com

こちらの「みだし3種」を参考にいれました。

コードはこちらです。 - h1〜h3を対象に変光 - 色の変更(テーマカラーに合わせています) - 文字サイズをいい感じに調整 - marginとかpaddingをいい感じに調整

.entry-content h1 {
  padding: 4px 10px;
  background: #f3f3f3;
  border-left: 8px solid #3F51B5;
  margin:80px 0 30px 0;
  font-size: 180%;
}
.entry-content h2 {
  position: relative;
  border-bottom: 4px solid #f3f3f3;
  padding: 3px 10px;
  margin:40px 0 30px 0;
  font-size: 140%;
}
  
.entry-content h2::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background:#3F51B5;
  z-index: 2;
  content: '';
}
.entry-content h3 {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.4;
  margin:30px 0 8px 0;
  font-size: 130%;
}
.entry-content h3:before{
  font-family: Font Awesome\ 5 Free;
  /*アイコンユニコード*/
  content: "\f00c";
  /*アイコン色*/
  color: #000; 
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
}

これを、「デザイン」->「カスタマイズ」->「デザインcss」に追記しています。(追記じゃないと以前の変更が消えちゃうので追記です)

本文の調整

本文って言っているのは、h1とかじゃないところです。ここみたいなメインの文章ですね。

headingタグをいい感じにした結果、本文が - 左に寄りすぎている - 行ごとの隙間がせまい

と思ったので調整します。

before

f:id:moyashidaisuke:20180718215050p:plain

after

f:id:moyashidaisuke:20180718215544p:plain

すきまが多くなって見やすくなったと思います。

やったこと

.entry-content p{
  margin:0 1em 1.5em 1em;
  line-height: 27px;
}

これをさっきと同じく、「デザイン」->「カスタマイズ」->「デザインcss」に追記しています。

font変える

before

f:id:moyashidaisuke:20180719231259p:plain

after

f:id:moyashidaisuke:20180719231715p:plain

やったこと

body {
    font-family: "メイリオ", Meiryo;
    color: #555555
}

フォントの変更と、ちょっと色が薄すぎるな、と思ったので色の調整です。

これもさっきと同じく、「デザイン」->「カスタマイズ」->「デザインcss」に追記しています。

SNSボタンかっこよく

before

f:id:moyashidaisuke:20180719234552p:plain

after

f:id:moyashidaisuke:20180719234604p:plain

やったこと

Materialテーマの作者さんの紹介記事そのままです。

webgaku.hateblo.jp

最終的なデザインCSS

/* <system section="theme" selected="8454420450093337097"> */
@import url("https://blog.hatena.ne.jp/-/theme/8454420450093337097.css");
/* </system> */


/* 2カラムレイアウト */
#container #content {
  width: 1160px;
}
#main {
  width: 800px;
  float: left;
}
#box2 {
  width: 300px;
  padding: 24px;
  float: right;
  margin-top: 0;
  margin-bottom: 60px;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: slideRight;
  -webkit-animation-name: slideRight;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(6.25em);
    transform: translateX(6.25em);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideRight {
  0% {
    -webkit-transform: translateX(6.25em);
    transform: translateX(6.25em);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
#box2-inner {
  width: auto;
}
.hatena-module {
  text-align: left;
  padding-right: 0;
  width: 300px;
  float: left;
}
@media (max-width: 1024px) {
  #container #content {
    width: 95%;
  }
  #main, #box2, .hatena-module {
    width: 100%;
    float: none;
  }
  #box2 {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: initial;
    -webkit-animation-duration: initial;
    -webkit-animation-duration: initial;
    -webkit-animation-fill-mode: none;
    -webkit-animation-fill-mode: none;
    -webkit-animation-name: initial;
    -webkit-animation-name: initial;
    -webkit-animation-timing-function: initial;
    -webkit-animation-timing-function: initial;
  }
}

/* Responsive: yes */


.entry-content h1 {
  padding: 4px 10px;
  background: #f3f3f3;
  border-left: 8px solid #3F51B5;
  margin:80px 0 30px 0;
  font-size: 180%;
}
.entry-content h2 {
  position: relative;
  border-bottom: 4px solid #f3f3f3;
  padding: 3px 10px;
  margin:40px 0 30px 0;
  font-size: 140%;
}
  
.entry-content h2::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background:#3F51B5;
  z-index: 2;
  content: '';
}
.entry-content h3 {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.4;
  margin:30px 0 8px 0;
  font-size: 130%;
}
.entry-content h3:before{
  font-family: Font Awesome\ 5 Free;
  /*アイコンユニコード*/
  content: "\f00c";
  /*アイコン色*/
  color: #000; 
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
}

.entry-content p{
  margin:0 1em 1.5em 1em;
  line-height: 27px;
}


body {
    font-family: "メイリオ", Meiryo;
    color: #555555
}




.sns-header, .sns-footer {
    padding: 0 24px;
}

.sns-area {
    margin: 30px auto 10px;
    padding: 0;
    overflow: hidden;
    table-layout: fixed;
    display: table;
    width: 100%;
}

.sns-area li {
    list-style-type: none;
    display: table-cell;
    vertical-align: middle;
}

.sns-area li:last-child {
    margin-right: 0
}

.sns-link {
    position: relative;
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    height: 42px;
    line-height: 42px;
}

.sns-link::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background-color: rgba(255,255,255,.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.sns-link:hover {
    text-decoration: none;
}

.sns-link:hover::after {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}
@-webkit-keyframes circle {
    50% {
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
    }
}
@keyframes circle {
    50% {
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
    }
}

.sns-twitter {
    background: #55acee;
}

.sns-facebook {
    background: #3a5795;
}

.sns-bookmark {
    background: #00A5DE;
}

.sns-pocket {
    background: #ED4055;
}

.blogicon-twitter,
.blogicon-facebook,
.blogicon-bookmark,
.blogicon-chevron-down {
    margin-right: 5px;
}

@media only screen and (max-width: 767px) {
    .sns-txt {
       display: none;
    }
   .blogicon-twitter,
   .blogicon-facebook,
   .blogicon-bookmark,
   .blogicon-chevron-down {
       margin-right: 0;
   }
}


/* 読者になる */
.hatena-follow-button {
  color: #fff !important;
  background: #4eacd1!important;
}

だんだん大げさになってきて、管理が大変そうになってきました、、、

Unityのビルドでエラー「com.android.dex.DexException: Multiple dex files define」

とあるassetを追加後に発生。

CommandInvokationFailure: Gradle build failed. 
/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home/bin/java -classpath "/Applications/Unity5.6/PlaybackEngines/AndroidPlayer/Tools/gradle/lib/gradle-launcher-2.14.jar" org.gradle.launcher.GradleMain "assembleDebug"

stderr[

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/actions/ItemListIntents;

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
]
stdout[
Incremental java compilation is an incubating feature.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest

〜省略〜

BUILD FAILED

Total time: 1 mins 14.779 secs
]
exit code: 1
UnityEditor.Android.Command.Run (System.Diagnostics.ProcessStartInfo psi, UnityEditor.Android.WaitingForProcessToExit waitingForProcessToExit, System.String errorMsg)
UnityEditor.Android.GradleWrapper.RunJava (System.String args, System.String workingdir, UnityEditor.Android.Progress progress)
Rethrow as GradleInvokationException: Gradle build failed
UnityEditor.Android.GradleWrapper.RunJava (System.String args, System.String workingdir, UnityEditor.Android.Progress progress)
UnityEditor.Android.GradleWrapper.Run (System.String workingdir, System.String task, UnityEditor.Android.Progress progress)
UnityEditor.Android.PostProcessor.Tasks.BuildGradleProject.Execute (UnityEditor.Android.PostProcessor.PostProcessorContext context)
UnityEditor.Android.PostProcessor.PostProcessRunner.RunAllTasks (UnityEditor.Android.PostProcessor.PostProcessorContext context)
UnityEditor.HostView:OnGUI()

原因はjarなり、aarなりが重複している事。 追加されたファイルを確認し、似たような名前のjarやaarが無いか確認。 合った場合、バージョンが古い方を削除すればOK。

例のごとく、assetにplay-store系のjarやaarが直接含まれている場合に起こりがちなエラー。

今回は、以下の2つが重複していました。

play-services-basement-11.0.4.aar com.google.android.gms.play-services-basement-15.0.1

「play-services-basement-11.0.4.aar」を削除すればOK。

UnityのiPhoneX対応で苦労したポイントメモ

当時のログがあまり残ってないのもあって、不完全ですが、メモという事でご容赦ください。

やるべき事(ざっくり)

Submitting iOS apps to the App Store - Apple Developer

moyashidaisuke.hatenablog.com

  1. iOS 11 SDKでビルドする
  2. iPhoneXのSupreRetinaディスプレイに対応する

iOS 11 SDKでビルドする

必要要件の確認

iOS 11 SDKでビルドするためには、XCodeの9以上にする必要があります。

qiita.com

そして、XCodeの9.0〜9.2まではSierra、9.3以降はHighSierraに更新する必要があります。(9.2でSierraという組み合わせも考えられなくは無いですが、敢えて古いバージョンを使う理由がなければ、この際最新にした方が良いと思います。)

そして、HighSierraにするには、Unityのバージョンが問題になる事があります。

helpdesk.unity3d.co.jp

最低でもUnity 5.5.4p5 以上が必須になります。

必要要件まとめ

  • iOS 11 SDK
  • XCodeの9以上
  • HighSierra
  • Unity 5.5.4p以上

はい、明らかに大変そうな予感がぷんぷんします。 特にしんどそうなのが、Unityのバージョンアップが必要な場合です。

変更前 * iOS 11 SDK * XCodeの9.3 * HighSierra * Unity 5.6.

にを採用する事にしました。 Unityが5.6系なのは2017系だと更新が激しすぎてしんどそうだったためです。 5.5系よりは寿命が長そうとの判断もあります。(5.X系の最新なので)

もろもろバージョンアップ

OSのアップデート

普通にやればOK

XCodeのアップデート

普通にやればOK

ビルドで失敗する、、、(iOS) podが壊れてるっぽいエラーが出てたので最新化したら通りました。 https://qiita.com/Yuta/items/a20f4ea3207635b4ef9e

Unityのアップデート

インストールまでは普通にやればOK。 基本的には既存のUnityとは別でインストールする事をおすすめしますが、今回はHighSierraにした時点で過去のUnityが使い物にならなくなるので、上書きでも良いと思います。

コンパイルエラー潰す

gettype使えない対応 http://tsubakit1.hateblo.jp/entry/2016/11/25/235315#Unity-55%E4%BB%A5%E9%99%8D%E3%81%AE%E5%A0%B4%E5%90%88

targetSDKVersionはどちらにしろあげないといけないので、全て26に統一しました。

iPhoneXのSupreRetinaディスプレイに対応する

自分で書いたアプリのディスプレイ対応

Unity公式のを参考に

chocolattips.hatenablog.com

外部ライブラリ対応

あと、外部ライブラリを使っている場合、ライブラリの更新が必要になるケースが多いです。(広告とか)

これがまた大変です、、、

Unityのライブラリはunitypackageという、関連ファイルをまとめたものを展開する方式が一般的ですが、これは上書き機能しかありません。

Aというファイルが、新しいsdkでAというファイルのまま更新される分には問題ないですが、AというファイルがBというファイルにリネームされた(ディレクトリ構造が変わった場合含む)場合、sdkを更新してもAというファイルは残り続けます。 古いファイルが残っていると、大体コンパイルエラーで動かなくなります。

なので、sdkを更新する前に、古いsdkのファイル郡を一旦削除する、という手順を踏む事になりますが、そもそもどれかunitypackageから展開されたものなのか、という関連性はどこにも残っていません。 バージョン管理しているのであればその履歴から、ディレクトリにまとまっているものであればディレクトリ単位で削除、といった手段が考えられますが、これも問題があります。

削除してくれるAssetもあったようですが、今見たら入手不可能になっていました、、

baba-s.hatenablog.com

中にはお作法が悪くて、ディレクトリがまとまってないものが存在したり、インポートした後に、手動でマージ(AndroidManifest等)を強制されるライブラリもあったりするので、試行錯誤して消すしかありません。 AndroidManifestといえば、一生懸命書いた既存のAndroidManifestを無慈悲に上書きしようとしてくるやつもいるので注意が必要です。

また、native系のファイル(jarとか)も同じようなもので、昔のやつだとplaysotre系のjarとかaarが直接unitypackageに含まれていて、それが別のライブラリに含まれているバージョンと競合したりします。

unitypackageとのひもづけをproject上に残しておいて、一括で削除する機能、公式でください、、、

Android64k問題

trouble writing output: Too many field references to fit in one dex file: 92846; max is 65536.

qiita.com

sdkを更新したらなぜか死ぬほど増えた。

MultiDexビルドも頑張ってやったけどアプリが安定せず、困ったな〜と思ってたら、5.6で追加されたgradleでのビルドにしたらあっさり通った。

docs.unity3d.com

特に Unity では、DEX (Dalvik Executable 形式) ファイルのメソッド参照数が減少します。つまり、DEX 制限問題に遭遇する可能性は低くなります。

特にカスタムすることなく、デフォルト設定であっけなく動いた、、、

UnityでAndroid64k問題にぶちあたった場合は、是非試してみてください。

感想

iPhoneX対応うんぬんより、unitypackageの更新しんどい問題が一番やばかった、、、

UnityでAndroid O向けに通知をする

概要

Android O では通知にChannel(チャンネル)という概念が導入されています。

Android O というのはAndroid8系の事で、APIバージョン26でAndroidManifestで言う所のtargetSdkVersion=26の事です。

で、Channelというのは通知をグルーピングして設定を変えたりできる類のものなのですが、Android O ではこの新機能のChannelを使う事が必須になっています。

使わない結果は↓の通りです。 チャンネルが無いよ(No Channel found)ってエラーが出ます。

07-08 13:28:25.682 1152-2944/? E/NotificationService: No Channel found for pkg=com.XXXXX.XXXXXXX, channelId=null, id=560, tag=null, opPkg=com.XXXXXX.XXXXXX, callingUid=10219, userId=0, incomingUserId=0, notificationUid=10219, notification=Notification(channel=null pri=0 contentView=null vibrate=[250,500,250,500] sound=android.resource://com.XXXXXX.XXXXXX/2131034112 defaults=0x4 flags=0x11 color=0x00000000 vis=PRIVATE)

当然Unityでも通知はAndroidの機能を使っていますので影響がありますので、既存アプリで通知機能があるアプリは更新が必要です。

対応案

案1:targetSdkVersionを25以下にする

急場はしのげるかもしれませんが、2018年の後半にはtargetSdkVersion=26以上がアプリの更新に必要となりますので、おすすめできません。 www.telemarks.co.jp

案2:自前で実装する

Androidのネイティブ処理詳しい方はどうぞ。 公式にサンプルコードがあります。

Notifications Overview  |  Android Developers

案3:Assetを使う

AssetStoreで通知(Notification)で検索すると、Assetがけっこうな数ヒットします。 Asset Store

ここで気をつけなければいけないのが、「Android Oに対応してる」「Channelに対応している」と明記されているかどうかです。

f:id:moyashidaisuke:20180713013615p:plain

こんな感じで書いてあれば多分大丈夫。更新が2017年の8月より昔のもの(まだAndroid Oが出ていない)や、明記されてないものは動かない可能性が高いです。

今回はこれを使ってみましたが、どれもそんなに変わらないと思います。

Android Local Notification Plugin - Asset Store

実装例

初期処理

private const string ANDROID_CHANNEL_ID = "channel1";

void Start(){
       #if UNITY_EDITOR
        // nothing
       #elif UNITY_IOS

       #elif UNITY_ANDROID
        LocalNotificationUnity.CreateChannel(ANDROID_CHANNEL_ID, Define.APP_TITLE, Define.APP_TITLE, NotificationImportance.HIGH, true, true, "soundName", NotificationSoundContentType.UNKNOWN);
       #endif
    }

割と適当ですが、こんな感じで最初に起動する処理のStart() あたりでChannelを作ってあげましょう。 Channelを複数作って〜という事であればもっと複雑になりますが、とりあえず通知したいだけならこれで十分。 通知の時の音とかもこのタイミングで指定するようです。

通知処理

public static void SetAndroidLocalNotification(int id, int sec, string body){
       #if UNITY_EDITOR
        Debug.Log("localnotify " + body);
       #elif UNITY_ANDROID

        DateTime now = DateTime.Now;
        TimeSpan secTS = new TimeSpan(0, 0, sec);
        LocalNotificationUnity.SendNotification(ANDROID_CHANNEL_ID, Define.APP_TITLE, body, now.Add(secTS), id);

       #endif
    }

このAssetはDatetimeを引数に取るタイプだったので、使いやすいようにラップする関数を適当に作ります。 通知するChanelも一緒に指定しますが、今回は1Channelしかないので固定値でOK。

つぶやき

  • iOSはUnityの組み込み処理で通知ができるのになぜAndroidは無いのか
  • このAssetは全部キャンセル処理がなぜか無かったです、、、
  • Channel必須にしなくてもいいのになぁ、、、

アプリのiPhoneX対応の必須化は更新も対象になったよ、という話

以前似たような記事を書いた時は必須じゃなかったのが必須になりました。

↓以前の記事 moyashidaisuke.hatenablog.com

オリジナルのソース

developer.apple.com

 Starting July 2018, all iOS app updates submitted to the App Store must be built with the iOS 11 SDK and must support the Super Retina display of iPhone X.

2018年7月から、全てのiOSアプリの更新で、iOS11SDKとSupreRetinaディスプレイの対応が必須になる、との事です。 なので、この記事を書いている今は既に必須になっています。

思ったより早かったですね、、、

時系列でまとめると、

  • 2018/2 「2018/4」から新規の時にiPhoneX対応が必須になるよアナウンス
  • 2018/4 新規の時にiPhoneX対応が必須になる
  • 2018/5 「2018/7」から更新も含めてiPhoneX対応が必須になるよアナウンス
  • 2018/7 更新の時にもiPhoneX対応が必須になる

Apple厳しいな〜と思っていたら、Androidでも同じような話があるようなので、こちらも注意が必要そうです。

qiita.com

近況報告と振り返り

1ヶ月くらいブログの更新が滞ってたので近況報告と、自分向けの振り返りを兼ねて。

最近どうしてたの

忙しかったです。連絡が滞っててしまい、関連各所の皆様については申し訳なかったです。

  • 仕事でメインでやってる複数プロジェクトのリリース時期が同じくらいになってしまう
  • 知り合いのお手伝い案件のリリース時期も同じくらいになってしまう
  • 急遽AWS Summitでちょっと話す事になった

というわけで、ずっと仕事してた気がする、、、 倒れるほど働くとかブラックな感じではないですが、めっちゃ集中して作業して疲れ果てて余裕なくなってました。

ギターも弾かず、旅行にも行かず。

お仕事

みんれびというエンディング(葬儀関連)業界のITスタートアップに転職して、1年ちょっと経ちました。

moyashidaisuke.hatenablog.com

1年間振り返り

次の4年半でやりたい事と転職理由
できなかった事の裏返しになってしまうですが、ゲームじゃないサービスにじっくり取り組んで見たかったのが一番大きいです。
あと、もっと組織に食い込んで影響範囲広げつつ、社外でももっと活動したいと思っています。

元々考えてた目的はけっこう叶えられているので、転職して良かったな〜と思います。

  • ゲームじゃないサービス
    • やってます
    • 運用も新規も両方
  • 組織に食い込んで
    • マネージャーという肩書をいただいて、採用活動からやっています
  • 社外でももっと活動
    • (最近行けてないですが)勉強会行ってLTしたり
    • AWS Summitでも話しました

できるようになった事、チャレンジした事 [技術面]

  • インフラ周り
    • AWSと周辺サービスがっつり使って設計、構築
    • 結局全部作り変えた
    • 最近はコンテナ
      • 2018/7に東京リージョンで使えるようになるFargate待ち遠しい
    • サーバレスもいいよね
  • 手法とか
    • TDD始めました
      • テスト書きながら作った方が総合的には早いくらいまでは慣れてきた
    • DDD始めました
      • ある程度うまく行った事例を作れた
  • 言語、FWとか
    • Laravelがっつり
      • 前職で最後の方だけ使ってたけど、リリースされたサービスで使ったのは現職から
      • webにおいて必要な機能は大体網羅されてて、特別な要件が無い場合に潰しがきくFW
      • 制約のきつさが個人的にちょうど良い(きつすぎでもなく緩すぎでもなく。使い方で調整できる
      • DDDと相性良い
    • Go始めました
      • 過去のしがらみ(闇)が少ない新しい言語ってのは良いですね
      • 良くも悪くも枯れてないのでライブラリの選定(そもそも使わないという選択肢も)が大変
    • vue.js始めました
      • 社内ツールは冒険できるので使い始めた
      • 完全新規だとNuxt.jsが素晴らしい
        • そもそもSPAはアーキテクチャとしてクライアントとサーバサイドが分離されて綺麗(HTMLをレンダリングする処理がPHPとjs混在してぐちゃらない)
        • そもそもSPAはユーザー体感的に速い
        • Nuxtも良くできていて、少しだけルール覚えれば簡単に作れる
        • SSRも勝手にやってくれる
        • コンポーネントっていいよね(htmlとjsとcssがセットで管理できる、、、)
        • cssのscopedいいよね
        • 早く本サービスで使いたい
    • GitHub始めました
      • あこがれのPRで開発

振り返ってみるとけっこう色々やりましたね、、、 SPAはユーザー体験が変わるので、本格的にチャレンジしたいです。他のも大事ですが、エンジニア以外には価値を説明しにくいやつですね、、、

  • スピード感もって
    • できるだけサービスに注力
      • それ以外はできるだけ楽する
  • でも負債はできるだけ抑えて
    • 過去の負債とは戦いつつ
  • 世の中のデフェクトには置いてかれないように
  • しかも限られた工数で

というそれぞれ相反するもののバランスを取りながらやらなきゃいけないのがスタートアップですが、まあまあ良くやれたんじゃないでしょうか。

クライアントはNuxtで作って、サーバ側はインフラとか面倒なのでサーバレスでやりたいですが、サーバレスは設計を大きく変えないといけなくて(RDBとは相性悪いとか)使い所を気をつけないと行けないのがネックですね。

できるようになった事、チャレンジした事 [技術以外]

技術ほどたくさんは無いですが

  • 採用に携わるようになった
  • 純粋なWEBサービスの運用感覚が少しわかった
    • SEOとか意識できるようになった
    • ゲームに比べると考える事が多くて大変
  • チームマネジメント
    • ちょっとだけ

しばらく一人マネージャー+業務委託の方だったので、マネージャーとしての管理業務はほとんどやっていないのですが、開発ルール決めたり担当決めたりくらいはしていました。

あと、ゲームの場合は面白いゲームを作ってたくさんの人に遊んでもらって、あわよくば課金してもらって〜という課金モデルが確立されていますが、 今はそもそもどういうサービスを提供するかだったり、購入していただいた後の社内業務だったり、その後のお金の流れだったり、ビジネスは考える事が多いな〜と実感しています。

観点が多い分一人だけでは絶対無理で、他の役割を持った方々との協業を前に比べてすごく意識するようになりました。

前職は特にエンジニアが多い会社で、エンジニア同士だったらある程度つーかーで伝わるのが、すごい特殊な環境だったのだと思います。

社名変わりました

corp.yoriso.com

サービス名と同じ名前の「株式会社よりそう」になりました。 サービスの方のよりそうは、企画の段階から携わって作ったものなので、それと同じ名前になるというのは感慨深いです。サービスはまだまだやりたい事だらけなので、 早くもっと良いものにしたいな〜

というわけでエンジニアは随時募集中です。募集要項だと書いてないですが、とりあえず話聞きたいとかだけでも全然OKですよ。 corp.yoriso.com

あと、社名変更に伴って名刺も新しくなりました。 新しい名刺では念願のテックリードこと、TechnicalLeadを名乗れるようになりました。 f:id:moyashidaisuke:20180621210614j:plain

今までの肩書が「マネージャー」だけで、外から見て何する人なのかイマイチ伝わらなかったのが少しわかりやすくなったのと、技術面を引き続きコアにしていくぞ〜という決意の現れです。

というわけで、みなさま引き続きよろしくお願いいたします。

仕事でのコミットで個人GitHubアカウントに草を生やす

TL;DR

  • 会社のGithubアカウントと個人のGithubアカウントを統合する
  • Githubの設定をちょっと変える
  • 仕事してるだけで個人アカウントの草が生えて気持ち良い😄

f:id:moyashidaisuke:20180504192123p:plain

きっかけ

findy-code.io

ランキングにのっている企業さんや、著名な企業アカウントをいくつか拝見したところ、以下の事がわかりました。

企業別GitHubアカウントと個人アカウントのひもづけ

そもそも、企業別GitHubアカウントに個人をひもづけている(Peopleタブでアカウントが出て来る)企業と、ひもづけていない企業があります。

きっかけとなったfindyさんのランキングに出ている企業はひもづいています。 一方で、けっこう有名な会社でOSSを出してるような企業でも、ひもづいていない企業さんもあります。

ぱっと思いついたところではDeNAさん。 github.com

なんでランキングに入っていないんだろう?と疑問に思ったら、そもそも0人扱いになっていました。 後述しますが、セキュリティ的なルールとかあるのかもしれませんね。

ひもづいている個人のActivity

Peopleタブからひもづいている個人ページの情報を確認できますが、以下の2パターンいる事がわかりました。

  1. 単純にoss活動しているアカウントがひもづいているだけ
  2. oss活動と会社での活動がまざっているアカウント

a. 単純にoss活動しているアカウントがひもづいているだけ

activity(草とか、その下に表示されてる。草についてはこちらに、publicなリポジトリの情報のみが載ってる人。

b. oss活動と会社での活動がまざっているアカウント

activityに、「10 contributions in private repositories」とか載ってる人。 もしかしたら、個人のprivate活動的なリポジトリの可能性もありますが、平日にがつがつコミットしている場合は、仕事をしているのでは?と推測。

で、「あ、GitHubの個人アカウント、そのまま仕事に使ってる人ってまあまあいるんだ!」という事に気が付きました。(メールアドレスとかと一緒で、企業に属していて、個人のものを流用するという発想自体なかった)

というわけで検討してみました。

仕事アカウントと個人アカウントを統合のメリット・デメリット

enterpriseは使った事無いので、全体的に考慮されていないです。

メリット

  • 毎日OSS活動をしなくても、仕事でがつがつコード書いていればアカウントに草が生えるので、気持ち良い😄
  • アカウント切り替えなくて良い
    • dotfilesとか
    • qiitaとかcompassとか、SNSログイン系
  • 社外での活動で通っている名前がある場合、社内でも同じ名前で活動できる
  • 仕事でばりばりコード書いていますよ!という証跡に多少はなる

デメリット

  • セキュリティ的には微妙
    • まあ普通わけますよね
    • enterpriseとか使っててIP制限かけてる場合とかどうなるんでしたっけ

その他気になるとこ

  • 課金周り
    • orgnizationの課金は、orgnaizationにひもづけるアカウントの数に対する課金なので、ひもづくアカウントの状態は関係ない
    • 同じく個人アカウントが課金しててもしてなくても、orgnizationにどうひもづいているかは関係ない
  • 企業別Githubアカウントの見えちゃいけないやつが見えちゃったりしない?
    • リポジトリがprivateにさえなっていれば大丈夫
    • リポジトリがprivateじゃないと、個人アカウントがどうとか関係なくダメ

というわけで、会社的なセキュリティルールさえ乗り越えられれば問題なさそうです。

やってみた

github.com

アカウント統合

なんと先人がいらっしゃいます。

ryoichi0102.hatenablog.com

私の個人アカウントはほとんど動いていない状態なので、会社アカウントに統合する事にしました。

qiitaのアカウントはGithubアカウント以外でログインして、設定画面からひもづけを削除->追加 したらひもづけが変更できました。

問題無い範囲でprivateリポジトリ系の情報を公開する

qiita.com

企業別アカウントとのひもづけを公開

orgnizationページ -> people から切り替えられます。(権限が必要かもしれません) f:id:moyashidaisuke:20180504191834p:plain

まとめ

OSS活動をしているメンバーがいる会社は、これをやるだけで無料でwebで宣伝してもらえたり、こういう人が所属していますよ!というアピールになるので、基本やった方が良いと思います。 そうじゃない場合も、草がはえるのは単純に気持ちが良いのでおすすめです。