佐藤 剛士

佐藤 剛士

Japan Tokyo
PMとデザイナーが知るべきiOS 14 新機能Widgetのすべて
iOS

PMとデザイナーが知るべきiOS 14 新機能Widgetのすべて

6月にWWDC20が発表され、次期iOS 14にはWidgetという新機能が登場することが判明しました。 Apple、iOS 14でiPhoneの体験を刷新 [https://www.apple.com/jp/newsroom/2020/06/apple-reimagines-the-iphone-experience-with-ios-14/] より抜粋 この記事ではWidgetのUI/UXをまとめます。 PMとデザイナーが「Widgetを自プロダクトに導入する」にあたって、「Widgetがどういうものなのか」を理解するためにこの記事が役に立つでしょう。 記事の内容はUI/UXに絞っているため技術的な観点からの言及は少ないです。 予めご了承ください。 免責 8月10日現在、WidgetについてはApple Beta Software Programにあたるため、スクリーンショットを独自でとることはNDAの観点から避けなければいけません。 この記事ではAppleの公式サイト、WWDCのVideoからキャプチャーを利用いたします。 引用と判別ができるよう、キャプチャーを取得した
9 min read
[SwiftUI]選択可能なUIコンポーネントの作り方【ラジオボタン偏】
iOS

[SwiftUI]選択可能なUIコンポーネントの作り方【ラジオボタン偏】

前回 [SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】 [https://blog.personal-factory.com/2020/07/11/how-to-create-selectable-ui-component-by-swiftui-in-multiple/] で複数選択ができるUIコンポーネントをSwiftUIで作る方法を解説しました。 今回はHTMLのラジオボタンのように複数あるViewの内一つのみ選択するコンポーネントを作ってみます。 まずは動きをみていきましょう。 赤、緑、青のビューがあって、赤をタップすると黒枠が追加されて選択状態ということがわかります。デバックエリアにも「selected box is red」と出力されます。 他のビュー、例えば緑をタップすると、赤のビューの黒枠は消えて、緑のビューが黒枠でおおわれるようになるというしだいです。 選択するViewのタイプを定義 ユーザーが何を選択したかを判定できるようにBoxTypeというenumを定義します。 enum BoxType: String { case unkn
4 min read
[SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】
iOS

[SwiftUI]選択可能なUIコンポーネントの作り方【複数選択偏】

人はときにタップをしたらそのビューを選択状態にするコンポーネントが必要になることがあります。 ちょっと手こずったのでブログに作り方を残します。 今回は複数選択する場合を解説したいと思います。 実行環境 * Xcode 11.5 * iOS 13.5 複数選択可能なUIコンポーネント HTMLだとチェックボックスがいい例ですが、複数選択できるコンポーネントがあると素敵ですよね。 作ってみましょう。 赤、緑、青のViewがあって、タップするとViewに黒枠が追加されて選択状態がわかるようになります。 またコンソールにもタップされたら「red is selected」 。もう一度タップすると「red is not selected」というようなメッセージができるようにしています。 ViewModelの定義 まずはデータまわりを定義していきましょう。 MultipleSelectableViewModelというクラスを定義します。 final class MultipleSelectableViewModel: ObservableObject { @Publish
4 min read
[macOS]Bashでファイル名を一括変換する

[macOS]Bashでファイル名を一括変換する

開発メモです。大量のファイル名を一括で変換する必要がでてきたので、方法を調べてみました。 今回はmacOSでの解説になります。 実行環境は次の通りです。 * macOS Catalina 10.15.4 renameするファイル こんな構造のファイルがあるとします。 $ tree . . └── dic ├── bb_1.txt └── bb_2.txt dicディレクトリ以下のbb_1.txtとbb_2.txtのbbをaaに変えていきたいと思います。 renameコマンドを使う方法 renameコマンドを使ってリネームしてみます。 macにはLinuxのrenameコマンドはないので、brewでまずインスールします。 $ brew install rename あとはfindでリネーム対象のファイルを検索して変換します。 $ find dic -name "*bb*" | xargs rename -s bb aa mvコマンドを使う方法 renameコマンドを使わなくてもmvコマンドでfor文を回せばリネームはできます。 $ for f
1 min read
【WWDC20】Introduction to SwiftUI の雑メモ
Swift

【WWDC20】Introduction to SwiftUI の雑メモ

WWDC20のIntroduction to SwiftUIをみました。 雑にメモを残そうと思います。 https://developer.apple.com/wwdc20/10119 * ライブラリーからdrop and dragでViewコンポーネントをeditorに入れられる * ライブラリーペインからcornerRadius modifierをキャンバスに落とす * コードに追加される * previewのresumeショートカット * ⌘+option+P * Extract Subviews * View実装が大きくなったとき使う。追加でViewのレイアウトを増やしたい。でもすでにたくさん実装していてコードが大きくなっている。 * Extract Subviewsを使ってViewを新しい型に切り分けることができる * spacer、スペースが可能な領域までできるだけ広がる。 * テキストを真ん中によせるために今回は使った。 * Detai
4 min read
Node.js

nobleでお手軽BLE通信(構築編）

nobleというNode.jsのパッケージがある。 公式のGithubページは以下です。 noble [https://github.com/sandeepmistry/noble] これをいれれば、自分のパソコンをBLEの発信機にすることができるすごいパッケージなのです。 今回はGithubのサンプルを試して見ようと思います。 ですが、久しぶりにNode.jsを触ったのでインストールに手こずりました。。 RubyとかNodeとか、環境構築に一番時間がかかる気がする。。 Gemとかnpmが一発でインストールできた例がない。。 では行きます！ 実行環境 今回は、以下の環境で試しました * OS X El Capitan 10.11.6 * ✗Node.js v6.9.1 -> ◯v4.7.2 最初一番新しい安定バージョンv6.9.1で試したら動かずv4.7.2で試したら動いたというのが今回のあらましです。 Githubのサンプルを試す 最初node.jsのバージョンはバージョンv6.9.1で試しました。 Githubのリポジトリーを見る限りexamplesディレクト
3 min read
【iOS】新年明けたので、画面に花火を散らしたよ

【iOS】新年明けたので、画面に花火を散らしたよ

2017年になりました。 新年あけましておめでとうございます。 新年一発目のUIトレース会を1月12日に株式会社オハコ様にて行いました。 【朝活】iOS_UIトレース会 #7 [https://ios-app-developers.connpass.com/event/48038/] 2017年の元旦にFacebookが面白いイースターエッグを実装していました。 ポストをするとその文字に「あけおめ」や「Happy New Year」などの特定の文字があるとボタンになって、それをタップすると花火のアニメーションが打ち上げられるのです。 以下のYoutube動画で動きが確認できます。 これをお題募集アンケートに出したらぶっちぎりでFacebookが一番になりました。 https://www.facebook.com/groups/407821455988195/permalink/1196346283802371/ 今回の記事では、朝活で私が実装した例を紹介したいと思います。 -----------------------------------------------
2 min read

Swift3でFacebookログインをする

FacebookのSDKがSwift3になってからいろいろ変わっていたのでまとめました。 実施環境 この記事は以下の環境で確認しています。 * Xcode8.2 * Swift3 * Cocoapod 1.1.1 * Facebook Swift SDK 0.2.0 -------------------------------------------------------------------------------- 目次 1. Facebookデベロッパーでアプリを作成する 2. CocoapodでFacebookのSDKをインストールする 3. info.plistの設定 4. AppDelegateの設定 5. ログインボタンを作成しログインする 6. ログイン中のユーザー情報を取得する -------------------------------------------------------------------------------- Facebookデベロッパーでアプリを作成する Facebookと連携したアプリを作るには
3 min read
かえる秋祭りに参加してきました
イベントレポート

かえる秋祭りに参加してきました

先月2016年10月30日に、かえる好きのかえる好きによるかえる好きのためのイベント「かえる秋祭り」に出展者として参加してきました。 このイベントは「かえる友の会 [https://twitter.com/kaerutomonokai]」が主催のイベントで第17回目を迎えるそうです。 Yahooニュースでも記事が載っていました。 中野で「かえる秋祭り」開催へ　「カエル」グッズ作家一堂に、高山ビッキさん講演も　／東京 [http://headlines.yahoo.co.jp/hl?a=20161027-00000008-minkei-l13] カエルタベル出展してきました。 私は、去年の冬に作成したカードゲーム「カエルタベル [http://kaerutaberu.info/]」を出展してきました。 「カエルタベル」ははえが動いてカエルが食べる新感覚カードゲームです。 友達と、恋人と、親子とさくっと遊べて、もっと仲を深められるカードゲームです。 設営の様子。 今回からフィールドマットを追加しました。これでもっと遊びやすくなりました。 ゲーミフィジャパン [h
2 min read
Automatorで快適なキャプチャ生活をおくる
Tips

Automatorで快適なキャプチャ生活をおくる

ブログを書く上でけっこう手間なのが、画面のキャプチャです。 技術ブログを書く上で、現状PC上の画面を共有するためにMac標準のプレビューアプリで画面をキャプチャしています。 しかし標準のプレビューアプリ、デフォルト設定だとなかなかかゆいところに手がとどかない仕様になっています。撮影した後色々と手間を掛けないといけないのがつらいです。 具体的には * デフォルトでは画像の保存先は~/Desktopになっています。このままだと取る度に画像が増えて~/Desktop が散らかるので私はブログ用の保存フォルダを作成していちいち画像を移動していました。 * 画像のサイズがとてつもなく大きいです。PCのディスプレイ解像度が上がっているので仕方がないのですが、１つのウインドウをキャプチャしただけで数千ピクセルの画像が出来上がってしまいます。このままブログにあげても無駄ですのでいい感じにリサイズをしたい。 * デフォルトでは画像形式はPNGになるので、容量を減らすためにJPEGで保存したい そこでいろいろ解決策を考えていたところ、Automatorというアプリを使えば楽に自動化でき
4 min read
Javascript

東京Node学園祭2016 参加レポート

昨日、2016年11月13日、Node.js日本ユーザグループが主催する日本で最大のNode.jsのカンファレンス東京Node学園祭に参加してきました。 渋谷のマークシティーで行われ、Javascriptそのものやその周辺のツールを開発方が直々に登壇するという大変豪華なカンファレンスでした。 以下が登壇者の一覧です。 Douglas Crockford 氏 * ECMAScriptの仕様化団体の一人であり、JSONの開発者です。 James Snell 氏 * WhatWG Social Activity WG の仕様化を進める一人であり、 Node.js core committer Bradley Meck 氏 * ECMAScript 仕様化団体の一人であり、 Node のモジュールエコシステムの今後の鍵を握る人物 Cheng Zhao 氏 * デスクトップアプリ開発が可能な Electron の作者 Yoshua Wuyts 氏 * React/Redux をベースに次世代の フロントエンド開発フレームワークである choo の開発を進める人物 今回の
3 min read
Swift

Playground でURLSessionを試す(GET編)

iOSの標準ライブラリーだけで通信処理をすることになったのでこの基にURLSessionの使い方をみてみる 環境 * Xcode8 bata4 * Swift3 * Playground サーバーはWebAPIをとりあえず試せるサイトhttp://httpbin.org/を使用します GETで実行 //: Playground - noun: a place where people can play import UIKit import PlaygroundSupport //Construct url object via string var url = NSURL(string: "http://httpbin.org/get") let config = URLSessionConfiguration.default let session = URLSession(configuration: config) var req
1 min read