Tech Posts

iOSアプリMemoriaRの技術的な工夫として、iCloud Photosの同期とCoreData（CloudKit）の同期を組み合わせることで、アプリが扱うデータ量を最小化した設計について紹介します。

本プライバシーポリシーは、Natsuki Harai（以下「サービス提供者」）が提供するモバイルアプリケーション「MemoriaR」（以下「本アプリケーション」）に適用されます。本アプリケーションはフリーミアム形式で提供され、「現状有姿（AS IS）」で利用されることを前提としています。

This privacy policy applies to the MemoriaR app (hereby referred to as the "Application") for mobile devices that was created by Natsuki Harai (hereby referred to as the "Service Provider"). The Application is provided as a Freemium service and is intended for use "AS IS".

MemoriaR は、写真を使って動画を現実の空間と結びつけるアプリです。日常の思い出を、飾って、いつでも呼び起こせる形で残せます。

MemoriaR is an app that lets you connect videos to real places using photos. Turn everyday moments into memories you can display and revisit in your own space.

elm-pages のサイトに Google Analytics 4 を設定するには /elm-pages.config.mjs の記述が必要です。

Radix UI を使って共通UIコンポーネントを作る際の、そのディレクトリの構成について考える。

テストダブルはモックとスタブの2種類に大別できるが、何がモックで何がスタブかを簡単に説明する。

imgタグのsrc画像が取得できない場合にフォールバックの画像を設定する方法を解説する。HTMLとReactの両方の実装方法を紹介する。

React Hook Form は React でフォームを扱うためのライブラリだ。React Hook Form に複数の使い方が存在するが、どういう場合にどの使い方を選ぶべきかについて解説する。

Markdown記法では画像の表示サイズを指定できない場合がある。表示サイズを指定し、Markdownライブラリにそれを解析・表示させるようカスタムすることで、簡単に実現する方法を紹介する。

ブログサイトを構築のテンプレートを elm-pages で作りました。よければ使ってみてください。

私の書く記事はどうやら多くの人に読まれるらしい。それを再現させられる、私なりの執筆技術を紹介しよう。

GTMやブラウザ拡張によって引き起こされるElmアプリケーションのフリーズについて、原因と対処方法を紹介する。

分割キーボードの Corne Chocolate を使い始めてから1年と少しが経ったので長期レビューをする。

分割キーボードのをテンティングすることで楽に打てて打鍵音が良くなるのではと思い試してみた。

キーキャップの色んなカラーリングパターンを試してみた

Corne Chocolate を持ち運ぶためのキャリーケースが欲しかったのだけれども、探してもちょうど良いのが見つけられなかったので自作することにした。

Zellijを使っている際に、どうすれば選択範囲をコピーできるのか紹介する。

自作した Corne Chocolate のキーマップを自分好みにカスタマイズしていきます。

CLI環境を見直して整えたので、その備忘録。AlacrittyとZellijの組み合わせが良かった。

失敗した無線化Corne Chocolateの自作に再挑戦しました。

自分のメガネを片目だけARグラスにする小型デバイスMonocleを紹介する。

Rocの構想は Elm-inspired らしいので、Rocも自分好みの言語かもしれない。そう思って調べてみた。

無線化 Corne Chocolate の自作に挑戦した記録。結果的には失敗しましたが何かの役に立つかもしれないのでビルドログを残します。

DBマイグレーション時にschema.rbのcollateが変わる問題について調べた。

分割キーボードが肩こり解消に効果的だと聞き、どんなキーボードにしようかと考えて選び抜き、自作に必要なものを準備をしました。

この記事はAIとは何か、AIに使われる手法にどんなものがあるかが大まかに把握するための備忘録である。

関数型プログラミングの特徴の一つであるカリー化やパプライン演算子を一連の流れで学ベル記事です。

私が Elm を書く際に UI をどのようにモジュール化しているか、そのパターンを書いてみる。

自分がどんな風にElmというプログラミング言語を学んできたか、何をみて情報を集めているかまとめてみる。Elm を学び始めた人の参考になれば幸いだ。

個人開発をしたいけど題材がない、アイディアがなくて始められない。どうやって題材を見つけらればよいのか？

あるWebページが色々なケースで使い回されいて、ソースコードも設計もUIデザインも理解が難しいという状況に直面したことがある。あのときどうすればよかったのだろかとふと考えてしまったのでつらつらと書いてみる。

WebRTCを利用するために何が必要となるのか調査した。個人的なモチベーションとしては、1対１のボイスチャットを想定してた場合に自分で構築・運用できるようなものなのか知りたかったので、調査範囲としては ほどほど。

OSSライセンスはソフトウェアエンジニアなら知っておかなければならないことの一つだ。OSSライセンスの種類や、ライセンスなしに公開されたソースコードの扱いについて解説する。

近年ではPCもスマートフォンも、HiDPIのディスプレイが当たり前になってきた。Webページに画像を表示する際、HiDPIディスプレイで粗く見えないようにするための方法を紹介する。

