読者です 読者をやめる 読者になる 読者になる

Jun's blog

仕事や趣味について綴ります

iOSアプリ開発におけるTravis CIの設定

iOS CI

iOSアプリ開発で初めてTravis CIを使うことになったので設定を備忘としてメモしておく。

設定

.gitディレクトリと同階層に.travis.ymlを以下の内容で作成した。 この設定により、ビルドとテストを行い、結果がSlackのチャネルに通知される。

language: objective-c
osx_image: xcode7.2

before_install:
- gem install xcpretty
- gem install cocoapods -v '0.39.0'
- pod install

script:
- xcodebuild -workspace ワークスペース名 -scheme スキーム名 -configuration コンフィギュレーション名 -destination
  'platform=iOS Simulator,name=iPhone 6s,OS=9.2' test | xcpretty

notifications:
  email: false
  slack:
    secure: slackのクレデンシャルをtravis encryptコマンドで暗号化したもの

設定の説明

  • 実際の開発言語はSwiftだけどlanguage: objective-cでOK。
  • xcodebuildを実行すると大量にログが出て、Travis CIのログ上限4MB制限を超えて途中でコンパイルが強制終了されてしまうため、xcprettyを入れてログを整形、量を少なくしてログ制限に引っかからないようにしている。
  • cocoapodsでライブラリ管理をしているのでbefore_install:pod installを実行している
  • notification:ではデフォルトのメール通知をOFFにして、代わりにslackの特定チャネルに通知するようにしている。
  • slack: secure:部分の記述は、travis encrypt "<account>:<token>" --add notifications.slackを実行することで自動で追加される。

xcodebuildを使用している理由

  • Travisはデフォルトでビルドツールとしてxctoolを使うが、こちらにもあるように Xcodeのバージョンアップで機能しなくなる等、問題が多いことからxcodebuildを使った方が良いと社内でもアドバイス頂いたため。

Developers.IO 2016が開催されました

イベント

2016年2月20日(土)、クラスメソッドのエンジニアとスポンサー企業様によるカンファレンスイベント、Developers.IO 2016が開催されました。 私はスタッフとして、アマゾンウェブサービスジャパン ソリューションアーキテクトの塚田 朗弘さんによるセッション「AWS Mobile Maniacs」のレポートを担当しました。 今回が初参加となりましたが、全編を通じて非常に濃いセッションの連続でした。 セッションの様子やスライド資料などは下記クラスメソッドのブログにまとめられていますのでよろしければご一読ください。

dev.classmethod.jp

改めて今年の目標を確認する

振り返り

早いもので1月も終わりですね。 昨年10月に転職してからあっという間に月日が流れました。 このままだと気づいたら1年過ぎてたなんてことになりかねないと思ったので 改めて今年の目標を確認しておきます。 あ、目標と言ってますが「心がけ」くらいのざっくりしたものになってます。 ゆる〜くやります。

ちなみに2015年の目標はこんな感じでした。

  1. 痩せる(体重50キロ台)
  2. 継続的に技術ブログを書く(内容はなんでもOK)
  3. クラスメソッドでがんばる!!!!

振り返ります。 1については実現できてないですね。 でも体重管理や食べ過ぎなどについては意識しているので逆に太ってもいないです。 今後も気をつけていければと思います。 2については入社以来執筆数が0本だった月はまだないので継続はできていると思いますが もう少し増やしていきたいです。ブログはこちらです。 3については目標というか決意表明ですね笑。まぁ、これからも頑張ります。

2016年はこんな感じに設定します。

  1. 痩せる(体重50キロ台)
  2. 継続的に技術ブログを書く(内容はなんでもOK)
  3. クラスメソッドでがんばる!!!!
  4. 仕事を効率的に行い、よりプライベートを充実させる

今年はプライベートでも色々と変化が起こりそうなので効率化をより意識していきたいです。 プライベートを充実させることで良いサイクルが生まれ、仕事へもそれが表れると思います。 自分の身の回りの人を見ても仕事が充実してる人は大体プライベートも充実していて人生を楽しんでいる人が多いです。

ということで、もう1年の十二分の一が終わりますが今年もよろしくお願いします。

P.S. 最近の活動だと スマートニュース様とのAWS勉強会で登壇させていただきました。 よかったらこちらもチェックしてみてください。

ではでは。

【Windows 10アプリ】スタイルを適用してボタンの外観をカスタマイズする

Windows Windows 10 Mobile Visual Studio

今回はボタンにスタイルを適用して見た目をカスタマイズする方法をご紹介します。

まずはボタンをいくつか並べましょう。 新規でユニバーサルアプリのプロジェクトを作成した際にデフォルトで存在するGridの中に3つボタンを配置しました。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.307,0.5">
    <Button x:Name="button1" Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button2" Content="Button 2" HorizontalAlignment="Left" Margin="10,47,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button3" Content="Button 3" HorizontalAlignment="Left" Margin="10,84,0,0" VerticalAlignment="Top"/>
</Grid>

プレビュー画面の見た目はこんな感じ。 f:id:katoj:20151230175204p:plain

味気ないですね...それではこれらのボタンの背景色と文字色を変更してみましょう! とは言っても簡単で、PageのResourcesプロパティにスタイルを定義するだけです。

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Page.Resources>

ポイントとしてはStyleのTargetTypeでスタイルを適用するコントロールの型(今回はボタン)を指定する必要があります。 型を指定しないとSetterで指定しているコントロールのプロパティが認識されずにエラーとなります。

