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

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アプリ開発ハンズオンセミナー」のレポートを完了します。

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