Swift 独学プログラミング プログラミング初心者のPDFアイコンの作り方〜ちょっと目を離すと進化していってしまう編〜

あっ どうも子へびです。

先日契約期間が切れましたのメールが届き、あれ?なんか契約してたっけ?っとのん気にメールを開くとサーバーレンタルの契約期限切れ おー!なんてこった!このブロクを開設した際に契約したサーバーレンタルが1年経って契約更新をしないまま放置していた子へびです。なんせ子へびですから・・・。ということはこのブログを書き始めてちょうど1年になるということ!感慨深いです。最初プログラミング自体も果たして続けられるのだろうか?とスタートを切って未だ未知なる世界には変わりありませんがほそながーっく続けております。上達具合を聞かれると言葉につまってしまいますが(笑)




そろそろ本格的に子へびのアプリに表示させるアイコンの画像を作らなくてはならないのですが、そのサンプル画像を作っている時

Master松陰

子へびは画像何で作るの?

っと聞かれ

子へび

え?PNGもしくはSVGじゃないんですか?

っと何か子へびに対しての抜き打ちテストかと思って間違えたらどおしようとぎくっとしたのですが

Master松陰

もうそれ古いのんだよね〜。今時はみんなPDFで作るんだよ。

なっなっなんだって!
ようやく子へびはPNGとSVGの画像の作り方がなんとなくわかりかけたと思ったらもうその手法はoldstyle…..OMG!っと思わず叫びたくなりました。けどprogrammingの世界って常に進化しているしここで習得を止めてしまうとどんどん進化に乗り遅れてしまうので子へびはMaster松陰に

子へび

PDFの作り方も教えてください。

っとお願いしたしだいであります。

子へび

だがしかしまた一つ課題が増えた・・・。とほほ

以下Master松陰流PDFアイコンの作り方です。実際はこのアイコンを作った後の設定の方が難しいと気づく子へびです(笑)

PDFアイコンの作り方
1, SVGのアイコンを探す

2, 1でダウンロードしたSVGを以下のツールで640×640サイズに合わせてエクスポート
https://vectr.com
サイズが小さい物もあるので、ここで調整する
また、合成や編集もここでやっておく

3, 2でエクスポートしたSVGを以下のツールでコンバート
https://apps.apple.com/jp/app/svg-converter-ohanaware-com/id1075707641?mt=12
これはMAC用のアプリなので、事前にダウンロードしておく

4, 3でエクスポートしたPDFを xcode のAssetに追加する

アセットのprinter Vector Dateにチェックを入れて1Xにデータをセットする




Swift 独学プログラミング プログラミング初心者の『話題のアプリええじゃないか!』で放映決定〜Master松陰のアプリだよ編〜

あっ どうも子へびです。

コーヒー大好きな子へびですが、どんなに暑くても基本的にはホットで飲みます。けど日中外出時にどうしても暑さに堪え兼ねるとアイスコーヒーを注文します。なぜだか自分でも不思議なんですが子へびはホットはブラックでしか飲まないし、ブラック以外で飲む事は決してないけどアイスコーヒーはブラックが飲めません・・・。しかもミルクは必ず2つ入れます。お店でミルク2つもらうの恥ずかしいけどそうしないと飲めないので仕方ない。しっかしアイスコーヒー飲む季節はまだまだ続きそうですな〜。




いよいよ 8月22日 木曜日 25:40〜26:10 東京MX
『話題のアプリええじゃないか!』にて
Master松陰のアプリが紹介されます!色々なアプリが紹介されるテレビ番組らしいですが実際に撮影風景を見に行ったMaster松陰自身は

Master松陰

収録中自分のアプリがフリーズしなかハラハラドキドキだった。

なーんて珍しく弱気な発言をしていましたが、他のみなさんのアプリに紛れて自身のアプリの撮影も順調にすすだとの事です。
どんな風に編集されるのかな〜?早くみてみたいです!
今回紹介されたアプリは夏休みに日本全国旅する方々にはとっても役にたつアプリなのでぜひチェックしてみたください!(どんなアプリかは放映時のお楽しみ)

