UI – Little snake is going …May the CODE be with you.

Swift 独学プログラミング〜課題のアプリ作成学習アプリ『掛け算九九アプリ』編〜

Posted on 2025年8月19日2025年12月30日 by kohebi

あっ　どうも子ヘビです。

ようやくダンダダンを見始めたら面白いのなんの！笑　あと映像の色使いがいいな〜。なんとも言えない世界観を醸しだしております。おかるんとももちゃんの掛け合いが最高です！

大好きなアニメを観ていても気になってしまうのがカラーバランスとデザイン。今回SwiftUI１００本ノック中の子ヘビですがDay35の課題が『掛け算九九のアプリを作ろう』だったのですが、フレームが用意されているわけではなくいちから自分でアプリを作る課題でした。絶対に入れないといけないフレームはあるもののそれ以外は自由に組み合わせて作る課題でした。もちろんコードを書いていて行き詰まることは相変わらずあるけれどそこは調べると答えが見つかることが多い。けれどデザインとカラーバランスは全てその人のセンスでしかない。この調整が最後おもいのほか悩んだし時間がかかった点かもしれない。

アプリのデザインって？

かっこいい配色って？

わかりやすく使いやすい設計って？

なかなかアイディア浮かばなくてホームページ作ってる時は色々思い浮かぶのになぜだか画面が小さくなると全然アイディアが浮かばなかった。

これはもう他の人のアプリ見た学ぶしかないのか？と思ったり、美術館に行ってたくさん絵を見ていろんなヒントもらうみたいな感性を磨くしかないのかな？

いきなりカッコイイものは作れないので徐々にブラッシュアップしていく必要がある自分の課題ですね〜。

そんな子へびの作った掛け算九九アプリがコチラ↓

掛け算九九アプリ

久しぶりにYouTube作ったけど動画編集は楽しい分野なんだよな自分的にっと改めて思ったな。
それとまだDay35かよ！っとツッコミが聞こえそうですが

子へび

頑張るます！（アーニャ風）

Swift独学プログラミング　プログラミング初心者のUIimageviewとUIButton はどっちを上に配置する？〜答えはもちろん編〜

Posted on 2020年5月15日2020年5月15日 by kohebi

あっ　どうも子へびです。

新しいソファーがきて根が生えて動けずぐーたらしてしまう子へびです。ソファーに座り根が生えても強気にソファーから立ち去れる方法があるならば是非伝授してもらいたいです。笑

ようやく graphic画像がうまく表示されるようにファイル・関数を書くことができたので次のステップ。その画像をタップするとボタンの色が変わる。っという仕組みにしたいと思ってコードを足していったのですが・・・・。

子へび

ボタンタップすると表示画像が何故だか上部へジャンプしている・・・。ボタンの色はちゃんと変わっているのに・・・。何故だ！？

Master松陰に報告すると

Master松陰

画像がビックリするからじゃない？

っと全くからかわれております。

子へび

そんなアレンジ加えてません！それにそんなアレンジ加えたくても加え方もわからないですし！

子へびにはもちろんそんなテクニックないですし、意図して作っているわけではもちろんありません。笑

オートレイアウトの配置の問題なのかなー？子へびの関数の作り方が悪いのかな〜？また解明作業となっております。

子へび

ようやくUIがそれらしくなってきたのにちっとも進まない・・・。

とそんな穴に落ちている最近の子へびです。
本当に進んでいるのか子へび？！

子へび

えっ？！

Swift 独学プログラミング　プログラミング初心者のCoreGraphics画像作成〜考え方編〜

Posted on 2020年4月21日2020年4月21日 by kohebi

あっ　どうも子へびです。
PSYCHO-PASSにまた打ちのめされた子へびです。あ〜なんて素敵な世界感なんだ〜。いつかダンゴムシをあんな風に改造できる唐之杜志恩さんみたいなスペシャルなエンジニアになりたいものです。ダンゴムシカッコよすぎ。でも一番好きなキャラクターは法斑静火。もうノックダウンです。笑

連日アニメネタ満載の子へびがどうしてもCoreGraphicsの色々なサンプルコードを見ていてもイメージがわかなくてMaster松陰に相談したところ図解で説明してくれました。

これはMaster松陰が今週リリースしたApplewatchのアプリの抜粋ですが

Master松陰

Apple watch持っている方は是非ダウンロードしてみてね！

との宣伝もいただきましたが、この考え方の画像もくれました。子へびはこのイメージを作るクラスと作画するクラスを組み合わせることがどうしてもイメージできなかったのです。UI imageを作ってｄrawする。こうシンプルに覚えるのが一番良いかな〜？後は深く考えずCoregraphicの持つ決まったコードの書き方を実行する。（←子へびこれも実は苦手でよくMaster松陰にそこはそおゆうものだから考える必要ないとよく注意されます。）
これにより子へびのCore graphicは動き出したのですが、動いてはいるけどなんかちょっと動きが違うような気がして、完璧に完成はしていません。そして夢の中でcontextにうなされました。笑

子へび

夢の中でもコードが書けて問題点を解決してくれたらいいのに。

っと感じてしまう子へびです。あと少しなのに・・・。このまま穴に落ちないように頑張ります。

子へび

とほほ・・・。

Swift 独学プログラミング　プログラミング初心者のCoreGraphicsの作り方〜理想のUI image作り編〜

Posted on 2020年4月8日2020年4月8日 by kohebi

あっ　どうも子へびです。

コーヒー好きの子へびですが、前からスタバにバナナが売ってるのが不思議でならなかったのですが朝起きてどうしてもバナナが食べたくなってスタバにバナナとコーヒーを買いに行って早速食べてみると・・・。ああっああっ合う！コーヒーとバナナってとっても相性がいいんですね。笑　しばらく朝ごはんにバナナとコーヒーハマってしまいそうです。でももしかしてスタバのバナナが美味しいのかな？

子へびの何回目の書き換え？！のアプリUIですが、思い描いている画像をどう作り込んだらいいか分からずに早速Master松陰に相談すると

子へび

星画像を1つ作って例えば3だったら3つ表示するみたいにしたいのですがどんな作り方がありますか？

Master松陰

セルに作る画像は１つにしても出来るよ。UIImageに入れるビットマップを動的に生成してそれに★を必要分だけ描くのよ。そういったグラフィックの操作は、CoreGraphicsを使えば自在にできるよ！

子へび

また日本語が解らない・・・。

止まらないMaster松陰

Master松陰

[CoreGraphics](https://qiita.com/moonkids/items/4f89701dbc397107a867)
このあたりかな
pdfで作った★も作画できるよ

let image = UIImage(named: “star.pdf”…
image.draw(in: rect)

こんな感じで、カレントのUIGraphicsGetCurrentContext
に作画してくれるのよ。

と言われてまだ日本語が理解できない子へびですが、頑張って自分の思い描いている形に仕上げたいと思います。笑

ただいまMaster松陰はApplewatchのアプリ作りにハマっているそうです。Applewatchって使いやすいのかな？たまに使ってる人見ますがまたMaster松陰のアプリApplewatch版が完成したらご紹介します〜。