Cordova開発環境をつくる

  • 2017/01/12更新:Macを再インストールしたので再度検証、応じて各所編集

ハイブリッドアプリ開発環境は昔試したことがあるのですが(確かMonacaだったような)、AdobeのOSSサービスを見ていてそういやCordovaってどうなんだろなと思い構築してみました。

結果としては結構やること多かったです。何とかミニマルに行けないかと色々試したものの、結局XcodeとAndroid Studioを入れないと最後まで動かなかったので、どうやらCUIツールのみで構築は推奨してないのかなと思いました。

前提環境

  • MacBook Pro 13″ Late2016
  • MacOS X Sierra 10.12.2
  • Homebrew導入済み

インストールした順番とバージョン

  1. nodebrew 0.9.6
  2. node.js 7.2.1
  3. Xcode 8.2
  4. Android Studio 2.2.3
  5. Genymotion 2.8.1
  6. cordova 6.4.0
  7. Visual Studio Code 1.8.1

参考サイト

全部掲載しているのでむちゃくちゃ長いです。

“Cordova開発環境をつくる” の続きを読む

Rictyなるものがあるらしい

【2015/12/25追記】
Homebrewなら以下の過程を勝手にやってくれるのでおすすめ。

$ brew tap sanemat/font
$ brew install ricty
$ cp -f /usr/local/Cellar/ricty/バージョン/share/fonts/Ricty*.ttf ~/Library/Fonts/
$ fc-cache -vf

これだけです。


リクティと発音するらしいです。

Rictyは英字フォントと日本語フォントを合成したもので、固定幅フォントで半角全角がきっちりと区切られ、1とlとか0とOのような紛らわしい文字がでないよう設計されているそうです。プログラミングだけでなく、Webのコーディングに威力を発揮する便利フォントらしいです。

Rictyはライセンス違反の解釈がなされるとして、既存フォントとして存在できなくなりました。なので、生成スクリプトを使ってコンパイル?することになります。

単にスクリプト実行したらええやんと言うわけでもなく、ライセンス様のおかげで手順が非常に多くなってます。

作成した環境はMacBook Air 11inch, Mid2012、Mountain Lion 10.8.4です。

MacPortsのインストール

フォントのコンパイルにはfontforgeが必要です。しかしfontforgeは単なるアプリというわけではありません。インストールにはMacPortsもしくはHomebrewが必要となります。Mac版Yumとかapt-getみたいなもんですね。

今回の作業について、私はHomebrewではなくMacPortsを使いました。

  1. The MacPorts Project — Home」にアクセス
  2. 右上の「Download」をクリック
  3. 「Installing MacPorts」本文にある「Mountain Lion(使用しているMacのバージョン)」のリンクをクリックしてダウンロード(MacPorts-2.2.0-10.8-MountainLion.pkg)
  4. ダウンロードしたpkgを開いてインストール

このあとコンソールから「port」と打てば動作確認OKとなるのですが、エラーが出る場合があります。

Mac内にコマンドライン用ツールが入ってないことが原因なので、これを解決するにはXcodeを入れる必要があります。

  1.  AppStoreからXcodeをインストール
  2. メニューの「Xcode」→「Preference」をクリック
  3. 「Downloads」タブをクリック
  4. 「Command Line Tools」横の「Install」ボタンをクリック

これでMacPortsが使えるようになります。

fontforgeのインストール

MacPortsが使えるのを確認できたら、次にfontforgeをインストールします。

$ sudo port install fontforge

これだけ。インストールが完了したら、「fontforge -version」と打って動作確認するわけですが、ここで「X11もインストールしてね!」と言われますので指示に従います。以前にX11をインストールした人は出ないと思います。

  1. 「アプリケーションからX11へのアクセスを要求され・・・」というメッセージが出たら「続ける」をクリック
  2. AppleのサイトにXQuartzへのリンクが提示されるので、それをクリック
  3. 「Quick Download」にある「XQuartz-2.7.4.dmg」をクリックしてダウンロード
  4. ダウンロードしたファイルをマウントし、「XQuartz.pkg」をインストール
  5. 再起動

XQuartzはX11と互換性のあるライブラリ群?で、以前はAppleがX11を配布していたのですが、Lionあたりから後継のXQuartzを推奨するようになったそうです。

念のため以下のコマンドを打ってちゃんとインストールされているか確認してください。

$ fontforge -version
Copyright (c) 2000-2012 by George Williams.
 Executable based on sources from 14:57 GMT 31-Jul-2012-ML.
 Library based on sources from 14:57 GMT 31-Jul-2012.
fontforge 20120731
libfontforge 20120731-ML

Rictyの生成とインストール

