モバイル対応が捗る!ブログのカスタマイズに便利な無料Macアプリ

ご注意

この記事は2015年7月19日に書いたものです。 情報が古くなっている可能性があるのでご注意ください。

Blog custom mac app 20150719 14

ブログの見た目をカスタマイズしたりテーマを作ったりするときに便利な無料のMacアプリをご紹介したいと思います。

その名はXcode!

知っている人は知っているかと思いますが、iPhoneやMacのアプリを作るときに使うあのアプリです。

iPhoneを持っていなくても、XcodeについているiOSシミュレータでiPhone6Plus・iPhone6・iPhone5S・iPhone4S・iPadAir・iPad2から見たときのデザインをチェックすることができます。

Xcodeを使ってデザインをチェックする方法をご紹介したいと思います。

スポンサードリンク

Xcodeをインストール

MacにXcodeが入っているのを前提に話を進めていきます。

Xcodeが入っていない方はこちらからどうぞ。無料です。

Xcodeの起動からシミュレータで確認するまで

Blog custom mac app 20150719 01

まずはXcodeの初めての起動からシミュレーターを動かすところまで説明していきます。
そんなの知ってるよって場合はシミュレータを使ってカスタマイズからお読みください。

Xcodeを開くと上のような画面が開きます。

赤く囲った「Create a new Xcode project」を選択します。

そうするとXcodeが開いて、何かを選んでNextを押してくれと言われます。

現在(2015/07/18)のXcodeのバージョンは6.4となっています。
※バージョンが変わると若干内容が変わっている可能性もあるのでご注意ください。

プロジェクトの新規作成

Blog custom mac app 20150719 02

①iOSの下にあるApplicationを選んで
②「1」の絵がかいてあるSingleViewApplicationを選んで
③Nextボタンを押します。

名前をつける

Blog custom mac app 20150719 03

次の画面では作成するプロジェクトに名前をつけます。
この先は半角英数字を使って名前をつけていきます。

今回はファイル名を「MobileViewCheck」としました。
適当にわかりやすい名前で構いません。

ファイル名の下には自分の名前とブログのドメイン名をいれます。
ドメイン名はブログがkotalab.comならcom.kotalabという風に後ろから入れていきます。
ドメイン名がkotalab.co.jpならjp.co.kotalabです。

LanguageとDevicesを選んだらチェックボックスを外してNextボタンを押します。

するとファイルを保存する場所を聞かれるので、好きな場所に保存してください。

シミュレータを起動させる

Blog custom mac app 20150719 04

保存場所を決めたら上の画面のようにXcodeが開きます。

左上にある「iPhone6」と書かれた場所を選ぶと起動するシミュレータを選ぶことができます。

Blog custom mac app 20150719 05

iPad2からiPhone6までズラッと並んでいるので試したいデバイスを選んでください。
今回ぼくはiPhone4Sを選びました。

Blog custom mac app 20150719 06

デバイスの左にある再生ボタンを押すと

Blog custom mac app 20150719 07

シミュレータが立ち上がります。
真っ白な画面が立ち上がりますが大丈夫です。

Safariを開いてブログを見る

Blog custom mac app 20150719 08

iOSシミュレータのメニューバーにあるHardwareからHomeを選んでください。
ショートカットキーは「command + shift + H」です。

Blog custom mac app 20150719 09

Homeを押すと見慣れたiPhoneのホーム画面がでてきます。

Blog custom mac app 20150719 10

Safariを立ち上げて検索バーにブログのアドレスを入力したら

Blog custom mac app 20150719 11

ブログがiPhone4Sのサイズで見られるようになりました。

デバイスを変えて見た目をチェック

シミュレータを起動させるときに選ぶデバイスを変えれば他のサイズも試すことができます。

Mac一台あればiPhoneを持っていなくても、複数のデバイス確認ができちゃいます!

デバイスの中でもiPadやiPhone6Plusは大きな解像度で表示されて見づらいかもしれません。
シミュレータ起動中に「command + 1」〜「command + 5」までのショートカットキーでシミュレータのデバイスの大きさを変更できます。

シミュレータを使ってカスタマイズ

ここまではシミュレータからブログを表示させるまでのご紹介でした。

ここからはぼくが実際にやっているシミュレータを使ったブログのカスタマイズ方法です。

英語から日本語へ

このままではシミュレータの言語設定が英語のままなので、ブログで使っているフォントがうまく表示されないかもしれません。
まずはシミュレータのホーム画面に戻ってSettingアプリで言語を日本語に設定します。

Blog custom mac app 20150719 12

Settingアプリ→General→Language&Regionと進んで、iPhone Languageを日本語に変更します。
言語設定を変更するとシミュレータが落ちてしまうので、Xcodeの再生ボタンを押してシミュレータを再起動します。

シミュレータとSafariを組み合わせる

シミュレータだけではあくまでも見た目の確認しかできません。

iOSシミュレータはMacのSafariと組み合わせて使うこともできます。
MacのSafariでWebインスペクタを表示させるのと同じように、シミュレータで開いているページをWebインスペクタに表示させることができるのです。

Webインスペクタに表示させる

まずはシミュレータのSafariが起動している状態で、MacのSafariを起動します。

Blog custom mac app 20150719 13

この状態でメニューバーにある開発を開くと、iOSシミュレータという項目が出てくるのでそれを選びます。

Blog custom mac app 20150719 14

するとシミュレータで開いているWebページがWebインスペクタで開かれます。

MacのSafariで使うのと同じようにシミュレータのSafariでもWebインスペクタが使えます。

ユーザーエージェント変更とシミュレータの違い

MacのSafariではユーザーエージェントを変更することで、iOSのSafariから開いたような画面を表示させることができます。
ユーザーエージェントの変更でも似たようなことができるのですが、MacのSafariの画面サイズを調整しても実際のiPhoneで見たときとは若干違います。

より実際の見た目に近いのはシミュレータです。

iPhoneだけでも4Sから6Plusまで解像度が違うのでそれぞれのデバイスから見たときの見た目を調整するのは大変です。

そんなときに便利なのがXcodeで使えるシミュレータとMacのSafariで使えるWebインスペクタの組み合わせです。

さいごに

アプリ開発者ならともかく、Xcodeを使うことってあんまりないと思います。
Xcodeを使うとブログをカスタマイズするときにすごく便利なのでよかったら使ってみてください。

昨日の新しい体験


金曜
・AppleMusic はじめてのAI
土曜
・AppleMusic はじめてのBackstreet Boys
・LUSH表参道店

昨日の新しい体験とは?

スポンサードリンク

  • ゆとりをもった自由な暮らし、ストレスフリーな生活を送る
    1984年生まれ
    生まれも育ちも神奈川県川崎市

    詳しいプロフィールはこちら

    • follow us in feedly
    • Google+
    • フィード
    • お問い合わせ