[iOS] フォルメモ 3.0.0 をリリースしました。Vue.jsでカラーテーマエディタを作ったりしました。

2017/07/31

こんにちは。きんくまです。

フォルダで管理できるメモ帳、フォルメモの3.0.0をリリースしました。

フォルダとメモ帳。画像がメモに貼れるブラウザつきメモ帳 – フォルメモ

今回は、新機能をいろいろと盛り込んでいます。

・ウィジェット対応
・Share Extensionの取り込み対応
・カラーテーマ対応
・アプリ内Webブラウザ

などなど。

ウィジェット

ウィジェットはこんな感じにウィジェット画面に、メモを表示できます。

Share Extensionの取り込み対応

Share Extensionは、他のアプリからのコンテンツの取り込み対応です。

例えば、Safariを開きます。それで、下のShareアクションアイコンをタップ。

すると、どのアプリに共有するか選択画面になります。

共有する内容をチェック。

これで、内容がアプリに送られます。フォルメモを立ち上げると、、、。

こんな感じに、内容が入ったメモが追加されます。このShare Extensionは、これまではフォルメモから送り出すことはできていたのですが、受け取ることができなかったので、その対応となります。

アプリ内Webブラウザ

メモページにWebブラウザを追加しました。
メモの一番下に地球マークがあります。タップするとブラウザが起動します。

こんな感じです。アドレス欄に直接入力するか、キーワードをアドレス欄に入れるとgoogleで検索するようにしてあります。
ここで右下のメニューボタンを押して、メニューを開きます。

スクリーンショットをメモに追加したり、クリップボードの情報をメモに追加できます。
今回は、ページ情報をメモに追加しました。

こんな感じにメモに追加されました。

スクリーンショットがたまに失敗してしまうのですが（レンダリングのタイミング？）、、あると結構便利なので使ってみてください。

カラーテーマ

今回はカラーテーマに対応しました。カラーテーマを選択すると

こんな感じに、いろいろなテーマに変わります。

エディタをVue.jsで作りました

このカラーテーマについて。アプリ開発中はテーマファイルを作るために、Vue.jsを使ってエディタを作りました。

どんなやつなのかデモをアップしました。中央あたりの入力欄に16進数を入れると、左側のプレビューと、右下のXMLが変更されます。
Saveボタンのところは、ローカルで動かしているときはnode使って、ファイルの書き出しをしていますが、下のデモページだと動きません。

>> color theme editor

あと、なんでいまどきjsonじゃなくてXMLなの？という話なのですが、XMLは .plist ファイルとしてiOSでは扱うことが可能です。その場合、標準機能でパースが簡単にできるからです。

エディタのソースコードをGithubにアップしました

それで、このエディタをgithubにアップしました。

>> KinkumaDesign/color_theme_editor_for_notes_and_folders

これアップして、だれ得なの？って話なのですが、Vue.jsを使ったサンプルとしてアップしてみようかなーと。
.vueファイルにはhtmlのテンプレートだけ書いて、scssとjsは分割するスタイルがわかりやすいと思ってるので、そのように分けています。

さきほどのXMLの書き出し部分ですが、objectからxmlの変換はこんな感じにやっています。

>> XMLConverter.js

const PRE_CONTENT = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>`;
const AFTER_CONTENT = `</dict>
</plist>`;
const TAB_SPACE = '    ';

/**
 * 1階層のみXMLのテキストに書き出す
 */
export default class XMLConverter {
    static toXMLString(obj){
        let xmlText = '';

        for(let key in obj) {
            let value = obj[key];
            let valueType = (typeof value).toLowerCase();
            if(valueType == "number"){
                xmlText += XMLConverter.integerText(key, value);
            }else if(valueType == "string"){
                xmlText += XMLConverter.stringText(key, value);
            }else if(valueType == "boolean"){
                xmlText += XMLConverter.boolText(key, value);
            }
            //console.log(valueType, value);
        }
        return PRE_CONTENT + '\n' + xmlText + AFTER_CONTENT;
    }

    static stringText(key, text){
        return `${TAB_SPACE}<key>${key}</key>
${TAB_SPACE}<string>${text}</string>\n`;
    }

    static integerText(key, num){
        return `${TAB_SPACE}<key>${key}</key>
${TAB_SPACE}<integer>${num}</integer>\n`;
    }

    static boolText(key, value){
        let valueXML = value ? '<true/>' : '<false/>'
        return `${TAB_SPACE}<key>${key}</key>
${TAB_SPACE}${valueXML}\n`;
    }
}