[iOS] iPadのマルチタスク機能 Slide Over と Split View に対応したい

2018/07/24

こんにちは。きんくまです。
先日ジッピー電卓をアップデートしました。(名前の順番が変わっているのは検索対策ですw)
>> 電卓ジッピー

それでアップデートの機能としてユーザー様からご要望があったiPadのマルチタスクのSlide OverとSplit Viewに対応しました。
画面分割して2つのアプリが使えるというのは知っていたのですが、恥ずかしながら実際にやったことがありませんでした。

Slide Over と Split Viewって何よ?

というわけでどんなやつかを調べてみました。

まずこれはiPad用のアプリを2つ並べて使えるマルチタスク機能です。
iOS9からの機能だったみたいです。結構前からあったんですね!

Slide Overはこんな感じに、アプリの上にもうひとつアプリを重ねて表示します。

Split Viewはこんな感じに、画面を2つに分割して使います。

Split Viewの面白いところとしては、分割している部分の幅を切り替えられるところです。上のイメージだと右側のアプリが狭くて左側のアプリが広い状態です。これをちょうど半分ずつに分割したり、右側を広くしたりできます。

どうやってこの状態にもっていくのかという操作方法については、公式ページでくわしく紹介されています。
>> iPad でマルチタスク機能を使う

で実機でいろいろと試していたんですが、Split Viewの方は手持ちのiPad Air(2じゃない無印)ではできませんでした、、。
Slide Overの方はできました。iPad Proでは両方ともできました!
たぶん負荷がかかるから新しい端末のスペックじゃないと動作が重くなると思われ。

この投稿の続きを読む »

LINEで送る
Pocket

[JavaScript] タブ区切りのExcelデータをxmlにするツール作った

2018/06/15

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

以前にAppleScriptを使ってExcelのデータをxmlにするプログラムを書いたのですが、問い合わせをいただきまして。
エラーが出て動かないとのこと。確認したところパーミッション関係のエラーが出てしまっていました。
>> [AppleScript] MacでExcelからUTF-8でxml書き出しをするAppleScript

6年前のプログラムだし、すぐには直せなそうでした。
それでJavaScriptでツールを作った方が早そうなので作ってみました。

作ったもの

>> タブ区切りのExcelデータをxmlにするツール

何するもの?

こういうExcelデータを

こういう感じのxmlに変換します。Excelにもxml書き出しというのがあるんですが、余計なタグがついてくるのであまり使えないのです。

<?xml version="1.0" encoding="utf-8"?>
<root>
  <row>
    <id>001</id>
    <age>15</age>
    <name>田中</name>
    <hobby>野球</hobby>
  </row>
  <row>
    <id>002</id>
    <age>32</age>
    <name>斎藤</name>
    <hobby>サッカー</hobby>
  </row>

   ...以下略

</root>

この投稿の続きを読む »

LINEで送る
Pocket

[iOS] WKWebViewのCookieとキャッシュを削除したい

2018/06/7

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

フォルメモをアップデートしました。
リリース時からバズることなどなくゆっくりとダウンロードされていまして、おかげさまで6万ダウンロードされました。
ありがとうございます。
>> フォルダと メモ帳 フォルメモ

今回のアップデート内容について。
フォルメモにはメモにスクリーンショットやテキストを簡単に追加できる内部ブラウザが入っています。
その内部ブラウザのWKWebViewのCookieとキャッシュを削除できるようにしました。

この記事はそのときのメモでございます。参考サイトです。

>> ios – How to delete WKWebview cookies – Stack Overflow

記事にもあるようにこの方法はiOS9以降が対象です。iOS8以下は削除方法が違います。

WKWebsiteDataStoreを使って消去

WKWebsiteDataStoreからWKWebViewで保存しているデータにアクセスが可能なようです。

>> WKWebsiteDataStore – WebKit | Apple Developer Documentation

この投稿の続きを読む »

LINEで送る
Pocket

[日記] CDの曲情報ってどうやって取得しているの? CDDB / TOC

2018/05/3

こんにちは。きんくまです。
最近アルバムを買うのにiTunesでなくて現物のCDを買っています。

PCに取り込む手間がかかるのですが、音質が良いのと、最近iTunesのダウンロード販売を将来的にやめるニュースがあったようにいつサービスが終わるかわからないためです。

(ダウンロード販売をやめていない今でも以前にiTunesで買ったCDが再ダウンロードできなくなっていたりしたことがありました。たぶん版元が急に販売しなくなったのではないかと思います)