Rictyの生成には、スクリプトとInconsolata、Migu 1Mフォントという3つのファイルが必要となります。

まずは各ファイルのダウンロードから。

  1. yascentur/Ricty · GitHub」にアクセス
  2. 右側にある「Download ZIP」をクリックしてスクリプトをダウンロード(Ricty-3.2.2.zip)
  3. Inconsolata」にアクセス
  4. 「OpenType file」をクリックしてInconsolataフォントをダウンロード(Inconsolata.otf)
  5. Miguフォント : M+とIPAの合成フォント」にアクセス
  6. 「Migu 1M」右側にあるリンクをクリックしてダウンロード(migu-1m-20130617.zip)
  7. それぞれ解凍する

次にスクリプトを使ってRictyフォントを生成します。

  1. Inconsolata.otf、migu-1m-bold.ttf、migu-1m-regular.ttfをRictyのフォルダへ移動
  2. ターミナルでRictyフォルダに移動
    「$ cd Downloads/Ricty-3.2.2」
  3. $ sh ricty_generator.sh Inconsolata.otf migu-1m-regular.ttf migu-1m-bold.ttf
  4. Ricty-Bold.ttf、Ricty-Regular.ttf、RictyDiscord-Bold.ttf、RictyDiscord-Regular.ttfができたのを確認
  5. それぞれを開いて「フォントをインストール」をクリック

これでRictyフォントの生成とインストールが完了しました。フォント一つにどんだけ時間かかってんだという感じです。

実は、姉妹フォントに「Ricty Diminished」というのがあって、これはフォントファイルとして配布されています。

なにが違うねんというと、Migu 1MではなくCircle M+ 1mを使用し、IPAフォントの一部を省いたものだそうで、使用できる漢字や記号が少ないのだそうです。

日本語を打つのが少なくて、プログラミング特化であればこのフォントでいいのかもしれません。ただ、Webの場合は文字があってナンボのところがあるので、無印Rictyを使うことになるでしょう。

Wordpressの投稿画面で編集できない時の対処法

WordPressの投稿画面で、内容の編集ができないという障害があったのでメモ。

症状としては、コンテンツ編集で使われているTinyMCEが無反応になるというものでした。
検証していくと、IE9であることが原因であることがわかりました。Windowsのバージョンは関係無いようです。

IE9は描画の解釈が今までと違うようで、IE9の標準モードではなく互換モードで表示する必要があるという感じでした。

WordPressの管理画面にテーマなんてものがそもそもないので、特定のファイルを直接弄る必要があります。でも手順はとても簡単。

  1. wp-admin/admin-header.phpをエディタなどで開く
  2. 20行目あたりに「<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″>」を追記

IEで見た時に「このページは互換モードで描画してね」という一文をヘッダに追記してやることで、TinyMCEがちゃんと動いてくれるようになりました。

Wordpressのメール通知に外部サービスを使う

障害対応でちょこっと引っかかったのでメモ。

自宅や自社サーバでWordpressを構築した場合、パスワードの再発行やコメント通知に使用されるメール通知に昔は同じサーバ内のPOPやSMTPを使用していたかと思います。
最近はYahooやGmailなどの外部サービスがメインになってきたことから、従来のメール通知が使えなくなってきました。

今回はメール通知の送信先にYahooやGmailのSMTPサーバ使えるようにする設定をメモします。

ちなみに今回の記事は 「メール投稿」の話ではありません。メール投稿はちゃんと設定項目があるのでそこに適切な値を入れればいいのですが、メール通知は設定項目がないので、プラグインを使用して設定することになります。

作業環境は「Wordpress 3.0.5」です。PHPが古いようで、最新版が使えませんでした。

手順はさほど難しくありません。

  1. WP Mail SMTPをダウンロード
  2. ダウンロードしたZIPを解凍して「wp-content/plugins」にフォルダごとアップロード
  3. WPのプラグイン管理画面を開いて「有効化」をクリック
  4. 有効化リンクがあったところに「設定」がでるのでそれをクリック
  5. 以下の項目を記入(Yahoo!メールの場合)
    From Email:送信のベースとなるメールアドレス
    From Name:Fromに表示される名前(「Wordpressから通知です」とか)
    メーラー:「WordpressのすべてのメールをSMTP経由で送信する」にチェック
    SMTP Host:ptnsmtp.mail.yahoo.co.jp
    SMTP Port:465
    Encryption:「SSLを使用する」にチェック
    Authentication:「はい:SMTP認証を使用します」
    Username:Yahooメールのユーザ名
    Password:Yahooメールのパスワード
  6. 「変更を保存」をクリック 
  7. テストメールの送信でFrom Emailと違うアドレスを入力して送信できるかテストする