2020年時点でProgressive Web Apps (PWA) がどのような機能をサポートしているか、AndroidとiOSそれぞれについて調査した。

elm-3d-scene を使って 3DCGプログラミングをやってみた記録。今回は物理演算を実装する。

elm-3d-scene を使って 3DCGプログラミングをやってみた記録。

Reduxを使う場合に限らず、ディレクトリ構成を考える際には「分割」と「分散」の度合いを意識することが役に立つ。これについて例を示しながら解説する。

Color Stew というデザイン用のWebアプリを作った。この記事では作る際の苦労や所感を紹介する。

カラースキーマの理論に基づいた美しいカラーパレットを簡単に作成できるWebアプリ "Color Stew" を開発した。

ARKitでの画像認識時に発生する Invalid reference image というエラーの原因を実行時に特定し対処する方法の紹介

ARKit を使ってアプリを作ったので、それに際し気にかけたことやノウハウを雑にまとめておく。

AR Photoplay はAR(拡張現実)の技術を利用したムービーアルバムのアプリです。

AR Photoplay is an unique video album application with Augmented Reality technology.

App Store Connect で iOS(MacOS) アプリの App プレビューを登録しようしとしたときにこのエラーが何度も出て困ったので、解決方法を記しておく。

今更ながら AMP というWeb高速化のための技術が気になり、調べたのでまとめる。

I created a library FlexibleAVCapture to take any rectangular shaped videos.

Use Flex Camera to take square videos, tall videos, and more!

iPhoneで好きな形状の動画を撮影するためのライブラリ FlexibleAVCapture を作成した

Flex Camera を使えば、正方形の動画でも、細長い動画でも思いのままに

iOSでフロントカメラとバックカメラを切り替える方法を紹介する。しかも切り替えの際、カメラ画面がくるっと 回転するカッコイイアニメーション付きだ。

AVCaptureSession を使ってカメラを利用するシーンにおいて、ピンチイン/ピンチアウトのジェスチャーで ズームイン/ズームアウト させる方法を紹介する。

AVCaptureSession を使ってカメラを利用するシーンにおいて、ピンチイン/ピンチアウトのジェスチャーで ズームイン/ズームアウト させる方法を紹介する。

ElmのFlagsを使ってJavaScriptからElmに引数を渡し、Elmアプリケーションを初期化する方法を紹介する。

Unfair Roulette は止まる目を操作することができる、そんなルーレットだ。それをElmがどのように実装したのかを解説する。

ルーレットの止まる目を操作することができる、そんなルーレットだ。悪事や人を傷つけることには使わないこと。

Elm で SVG を使って円グラフを表示する方法を紹介する。

プログラミング言語Elmの基本コマンドをまとめて紹介する。

iOSで正方形の動画を撮影する方法を紹介する。実際には正方形の動画を撮影しているわけではなく、動画を正方形に加工している。

iOS アプリでカメラやフォトライブラリなどへのアクセス許可を促す方法を紹介する。ユーザーが一度拒否した後でも、設定アプリから許可できるようにする。

iOSでトーストを表示するためのライブラリHNToasterを紹介する。たった１行のコードでトーストが表示できる。

iOSでよくある Activity のシェア機能を実装する方法を紹介する。UIActivityViewControllerを使うと簡単に実装できる。

iOS で印刷する機能を実装する方法について紹介する。AirPrint を利用して簡単に印刷機能を実装できる。

Xcode の Printer Simulator を使って、実機のプリンターがなくても印刷機能を開発する方法を紹介する。

Apple が公開している開発者向けツールのダウンロード方法を紹介する。

iPhone のフォトアルバムにある動画をアプリ内に保存する方法を紹介する。

Realm Swift で Auto increment ID を実装する方法を紹介する。削除されたオブジェクトのIDを再利用しないようにする方法も紹介する。

UIVideoEditorController を使って動画をトリミングする方法を解説する。

Swiftのpresentで画面遷移する際のアニメーションを4種類紹介する。coverVertical, crossDissolve, flipHorizontal, partialCurlの使い方を解説する。

Swiftでツマミが2つのスライダーを実装する方法を紹介する。WARangeSliderライブラリを使い、動画トリミングなどの用途に役立つRange Sliderの使い方と拡張方法を解説。

Swiftで画像から正方形のサムネイルを生成する方法を紹介する。

動画中の指定した秒数の部分を静止画像として取り出す方法について調べたので紹介する。

iOS アプリでカメラ映像を全画面表示するための UINavigationBar と UIToolbar の透明化方法

UICollectionViewCell のチェックマークの配置がスクロールで変わる問題を解決する方法を紹介する。

UICollectionViewCell にチェックマークをつける方法を紹介する。iOS標準の写真アプリのように、選択された Cell にチェックマークを表示することができる。

Mac のエディタでよく使うキーボードショートカットをまとめました。カーソル移動やコピー・ペーストなど、作業効率を上げるための便利なショートカットです。