上記のスタイルではボタンの背景色を緑、前面色(文字色)を白にしてみました。 スタイルを適用した結果下記のようになります。

f:id:katoj:20151230180052p:plain

ちゃんとスタイルが適用されていますね!

【読了】 スクラム 仕事が4倍速くなる“世界標準”のチーム戦術

読了 スクラム

www.amazon.co.jp

タイトル通りスクラム本を読んだ。 この本は会社の先輩にスクラムについて勉強したいと相談したところ薦められた本だ。

著者がスクラムの提唱者であるだけにスクラムの概念について深く学べる。

今の会社は開発にスクラムを導入していて、スタンドアップミーティングやタスクボードによる進捗共有などを実際に行っているが、 プロダクトオーナー、スクラムマスターの役割など、これまでなんとなくの知識だった部分がこの本のおかげで明確になったように思う。

ただし、スクラムはあくまで「限られた時間を有効活用し、価値を最大にするフレームワーク」であり、「スクラムだから〜しなければいけない」といった、考え方を1つに固定させる、あるいは縛りつけるような 使い方は本末転倒だと思った。

【Windows 10アプリ】Hello worldアプリを作ってみる

Windows Windows 10 Mobile Visual Studio

最初のアプリ

前回まででWindows 10アプリを開発する環境が整ったので一番最初のアプリを作ってみたいと思います。 とは言っても一番最初なのでHellow world的なアプリを作ってみます。 Windows デベロッパー センター内に"Hello, world" アプリを作成する (XAML)という記事を見つけたのでやってみました。 TextBoxが1つあり、そこにテキストを入力するとTextBlockに「Hello, {入力した文字列}!」と表示するだけのシンプルなアプリです。

UIの編集

空のプロジェクトを作成するとMainPage.xamlというファイルが作成されます。ここにUI部品を貼り付けていきます。 記事では最終的に下記のような構造となっています。

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                        <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="contentPanel" Margin="8,32,0,0">
            <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>
            <TextBlock Text="What's your name?"/>
            <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
                <TextBox x:Name="nameInput" Width="280" HorizontalAlignment="Left"/>
                <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
            </StackPanel>
            <TextBlock x:Name="greetingOutput"/>
        </StackPanel>
    </Grid>
</Page>

この中で重要なところはVisualStateManagerを使用して見た目を変更していることでしょうか。 ウィンドウ幅が641px以上の場合は特に見た目を変更しません。 StackPanelタグ内に記述した通りに表示されます。 一方、ウィンドウ幅が0px以上640px以下の場合はinputPanelというStackPanelのOrientationプロパティをVerticalにし、ボタンの上マージンを設定しています。

ボタンクリック時のイベントを実装

見た目ができたので後はボタンがクリックされた時の処理を記述します。 inputButtonのプロパティウィンドウのClickイベントハンドラーに「Button_Click」と入力してEnterキーを押すとMainPage.xaml.csファイルに 空のButton_Clickメソッドが追加されるのでその中に処理を記述します。 最終的に下記のような実装となりました。

private void Button_Click(object sender, RoutedEventArgs e)
{
    greetingOutput.Text = "Hello, " + nameInput.Text + "!";
}

TextBoxに入力された文字列を使って文字列を整形し、TextBlockに表示しているだけですね。

エミュレータで動かしてみる

アプリが出来たのでモバイルエミュレータで動かしてみましょう。 6インチのエミュレータで動かしてみます。

縦表示

縦表示だとTextBlockがTextBoxの下に配置されています。 f:id:katoj:20151214002205p:plain

横表示

横表示だとTextBlockはTextBoxの右に表示されています。 ちゃんとVisualStateManagerによる見た目の変更が効いていることがわかります。 f:id:katoj:20151214002219p:plain

まとめ

今回は最初のアプリとしてすごくシンプルなアプリを作ってみました。 実際にコーディングしたロジックがエミュレータや実機上で動くのを見ると楽しいですね!

今回は以上っす。

【Windows 10アプリ開発環境構築】 Visual Studioをインストール

Windows Windows 10 Mobile Visual Studio

はじめに

前回MacParallelsをインストールしてWindows 10の仮想マシンを作成しました。 今回はWindows 10にVisual Studioをインストールします。

Visual Studioのエディション

Visual Studio(以下、VS)には幾つかのエディションがあります。 今回は無料のVisual Studio Community(以下、VSC)をインストールしましょう。 VSCはこちらからダウンロードできます。

言語で日本語、形式はWebインストーラーを選択し、「ダウンロード」をクリックします。 f:id:katoj:20151206223927p:plain

「vs_community_JPN.exe」がダウンロードされるのでダブルクリックします。 f:id:katoj:20151206224025p:plain

セキュリティ警告が出ますが「実行」をクリックします。 f:id:katoj:20151206225820p:plain

インストールの種類で「カスタム」を選択して「次へ」をクリックします。 f:id:katoj:20151206224142p:plain

「ユニバーサル Windows アプリ開発ツール」を選択して「次へ」をクリックします。 f:id:katoj:20151206224209p:plain

「インストール」をクリックします。 f:id:katoj:20151206224308p:plain

ユーザーアカウント制御の画面が表示されるので「はい」をクリックします。 f:id:katoj:20151206224320p:plain

インストールが始まります。しばらく時間がかかります... f:id:katoj:20151206224331p:plain

インストールが完了しました!マシンを再起動しましょう。 f:id:katoj:20151206234807p:plain

まとめ

これでWindows 10アプリを開発する環境が整いました! Visual Studioのインストールは少々時間がかかりますがじっと待ちましょう。

参考