Monthly Archives: January 2017

Xcode: プロジェクトにカスタムフォントを追加する方法

開発するアプリの企画によっては、システムフォントでは表現力が弱い場合があります。 今回は Xcode プロジェクトへカスタムフォントを追加する際、必要となる作業をメモしておきます。 目次 プロジェクトにフォントを追加する まとめ プロジェクトにフォントを追加する FontBook で使用するフォントの PostScript 名を調べる macOS に標準インストールされている FontBook.app を起動し、インストールしたいフォントを選択します。ここでは Source Code Pro レギュラーを選択します。 FontBook のツールバーより iマークアイコン、もしくは ⌘+i でフォント情報を表示させ、PostScript 名をメモしておきます。 この PostScript 名 は、Xcode でコードからフォントを指定する ときに必要となります。 フォントファイルをプロジェクトへコピーする 先ほど FontBook で PostScript 名を調べたフォントファイルを、Xcode プロジェクトへ ドラッグしコピー します。 プロジェクトへフォントがコピーされていれば、ファイルを選択すればフォントのサンプルが参照できます。 info.plist > Fonts provided by application に追加する Xcode プロジェクトの info.plist で「+」ボタンをクリックし、Fonts Provided by application 項目を追加します。 先ほど追加したFonts Provided by application 項目の Item0 の value にコピーした フォントファイル名 を記述します。 Copy Budle Resources に追加する プロジェクト -> Build Phases -> Copy Bundle Resources にフォントファイルが追加されているか確認します。 ここにフォントファイル名がない場合、「+」ボタン よりフォントを選択し、フォントファイルを追加 しておきます。 ストーリーボードでカスタムフォントを利用する ストーリーボードのラベル等で、フォントを指定すればカスタムフォントが利用できるようになっています。 コードでカスタムフォントを利用する ソースコードからカスタムフォントを指定する場合は、以下のサンプルのように font 名に FontBook で調べた PostScript 名を記述します。 まとめ フォントをシステムフォントからカスタムフォントへ変更するだけで、アプリの印象はガラリと変わります。 また、似たような機能をもつアプリであっても UI デザインやフォントを変更することで、ユーザー体験はおおきく変化します。 やりすぎは注意ですが、適切なフォントを選択することで、より完成度の高いアプリになるのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Mac: メモ帳へのペースト時、スタイルを適用しない方法

いまさらですが、Mac のメモ帳をずっと愛用しています。 Mac ユーザーで iPhone 等の iOS デバイスを利用している方であれば、macOS に標準でインストールされているメモ帳は非常に使い勝手の良いアプリです。 そんなメモ帳の唯一の不満点が、リッチテキストや HTML をコピーペースト時に、デフォルトのショートカットではスタイルが適用されペーストされてしまう点です。 今回はペースト時に、スタイルを適用しないように設定したいと思います。 目次 メモ帳へのペースト時、スタイルを適用しない方法 まとめ メモ帳へのペースト時、スタイルを適用しない方法 システム環境設定 -> キーボード を選択します。 ショートカット タブ -> アプリケーション を選択し、+ ボタン でショートカットを追加します。 メニュータイトルに ペーストしてスタイルを合わせる (ここの文言は一言一句間違いのないように)とし、キーボードショートカットでキーボードから ⌘V を押し、追加 をクリックします。 これでメモ帳へ ⌘V でのペーストにスタイルが適用されなくなりました。 ペースト時にスタイルを適用したい場面もあるかもしれない方は、さらに + ボタン より、メニュータイトルに ペーストしてスタイルを保持 とし、キーボードショートカットでキーボードから ⇧⌘V (⇧は Shift)を押し、追加 しておくといいかと思います。  まとめ macOS のメモ帳の良い点は、あまり多機能にせずシンプルに設計されている点だと思います。 ペースト時のスタイル適用が人によっては便利な場合もありますが、プレーンテキストによる文字列の保存・共有と割り切って利用している方は、今回の設定を行うことをオススメします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: background ショートハンド(複数指定) background-size の記述方法

久しぶりに CSS を書いていると、ついつい忘れてしまうのが background のショートハンドです。 今回は background ショートハンドへ background-size を記述する方法をメモしておきます。 目次 background ショートハンド(複数指定) background-size の記述方法 まとめ background ショートハンド(複数指定) background-size の記述方法 以下、background でよく行うであろうプロパティを個別に記述した場合、ショートハンドで記述した場合のサンプルをそれぞれ用意しました。 background 個別指定 background ショートハンド(複数指定) ショートハンドでは /cover とすることで background-size: cover を指定することができます。 まとめ CSS の background ショートハンドは CSS2 では多様していましたが、CSS3 からは設定項目が大幅に増えたため、コードの見通しが悪くなってしまいがちです。 慣れないうちは、多少面倒でも個別にプロパティを指定し記述する方法が、混乱も少なくいいのかもしれませんね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法

一部の HTML エディタでは Shift + Enter キーで br タグ が自動挿入されとても便利です。 今回はこの動きを Atom エディタで再現したいと思います。 目次 Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法 まとめ Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法 Atom を起動し、メニューの Atom -> 起動スクリプト を選択します。 init.coffee ファイルが開きますので、以下のコードを記述し保存します。 init.coffee 次に、メニューの Atom -> キーマップ を選択します。 keymap.cson ファイルが開きますので、以下のコードを記述し保存します。 keymap.cson Atom を再起動すれば、Shift + Enter で br タグ が挿入されるようになります。 まとめ 今回のカスタマイズは、HTML ページの設計時にはそれほど必要ではありませんが、コンテンツ自体の更新作業のコーディングとなったとき、よりクリエイティブに集中できるため、重宝される機能だと思います。 Atom をメインでディタとして HTML コーディングを行なっている方は、是非とも導入してみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。