[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

[TypeScript] Vue.jsでVuexを使わないでstate管理をしたい

2018/01/27

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

前回 Vue.js+TypeScriptのパターンを書きました。
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい -> 成功した

今回は、「Vuexを使わないでstate管理をしたい!」です。

Vuexは、fluxパターンのReact向け実装のReduxをVue向けに作ったものです。
>> What is Vuex?

で、Vueを使った時の状態管理の定番みたいに扱われています。

ただ、ReduxもVuexもチュートリアルをやったり、実際にそれを使って書かれたソースを読んでみたのですが、どうにも好きになれませんでした、、。好きな方がいたらすみません。
理由としてはいくつかあるのですが、一番の理由は冗長なこと。後からソースを追うのに関係ファイルが増えすぎること。
たぶん数学的なのかプログラム的にはとても素晴らしいライブラリだと思うのですが、私にはオーバースペックでした。
で、普通のクラスでStoreを作って状態管理をしたくなりました。

自前でやるとき、fluxパターンの肝となるのは、

1. イベントの方向性
viewからイベント -> api -> store -> view更新

2. storeの外でstateを操作しない
(例えばcomponent内で直接いじるのはNGで、store内に操作メソッドを作る)

だと思いました。なのでこれを守れば大丈夫なのではないかと。

※2018/01/31 クラス名を変更したり、stateのアクセス方法をgetter,setterに変更しました

クラスでStore作って状態管理

いろいろと試してみて、失敗ばかりだったのですが、公式ドキュメントに載っている方法でうまくいきました。
>> State Management

できたもの

Storeクラス

Storeクラスです。Modelのルートになります。
newしたインスタンスをexportしているので、どこからでもアクセス可能なのですが、基本は親コンポーネントからpropsで子供コンポーネントに渡していく方が良いかと思います。

countプロパティを保持しているだけで特別なことはしていません。

Store.ts

import Count from "./Count";

export class Store {
    count:Count = new Count();

    constructor(){
    }
}

const store = new Store();
export default store;

この投稿の続きを読む »

LINEで送る
Pocket

ページトップへ戻る