マガジンのカバー画像

「色の消しゴム」アプリの作り方

15
iPadには色々なお絵かきアプリがあるけど、私が欲しい「色の消しゴム」を持ったものがない!っていうのでProof of Conceptを書いたら友人の沖ちゃんが興味を持ってくれた… もっと読む
運営しているクリエイター

記事一覧

独自のボタンをUIControl上に実装する

独自のボタンをUIControl上に実装する

ツールバーのボタンは長押しすると、橫にメニューが出るとか、そこへ指をスライドさせて選択出来るとか、普通のボタンじゃないインタフェースが欲しいのでUIControlを継承して実装する必要があるので調べてみる。

- UIControl - UIKit | Apple Developer Documentation
- iOS標準っぽいボタンを自作する - Qiita
- アニメーション付きのボタンを

もっとみる
ツールバーの表示・非表示

ツールバーの表示・非表示

1ヶ月半ぶりにソース触ってみた。これもGW中には仕上げてしまいたいな。

今日はツールバーの表示・非表示ボタンを実装。
微妙な動きに凝ってみた。動きはこんな感じ。

https://gyazo.com/d916e9b820b6123272398f54ddc4ab54

Cutや背景画像とかの機能は初期リリースでは要らないだろうから、ツールバーでも非表示にしておこう。いまアイコンの座標が即値なので、

もっとみる
シンボルの整理とリスト画面の微調整

シンボルの整理とリスト画面の微調整

リスト画面を作る時に色別のタグを簡単に作るために「Sketchで色シンボルを作ってアイコンの色を変更する」を試してみる。おし。これで簡単にタグをあちこちに使えるな。これはお絵かき画面でも使うし。

ついでに使ってないシンボルの削除や、名前の統一、アートボードにちゃんと配置などの整理もした。

そして、イメージリストも微調整してるんだけど、どーもしっくりこないなぁ。
なにが悪いのかなぁ・・・

リスト画面が決まらないなぁ・・・

タグは使える数を6個に絞ろうかなと。あとwri.peと同じでカレンダービューやアーカイブ機能を作る予定。

iPadでドキュメント書き

iPadでドキュメント書き

Jazzyの設定をしたので、ドキュメント書き。

最近はiPad Pro + Keyboardを持って歩くのがマイブームなので、ドキュメント書きもiPadで。

gitはWorking Copy、編集はTextasticで完璧。ホントに困らないな、これで。
CIでビルドまでやれば、ホントに困ることないんじゃないだろうか。

使い方は「iOSアプリWorking CopyとTextasticでgit

もっとみる
PodのドキュメントをJazzyで生成してGitHub Pagesに自動アップする

PodのドキュメントをJazzyで生成してGitHub Pagesに自動アップする

さて、一部をPrivate Podで管理するようにしたので、ついでにPodのAPIドキュメント管理にJazzyを使います。

#!/bin/sh
# filename: ./scripts/generate_docs.sh

# clean up
mkdir -p _site
rm _site/*

# generate docs
jazzy \
--output "_site" \
--m

もっとみる
ツールバーをCocoaPodsへ切り出し

ツールバーをCocoaPodsへ切り出し

責任範囲を明確にするため、コードの独立性を高めるためにツールバー部分をCocoaPodsで切り出すことにします。ほかのプロジェクトに再利用する訳ではありませんが、ネームスペースを分けるという意味で使っています。

pod lib create CanvasToolbar
rm -Rf CanvasToolbar/.git

これでフォルダを作り、続けて既存のPodfileに下記のように追加しました

もっとみる
現在のツールバーの問題点

現在のツールバーの問題点

- 選択時にタップするとdeactiveの色になる
- 長押しでメニュー出してそのまま指をスライドさせて離した所で決定にしたい
- 長押しで出るメニューにスライドのトランジションが欲しい

この挙動を実装するのにUIButtonでは難しいからUIView拡張して自前で実装するかな。
特に指のスライドのはどーすればいいんだろ?メニューを表示するボタンとメニューを別コンポーネントにしてるからジェスチャ

もっとみる
なんとか年内にツールバーが動くように

なんとか年内にツールバーが動くように

なんとか、ツールバーのボタンが押せて、Long pressから右にメニューが出るようになりました。紅白見ながらがんばった。

まだLong press周りの使い心地が悪かったり、メソッドが足りない部分があるけど、年内にメドがついて一安心。

https://github.com/tmokita/ColorPenMemo/tree/7da9d74a5ef5609ba88ca728f268b76df6

もっとみる
ツールバー部を実装することにした

ツールバー部を実装することにした

部品を作ったので試しも含めて自分でツールバー部分を実装してみることにしました。

基本的に実装はおきちゃんにお願いしているので、ツールバーのUI部分だけ実装するためにUIViewを拡張してそこだけ実装です。

自分でデザインして絵を描いて部品に切り出して実装までするのたのしー!気に入ったモノを自分で作れるのってホント楽しい!

SketchをiOSのAsset Catalogに

SketchをiOSのAsset Catalogに

何度か名前を付け替えたりしつつ、適当に部品のExportの設定をしてみました。しかしコレ、そのままiOSに組み込むのは面倒なのでAsset Catalogで出力できないのかなと思って探したところやっぱりありました。

https://github.com/gliyao/SketchToXcode

似たモノはいくつかあったけど、シェルスクリプトで書かれていて分かりやすいのでこれを動かす事に。ちょっ

もっとみる
Sketchでも部品切り出しは面倒なんだね

Sketchでも部品切り出しは面倒なんだね

まずは部品化とかあまり考えずに画面作ったので、iOSで使いやすいようにボタンごとにPNGとして切り出し。そのためにグループ化。

ボタンを押しているとか、Deactiveの時の画像も作らなきゃ。同じような部品だけど少しずつ違うので、あとでデザイン変更はやっぱり面倒だな。

命名規則とかも考えないと行けないし、デザイン以外にもホント考える事多いな。デザイナの人がやっている仕事って。

初めてのSketch

初めてのSketch

さて、冬休み!って事でアプリのUIを考えるためSketchに挑戦!

前に本は読んだんだけど、ちゃんと触らないでやめちゃったから、ほぼ初めて。本を読んで始めようかとか思ってたけど、結局何も見ずに適当に開始。

今回、iOSの標準コンポーネントは使わず、矩形中心のUIにするつもりだったので3時間ぐらいでサクサク完成。アイコンはFontAwesome5を利用。

結構気に入った感じのUIができてご満足

もっとみる
お絵かき部分の仕様

お絵かき部分の仕様

前回の図にちょっとだけ追記した上で解像度を上げて機能一覧を書き出してみます。一番最初のバージョンで欲しいものには☆を付けました

# ツールバー
- 左端固定 ☆
- 背景色は黒でopacity 0.75ぐらい ☆
- アイコンは白 ☆

## 右上の[X]で最小化
- 最小化時は黒いベロだけが残り、それをタップか左エッジからのスワイプで再表示

## Pen
- タップすると前回使った太さのペン

もっとみる