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

KATOエンジニヤリング開発日誌

「アウトプット無きエンジニアにインプットもチャンスも無い」の精神で書いています

iOS/macOSアプリ開発ハンズオンセミナーに参加しました 2

プログラミング

f:id:masayuki_kato:20170321002744p:plain

2月23日に開催されたMOSA主催の「iOS/macOSアプリ開発ハンズオンセミナー」で作成したmacOSアプリの紹介をします。

www.kato-eng.info

作成したアプリ

アプリの概要

画像を読み込んで加工し、別ファイルとして保存するアプリになります。

作成した主な機能は下記になります。

  • 読み込んだ画像をウインドウ上に表示する
  • 画像はダイアログのファイルブラウザで選択できる
  • ドラッグ&ドロップで画像を読込みできる
  • 画像をグレースケールに変換する
  • 画像を別の名前で保存する
  • 画像をトリミングできる

起動画面

iOSと同様にmacOSアプリでも画面は「storyboardファイル」で定義します。

f:id:masayuki_kato:20170321003158p:plain

今回作成したアプリは「ImageEditor」と命名しており、macOSではおなじみの画面上部のメニューバーにメニューが表示されます。

f:id:masayuki_kato:20170321003944p:plain

メニューバーから「File > Import」を選択することで読み込む画像を選択することができます。

f:id:masayuki_kato:20170321004121p:plain

Finder表示から読み込む画像ファイルを選択すると、起動がImageEditorアプリに画像が表示されます。

f:id:masayuki_kato:20170321004331p:plain

ImageEditorアプリのウィンドウサイズを変えても画像の縦横比は変わらずに画像の大きさが変わります。

f:id:masayuki_kato:20170321004509p:plain

ドラッグ&ドロップでImageEditorアプリに直接読み込む画像ファイルを指定することができます。

f:id:masayuki_kato:20170321005048p:plain

画像をドラッグ&ドロップすると….

f:id:masayuki_kato:20170321005122p:plain

ImageEditorアプリに画像が読み込まれます。

画像をグレースケールに変更する

メニューバーの「File > Convert to Monochrome」を選択すると、表示されている画像がモノクロに変化します。

f:id:masayuki_kato:20170321005344p:plain

f:id:masayuki_kato:20170321005506p:plain

画像のトリミング

ImageEditorの画面内でマウスドラッグすると赤い線が表示されます。

f:id:masayuki_kato:20170321005949p:plain

マウスドラッグを終了すると赤い線の枠内をトリミングした画像が表示されます。

f:id:masayuki_kato:20170321010116p:plain

まとめ

macOSアプリはiOSアプリと異なり、Appleの審査無しでアプリを公開することができるので自由度が高く感じます。

ただ、macOSアプリ開発のプロジェクトは滅多に無いと思うので、現時点では趣味レベルでしか学ぶ意味は無いのかなと思いました。

今回でMOSA主催の「iOS/macOSアプリ開発ハンズオンセミナー」のレポートを完了します。

ご高覧ありがとうございました。

pythonのpandasで列ごとの文字列を連結したいと思ったとき

プログラミング

下記内容のデータフレームがあったときに

Stores Dept Date Value
1 青果 2017-01-01 151
1 鮮魚 2017-01-01 188
1 青果 2017-01-02 153
1 日販 2017-01-02 284
1 鮮魚 2017-01-02 201
2 日販 2017-01-01 380

主キーを1列で表現するために複合主キーである[‘Stores’, ‘Dept’, ‘Date’]の値をアンダースコア(_)で結合して新しい列を作成する方法を調べました。

試しに下記コマンドを実行してみると、

dataframe['New_PK'] = dataframe['Stores'] + '_' + dataframe['Dept'] + '_' + dataframe['Date']

下記のようなエラーが発生します。

TypeError: ufunc 'add' did not contain a loop with signature matching types dtype('<U21') dtype('<U21') dtype('<U21')

調査した結果、下記のようなコマンドで列値の結合ができました。

dataframe['New_PK'] = dataframe[['Store', 'Dept', 'Date']].apply(lambda x: '{}_{}_{}'.format(x[0], x[1], x[2]), axis=1)
Stores Dept Date Value New_PK
1 青果 2017-01-01 151 1_青果_2017-01-01
1 鮮魚 2017-01-01 188 1_鮮魚_2017-01-01
1 青果 2017-01-02 153 1_青果_2017-01-02
1 日販 2017-01-02 284 1_日販_2017-01-02
1 鮮魚 2017-01-02 201 1_鮮魚_2017-01-02
2 日販 2017-01-01 380 2_日販_2017-01-01