そしてMaster松陰の正体がわかればMaster松陰のヒットアプリが他にも沢山リリースされていますのでぜひそちらもチェックしてみてくださいね!基本的にMaster松陰のアプリは無料で作られているので是非ダウンロードして動きた方やUIなどチェックしてみてください。子へびのようにひよっこ達にはとっても参考になりますよ!

子へび

お楽しみに!ところで子へびは全然課題が進んでおりませぬ。とほほ・・・。




Swift 独学プログラミング プログラミング初心者のきれいな画像処理方法〜icon編〜

あっ どうも子へびです。

この間iPhoneを握ったらいきなりSiriが
『そうだと思っていました。』
っと話だし、子へびは喋りかけていないにも関わらず話出したので心を読まれたのかと思いました。笑 子へびの心を読めるiPhoneけどSiriに答えられてしまうと子へびが何を考えるかバレてしまうので黙ってて欲しい時もあるかな?っと考えていることも読み取って欲しい。笑




iconのデザインが決まって子へびの疑問。

子へび

画像の切り取りがきれいにできていない気がする。ところどころ曲線が歪んでいる気がするな〜。

っとMaster松陰に相談するとsampleiconダウンロードするところから手順を教えてくれました。この手順は意外とどこにも書かれていないので初心者の方々には参考になると思います!

1 SVGでダウンロード ← SVGはWebで大きさを調節できるのでできるだけ大きな画像から切り取った方が画像がきれいに切り出せます!

2 ブラウザーで拡大

3 グラブで画像全体をスクリーンショットをとって保存し切り取る

4 Pixelmatorで各パーツを分解 ← 画像全体より各パーツに分けた方が色々調整ができるのでオススメです!

5 画像が完成してたらPNGで書き出し ← この際アルファチャンネルを取り消してください。この作業をしないとのちのちアップルの審査で引っかかるそうです。

っとこの5つの作業がデザインがだいたい決まったら必要となる手順になります。けど子へび

子へび

説明聞いた時ななるほどと思ったけど、実際に自分の手を動かしてみたらこの5つの作業にめちゃくちゃ時間がかかった・・・。

Master松陰

何度も何度も手を動かして覚えていくのよ!

とのことなのでさらっと5つの作業を紹介しましたがぜひ実際に作ってみてください!
さてようやくコードにとりかかれるかな?!




Swift 独学プログラミング プログラミング初心者のアプリiconの作り方〜デザイン編〜

あっ どうも子へびです。

ようやくセミの鳴き声が聞こえてきましたが子へびの夏休みは終了してしまい腑抜けな状態から社会復帰をしましたが、まだまだ夏休みが欲しいと思ってしまう子へびです。

このサイトは更新していませんでしたが子へびは今自身のアプリのアイコンの作成に取り組んでおります。そして何通りのデザインを作ってはボツになりまったくしっくりくるデザインが完成しません。この作業は実際にデザイナーさんがいるくらいなのでセンスの一言に尽きるのかもしれませんが

子へびの悩み

①実際のサイズがかなり小さくなるためデザインいかんによっては細かすぎて何を表現しているかわからない。
②絵柄と色の配色をあまり多く入れすぎると何のアイコンなのかわけがわからなくなる。
③子へびのオリジナリティーを出したいものの、絵柄は既存に出ているicon画の組み合わせになるためオリジナティーを表現できているか疑問に感じる。

っと言うのが本音で、何百個とicon画色々検索しながら組み合わせて永遠に作業中です。
Master松陰にiconの作り方を聞いてなるほどっと作り方には理解したもののそれよりもセンスに苦労するとは・・・。

Master松陰

iconはアプリの顔なのでとても大事です!じっくり考えなさい。

とのこと。苦戦している子へびを見て笑っております。

子へび

とほほ・・・。