かんたん間取り図

2021.12.15

swiftでiPhoneアプリを作っています。

いろんな人に「どんなアプリが欲しいですか？」と聞いてるのですが、
「簡単に間取り図が作れるアプリが欲しいです」というのがあったので、チャレンジすることにしました。

「かんたんな間取り図がかんたんに描ける」をコンセプトに作っています。

参考にした書籍等

・間取り図大好き！
これは本当に面白くて、思わず声を上げて笑ってしまいました。
間取り見るのは楽しいものですね。

一番参考にしたのは新聞のチラシです。
間取り図があると同じものが描けるか試しました。

画面遷移

画面は３つ。構成（初期）画面、部品選択画面、部品作成画面です。

構成（初期）画面
部品が６個表示されます。
この画面で間取り図を作っていきます。

部品選択画面
うさぎ　用意されている部品が表示されます。
かめ　　作成した部品が表示されます。
部品を選択し、戻るボタンで選択した部品が構成画面に表示されます。
部品を選択し、鉛筆ボタンで選択した部品が部品作成画面に表示されます。

部品作成画面
部品を作成して登録します。
登録された部品は部品選択画面（かめ）に表示されます。

構成画面　編集→拡大縮小回転

  1. タップするとオレンジの枠線が出ます。
    ドラッグすることで移動します。
    この枠線のついた画像について編集をします。
  2. 編集をタップすると編集メニューが開きます。
    拡大縮小回転
    上下反転
    左右反転
    ラベル横追加
    ラベル縦追加
    コピー
  3. 拡大縮小回転をタップすると入力画面が出ます。
    このときすでに拡大縮小していても元の画像に戻ります。
    横の長さ、縦の長さにあるのは現在のサイズです。
    拡大縮小したい長さや回転したい角度を入力してください。
    変更の必要ない欄は未入力のままで、何も行いません。
    回転は元の画像が基本に回転角度を入力してください。

構成画面　編集→反転

  1. 編集メニューから上下反転をタップすると上下反転します。
  2. 編集メニューから左右反転をタップすると左右反転します。
  3. 回転した画像の場合回転前の画像が基準となります。

構成画面　編集→ラベル追加

  1. ラベルを追加したい画像をタップします（オレンジの枠線がつきます）。
  2. 編集→ラベル横追加（ラベル縦追加）をタップ。
  3. ラベル追加画面が表示されます。
  4. ラベルを入力してOKを押します。
  5. 入力したラベルが画像の中心に追加されますがタップして移動できます。
  6. ラベル縦追加は文字を縦書きにするのではなく１文字ごとに改行を入れて縦書きにしています。
    ーはそのまま表示されますので、縦棒（|）を入力してください。

構成画面　編集→コピー

  1. コピーしたい画像をタップします（オレンジの枠線がつきます）。
  2. 編集→コピータップ。
  3. コピーされます。
  4. 選択した画像が拡大縮小回転されている画像でも元の画像がコピーされます。

構成画面　前へ

画像の重なりを変更したい場合、上にしたい画像をタップし「前へ」ボタンをタップ。

構成画面　位置

  1. 画像をタップします（オレンジの枠線がつきます）。
  2. 「位置」ボタンをタップ
  3. 選択した画像の画面上の位置が表示されます。
    これを利用して線を引きます。

構成画面　線

  1. タップで太線・タップで細線
    始点をタップ→終点をタップで線を引きます。
  2. 位置入力で太線・位置入力で細線
    タップでは微妙に長かったり、短かったりします。
    始点終点の座標を入力して線を引きます。
    座標を位置ボタンで確認できます。

構成画面　保存

カメラボタンをタップで作成した部分がスマホの「写真」にJPEG形式で保存されます。

構成画面　削除

  1. 削除したい画像をタップします（オレンジの枠線がつきます）。
  2. ゴミ箱をタップ。
  3. 削除されます。

構成画面　上下左右矢印

  1. ドラッグで移動できますが、画像にオレンジの枠線がついた状態で、上下左右矢印を押すと０.５pxずつ移動します。
    微妙に動かしたい時便利です。
  2. 何もないところをタップすると描画画面全体にオレンジの枠線がつきますがその状態で上下左右矢印を押すと全ての画像が１０pxずつ移動します。
    画像全体を移動したい便利です。

構成画面　次の画

小さい部品を使用する場合、タップではうまくつかめない場合があります。

次の画を押すと画像が選択されます。

部品選択画面

  1. 構成（初期）画面で＋を押すと部品選択画面になります。
  2. チェックをつけて戻るボタンを押すとチェックをつけた画像が構成画面の左上に追加されます。複数チェック可能です。
  3. かめマークをタップすると部品作成画面で作成した部品が表示されます。
  4. うさぎマークタップで既存の部選択画面に戻ります。

部品作成画面

  1. 横、縦の実サイズをcmで入力します。
  2. パレットから色を選択します。
    選択した色が縦入力エリアの横に表示されます。
    描画エリアをタップ後、色を選択した場合は描画エリアの色が選択色となります。
    既存の部品の色を使用したい場合は、矢印の隣のボタンで選択できます。
  3. 枠線を選択します。
  4. 形を選択すると表示された色でその形が作成され描画エリアに表示されます。
  5. 前へ・回転・ゴミ箱は構成画面と同じです。
  6. 戻るボタンを押すと名称入力画面が出て入力→OKで保存されます。
    保存時バックカラーは透過されます。
  7. 保存された画像は部品選択画面（かめ）に表示されます。
  8. 作成した部品は削除することもできます。

リリース

「かんたん間取り図」　リリースされました。

無料です。ダウンロードお願いします。