iOS/macOSアプリ開発ハンズオンセミナーに参加しました 1

プログラミング

先日のブログでもお伝えしましたが、2月23日に東京都千代田区のちよだプラットフォームで行われたMOSA主催の「iOS/macOSアプリ開発ハンズオンセミナー」に参加しました。

www.kato-eng.info

今回はハンズオンセミナーで作成したアプリの紹介をします。

暗記カードアプリの作成(iOSアプリ)

起動画面(LaunchScreen.storyboard)

アプリを起動したときに表示される画面はLaunchScreen.storyboardファイルで表現します。

f:id:masayuki_kato:20170309225642p:plain

トップ画面(Main.storyboard)

起動画面の後に表示されるトップ画面はMain.storyboardファイルで表現します。

f:id:masayuki_kato:20170309230054p:plain

Q&A画面(セグエの設定)

暗記カードアプリのメイン画面となるQ&A画面はMain.storyboardファイル内でセグエの設定をすることで表現できます。

ビューコントローラの表示遷移や他のビューコントローラとの関連付け情報のことをセグエといいます。

セグエを設定しているようす

f:id:masayuki_kato:20170309230628p:plain

Q&A画面

f:id:masayuki_kato:20170309230718p:plain

正解画面

インプットボックスに正解の英単語を入力しDoneを選択すると

f:id:masayuki_kato:20170309231218p:plain

画面に「Correct」というラベルが表示され、次の問題が表示されます。

f:id:masayuki_kato:20170309231300p:plain

解答を間違えると

f:id:masayuki_kato:20170309231443p:plain

画面に「Incorrect」というラベルが表示され、問題文が斜めになります。

f:id:masayuki_kato:20170309231456p:plain

Property List

Xcodeではデータ交換フォーマット形式のファイルとしてProperty List形式が用意されています。

今回の暗記カードアプリでは出題される問題と答えのマッピング情報をproperty Listで作成しました。

Property Listを編集しているようす

f:id:masayuki_kato:20170309233030p:plain

データ型や親子関係がわかりやすいけど編集がマウス操作メインになってしまい効率が悪いのと、JSONとかと比べるとプログラム上で編集するのが難しそうだと感じました。

もしかしたらSwiftにProperty Listを操作する関数が用意されているのかもしれませんが汎用性が低そうなファイル形式なので、私がアプリ開発をするときにはおそらく使用しないだろうと思います。

まとめ

最近はAPI開発やWebアプリケーションのビジネスロジック作成といった画面を直接制御する処理を行っていなかったため、VBのように画面をGUIで作成していくのが懐かしい感じがしました。

また、素朴な雰囲気の画面ならアプリ開発も難しくないという気持ちになりました。

今回のハンズオンセミナーではSwiftのコードをほとんど触らなかったのが少し残念でした。

MOSAでは月に一度くらいのペースでSwiftの勉強会を行っているようなので、機会があればそちらにも参加してみたいと思います。

mosa.connpass.com

macOSアプリ開発編は後日作成します。

vimrcをカスタムしてnode.jsの開発環境を作る

IT・コンピュータ

f:id:masayuki_kato:20170304222102j:plain

先週から新しいプロジェクトに配属されたのですが、使用できるソフトウェアが制限されている関係で、VirtualBoxで作成したOracle Linuxの仮想マシン内でvimを使用してnode.jsの開発を行う必要がでてきました。

現在のシステム開発でIDEを使用せずにプログラミングをするのはしんどいので、以前から導入しようと考えていた「vimrc」の設定を調べました。

続きを読む

新人エンジニア向け、仮想環境でSQLに慣れてみる 前編

データベース

f:id:masayuki_kato:20170227230710j:plain

2年前に会社の新人研修用に作成した資料を見つけたのでこちらに掲載します。

参考にした資料は下記になります。

達人に学ぶ SQL徹底指南書

達人に学ぶ SQL徹底指南書

一部古い情報があるかもしれないので試される際はお気をつけください。

続きを読む

node.jsのsquelがバグってる?と思ったらやるべき対処法

プログラミング

f:id:masayuki_kato:20170215235634j:plain

先日、私の職場である問題が起きた。

それはnode.jsのsquelというモジュールのバグが原因だった。

squelの開発者に対してそのバグのissueがあがっているが、

特に対応もとられず1年以上経過しているため何らかの解決策を探す必要がでてきた。

今日は、そのバグを解決した対応法を記録しておきます。

続きを読む