さて、CDをPCに取り込むときに作曲者や曲名などの情報が表示されます。
それなりに売れたであろうアルバムから、そんなにユーザー数も多そうでない英語の参考書の付録まで曲名が出たりします。
これってどうやってやっているのか気になったので調べてみることにしました。

CDDB

取り込む挙動をみていると、ネット経由で曲情報をどこかに問い合わせをしているようです。
調べて見ると、CDDBという規格がありそこにアルバムや曲情報が書いてあるみたいです。

>> CD再生時の曲名等の誤表示に関する情報
>> CDDB – Wikipedia

CDDBを管理している団体はいくつかあり、大手でGracenoteという会社がありました。
iTunesではここのDBにネット経由で問い合わせをしているようです。

>> 楽曲認識技術

余談)ちなみにCD制作者がCDDBをちゃんと登録しようと思うといくつも登録する場所があるみたいで大変みたい。
>> 「まだ自作CDをCDDBに登録してないの?」実はあなたも出来ていない?!自作CD情報の、CDDBへの登録について

この投稿の続きを読む »

LINEで送る
Pocket

[SVG|JavaScript] transformされたローカル座標をSVGの座標に変換したい

2018/03/30

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

今回は座標変換です。
座標変換は、ローカル座標からグローバル座標に変換したり、その逆のパターンがあります。

それでgなどが入れ子状態になっていて、それぞれがtransformされている中に入っている子供の要素の座標(ローカル座標)から、SVGからみたときの座標(グローバル座標)に変換したかったです。

参考サイトなど
>> SVG localToGlobal – JSFiddle
>> SVG coordinates with transform matrix

getCTM()を使って変換行列を取得する

そのような入れ子状態だとしても、getCTM() を使うと SVGの座標に変換してくれる行列が手に入ります。

>> SVGGraphicsElement

変換するときは matrixTransform() を使います。

サンプルコード

こんな感じに、transformされたgの中にあるcirlceがあるとします。
青が元の座標においたもの、赤がgの中に入ったので移動したものです。
最近知ったのですが、cssのtransformは中に scale translate みたいに連続で変換を書けるんですね。matrixを使わないといけないと思ってました。

この投稿の続きを読む »

LINEで送る
Pocket

[SVG|JavaScript] JSにSVGを埋め込んで、パースしたSVGをいろいろやりたい

2018/03/28

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

イラレから書き出したSVGのデータをhtmlに取り込む方法はいろいろとあります。
外部SVGを非同期で読み込んだりとか。
でも今回は、JSにSVGを静的に埋め込んで、パースしたSVGを使いたいです。

JSにSVGを埋め込む

埋め込むといっても、ES6のヒアドキュメントを使えば簡単です。
イラレから書き出したSVGには id とか title とか入っているので消しておきました。あと下のデータめっちゃ適当です。

export const SVGData = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768">
  <rect x="131" y="121" width="637" height="449" fill="#29abe2" stroke="#000" stroke-miterlimit="10" stroke-width="10"/>
  <circle cx="536" cy="229" r="163" fill="#ff0" stroke="red" stroke-miterlimit="10" stroke-width="10"/>
  <polygon points="262 81 323 221 501 212 496 481 262 459 78 443 261 345.5 262 81" fill="#006837" stroke="#7ac943" stroke-miterlimit="10" stroke-width="10"/>
  <path d="M381,490c41.18-56.62,118-136,171-42s101,52,136,24l46,70s-180,35-255,17S341,545,381,490Z" fill="blue" stroke="#7ac943" stroke-miterlimit="10" stroke-width="10"/>
</svg>
`;

slackとか、markdownみたいに バッククォートを3個書いてうまくいかなかったのはナイショです。
ヒアドキュメントは1個で良かったです。

この投稿の続きを読む »

LINEで送る
Pocket

[JavaScript] 動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう

2018/03/21

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

今回は、「動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう」です。(長い)
SVGを動的にJavaScriptでいろいろいじったものを画像化したかったのですが、最初にやってた方法だとIE11でエラーが出てしまいました。

2018年3月の現時点だと、SVGから直接png化するメソッドはなさそうです。
なので、SVGをcanvasに描画して、そこからtoDataURLでbase64化するという流れになります。

でハマった方を書く前に忙しい方のために、先にcanvgを使った方法を書いておきます。

canvgでsvgを画像化する

>> GitHub – canvg/canvg: Javascript SVG parser and renderer on Canvas

canvgはSVGをパースして、Canvasの中に再現するライブラリです。
この投稿の続きを読む »

LINEで送る
Pocket

ページトップへ戻る