Noriyasu_Katano's blog

脳科学や量子力学、政治や戦争に関して、日々の感じた雑感を書いていきます。

デザイナーがswiftを勉強してわかったこと

Swift

SwiftはiOSを作るための言語の一つでAppleが採用しているものです。英語的な意味は名詞で「アマツバメ」、形容詞では「迅速」などを意味しています。なので、Swiftのアイコンにはツバメをイメージしたものが使われています。

ヒョンなことからWebデザイナーである私がこのSwiftを勉強するようになりました。そのヒョンなこととは、私の古くからの友人がアプリをクラウドソーシングで探したエンジニアに頼んで作って運営していたのを話に聞くようになり、色々と調べる機会が多くなったという感じです。

 快眠を目的にした『朗読と音』アプリ

アプリはいたってシンプルなアプリです。単純に朗読を聞くアプリで、これらのアプリは色々と出回っているようですが、友人のアプリ『朗読と音』の特徴は発生練習などを勉強した方が朗読をするということで、親があり共感を持たれているそうです。

朗読と音

朗読と音

  • makoto morisaki
  • ヘルスケア/フィットネス
  • 無料

 朗読の機能の他に、同時にテキストも読めるようになっています。さらに、朗読を聞くときに効果音として環境音も設定できるようです。タイマー機能などもあり、なかなか細かいところに手がとどくアプリになっています。このアプリの中身を色々と相談され、Swiftを触るようになりました。

なんとなく気持ち悪いObject-CとSwift

一番最初に相談があったのは、ちょうどSwiftがで始めた当初でした。それまではObject-Cという言語を採用しておいました。C#なども触る機会があり、なんとなくC言語の知識は少しあったのですが、このObject-Cが全くよくわからない言語でした。多分、エンジニアの人とかすると当たり前なのかもしれませんが、.mファイルと.hファイルが存在することです。

Objective-Cでは何故.hファイルと.mファイルを作成させられるのか | Swiftを使ってiOSアプリを書く!

これが理解できず、さらに、swiftにこれが切り替わるというのが、どこをどうすれば変換できるのかよくわかりませんでした。

その当時はswift2の時でまだネットにも情報が少なく、数冊参考書を購入して触ってみたのですが、どうも、なんとも気持ち悪い言語の印象しか残りませんでした。

noriyasu-katano.hatenablog.com

Swift を勉強して、Atomic Design の重要性を理解する

上記の記事が3年前で、そこから再度今回再チャレンジすることになったのですが、今回は飛躍的に理解捨ころができました。前回と今回の違いで大きいのはネットに転がっている情報がこの数年で莫大に多くなったことがあります。これで、わからない点を検索しながら作業を進めることができました。そのことでSwiftへの理解も進むことになりました。

今回Swiftを勉強してわかったことはAtomic Designの重要性です。
Atomic Designとは、細かい最小のデザインパーツからデザインを考えて、徐々にそのスケールを大きくしいくデザイン手法です。

Atom(原子)が例えば1つのボタンだとすると、その上位の分子が検索ボックスとボタン、その上がヘッダなどのまとまりになってきます。特に今回のようなアプリの場合、シンプルな画面要素で似ているような画面も多く出てきます。なので、このデザイン手法は非常適していると思いました。

design.dena.com

私がプログラミング上改修した点として色の統一を測りました。それまではコードを色の表示ごとに数値を記載していたのですが、そこをクラス化することで色の数値入力や誤差をなくすようにしました。

まだまだ、自分のSwift技術が低いのでデザインパーツの共通化が十分できていませんが、この考えを取りれていくと、パーツを制御するクラスなどがあり、クラス名を変更するだけでボタンやエリア自体の変更ができるようになると良いと思っています。

つまり、原子でのデザイン管理によってアプリ全体のデザイン統一が測れるということになります。

次回のアプリのアップデートではデザインが改修していると思います。またその情報をそのうちご紹介したいとおもいます。

RxSwift: Reactive Programming with Swift, Second Edition (English Edition)

RxSwift: Reactive Programming with Swift, Second Edition (English Edition)

 

 

広告を非表示にする