これでメール通知ができるはずです。

プラグインについては、WP Mail SMTPのほかにCimy Swift SMTPというものもあったのですが、実際に送信しようとすると「mail()が有効になっていない」とのメッセージが出たので使えませんでした。

Mac+XAMPPでWeb制作環境を構築してみる【XAMPPセキュリティ設定編】

前回でXAMPPのインストールが完了しましたが、インストール直後はMySQLのパスワードがなかったりとセキュリティ的に穴だらけの状態です。Apacheやらの設定ファイルを弄る前に、基本的なセキュリティ対策をしておきます。
インストールや起動までは簡単だったのですが、突如難易度が上がってここから先は基本的にターミナルを使って設定作業を行います。

rootは有効ですか?

ここでのrootはMacそのもののrootです。これが有効でない場合、XAMPPの設定が行えません。

  1. システム環境設定を開く
  2. 「ユーザとグループ」をクリック
  3. 「変更するにはカギをクリックします」をクリック、認証
  4. 「ログインオプション」をクリックし
  5. 「編集…」をクリック
  6. 「ディレクトリユーティリティを開く…」をクリック
  7. メニューバーの「編集」→「ルートユーザを有効にする」をクリック
  8. パスワードを設定して「OK」をクリック
これで、Macのrootユーザが有効になります。
コンソールでrootにスイッチする時、「$ su -」か「$ sudo コマンド」のどちらかを使用することになりますが、ここでは「sudo」を使うことにします。 
【20120911追記】
普通にターミナルから設定でもいいみたいです。
$ sudo passwd root

設定ファイルの編集はviで

ApacheやMySQLの設定ファイルを編集する際、「vi」コマンドを使用します。最低限以下のコマンドが使えたらいいです(個人的なメモも兼ねてます)。いろいろ覚えてると便利なのですが、ぶっちゃけ「i(編集)」と「:wq!(保存して終了)」さえ使えればいいです。

  • viを終了:esc→:q
  • 保存して終了:esc→:wq!
  • 編集モード:i
  • 編集モード解除:esc
  • 行単位で削除:dd
  • 行番号表示::set number
  • 指定行へ移動:行番号G ※「0G」で最下行へ移動
  • ワード検索(下方向):/検索したい文字
  • ワード検索(上方向):?検索したい文字
  • 次を検索:ワード検索実行後n
  • 前を検索:ワード検索実行後N

XAMPPのセキュリティ設定

$ sudo /Applications/XAMPP/xamppfiles/xampp security<ENTER>
Password:<ユーザパスワード>
XAMPP: Quick security check...
XAMPP: Your XAMPP pages are NOT secured by a password.
XAMPP: Do you want to set a password? [ja]<ENTER>
XAMPP: Password: <パスワード>
XAMPP: Password (again): <パスワード>
XAMPP: Password protection active. Please use 'xampp' as user name!
XAMPP: MySQL is accessable via network.
XAMPP: Normaly [ja] <ENTER>
XAMPP: Turned off.
XAMPP: Stopping MySQL...ok.
XAMPP: Starting MySQL...ok.
XAMPP: MySQL has to run before I can check the security.
XAMPP: MySQL has to run before I can check the security.
XAMPP: MySQL has a root passwort set. Fine! :)
XAMPP: ProFTPD has a new FTP password. Great!
XAMPP: Do you want to change the password anyway? [nein]<ENTER>
XAMPP: Done.

この設定をして「http://localhost」にアクセスするとログイン画面が表示されるようになります。
ユーザ名を「xampp」、パスワードを先ほど設定したパスワードでログインしてください。 

phpMyAdminのセキュリティ設定

次に、phpMyAdmin用のrootパスワードを設定します。phpMyAdminはブラウザ上でMySQLのテーブルを管理できるようするもので、いちいちコマンドで確認するよりも一覧性が高く便利なものとなっています。バックアップやリストアも簡単に行えます(文字化けが起きやすかったりしますが)。
設定を行う前に、予めXAMPP ControlのApacheとMySQLサービスをStartしておいてください。

$ sudo /Applications/XAMPP/xamppfiles/bin/mysqladmin -u root -p password <パスワード>
Enter password: <ENTER>

この時点では、「MySQL内のrootパスワードを設定した」だけなので、phpMyAdminにアクセスしても認証エラーが出てしまいます。
phpMyAdminの設定ファイルを編集して、ログインできるようにします。

$ sudo vi /Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php
【34行目変更】
$cfg['Servers'][$i]['password'] = '<上記で設定したパスワード>';

これでXAMPPのセキュリティ設定は完了です。localhostにアクセスし、「セキュリティ」がすべて「安全」になっていること、phpMyAdminが表示されることを確認してください。