月別アーカイブ 9月 2018

asaba 著者:asaba

【cordova react】Invariant Violation: You should not use Route> or withRouter() outside a Router>

reactのチュートリアル中にハマりました。

 

チュートリアル中せっかくなのでアプリを画面遷移させるところまで試してみようと思い、index.jsとMyComponentをコーディングしてyarn run buildでビルド。

そしたら下のエラーに遭遇。


<span style="color: #ff0000;">Invariant Violation: You should not use Route> or withRouter() outside a Router>
</span>

訳すと、ルーターの外でwithRRouterを使ってはいけません。です。

export default withRouter(MyComponent)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。

するとありました。解決方法と原因。めっちゃシンプルでした。↓

https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route

 

 

<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・

 

 

考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。

Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。

画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。

長いですが頑張て行きたいと思います。

 

 

 

 

  • この記事いいね! (0)
著者:杉浦

簡単な置換を簡単に書く

 置換と言えば正規表現ですが、正規表現の処理は複雑です。複雑さ同様、正規表現による置換は往々にして純粋な文字列のみの置換より重くなりがちです。PHP: str_replace – Manual にも

(正規表現のような) 技巧的な置換ルールを必要としない場合、 preg_replace() の代わりにこの関数を常用するべきです。

とあります。
 この技巧的な置換ルールを必要としない置換でよく行いたい置換は、AをB,CをDに置き換える、といった1対1の置換です。テンプレートは次の通りです。

$str = '置換対象';
$arr = [
	'置換' => 'ちかん',
	'対象' => 'taisyou'
];
$str_replaced = str_replace( array_keys($arr), array_values($arr), $str);

 上の書き方で$str中の’置換’を’ちかん’、対象を’taisyou’に置き換えた$str_replacedができあがります。
 str_replace,preg_replaceは引数の置き換え対象のパターン、置き換え後の語に配列を指定できます。またarray_keysは引数の配列のキーを格納した配列を、array_valuesは引数の配列の値を、配列にして返します。これらを組み合わせることで、置換対象と置換後の文字列を一つの配列内に格納できます。延々と同じ変数を対象にreplaceを繰り返すよりすっきりします。
 実行速度もこちらの書き方の方が高速です。私の環境では、aをaaに置換するという動作を’a’に対して100000回繰り返す動作にかかる実行時間はstr_replaceの重ね書きがおおよそ1e-3秒、上記の書き方が7*1e-6秒でした。雑な計り方ですが、ここまで極端な差があるので高速と言っていいでしょう。
 余談な上、勘ですがこの速度差はおそらく関数呼び出しによるオーバーヘッドです。計算コストの異なりそうな違いはstr_replaceの呼び出し回数、文字列変数をどこに保存するかの扱い、あたりにあります。

  • この記事いいね! (0)
村上 著者:村上

【Android】写真のExif情報から写真の向きを取得する方法

タイトル通り、今回は写真の Exif 情報を取得する方法についてです。
ちなみに Exifとは、デジカメやスマートフォンで撮影した画像データに、撮影条件に関するメタデータを追加して保存できる、画像ファイル形式の規格のことをいいます。
例えば、撮影日時とかカメラの機種、カメラの向きなどが保存されています。

で、AndroidでExifを扱うときには、ExifInterface というサポートライブラリを利用します。

Android Developers Blog: Introducing the ExifInterface Support Library
https://android-developers.googleblog.com/2016/12/introducing-the-exifinterface-support-library.html

 

さて、使い方ですが、まず build.gradle に下記を追加します。

implementation "com.android.support:exifinterface:26.1.0"

追加する場所は dependencies{} の中です。
build.gradle を変更すると、Sync Now というリンクが表示されるので、これをクリックします。
エラーが表示されなければ、無事にライブラリが追加できました。

あとは、Activityにコードを追加してきます。

File f = new File([画像のファイルパス]);
Uri uri = Uri.fromFile(f);
int orientation = 1;
InputStream in = null;
try {
    in = getContentResolver().openInputStream(uri);
    ExifInterface exifInterface = null;
    if (in != null) {
        exifInterface = new ExifInterface(in);
        orientation = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_UNDEFINED);
    }
} catch (IOException e) {
    e.getStackTrace();
    Log.e("ExifActivity", e.getMessage());
} finally {
    if (in != null) {
        try {
            in.close();
        } catch (IOException ignored) {
        }
    }
}

結果は orientation という変数に入ります。
もし正常だったら 1 の値が入りますが、左に90度回転していた場合は 6 が、右に90度回転していた場合は 8 が、180度回転していた場合は 3 が入ります。
これに関しては、下記の記事を参考にしました。

iPhoneからアップロードしたJPEG写真が横向きになる問題(EXIF, Orientation)
https://qiita.com/RichardImaokaJP/items/385beb77eb39243e50a6

 

画像の回転については、以前紹介したこちらの記事を参考にしてください。
【Android】ImageViewの画像を180度回転させる方法
https://cpoint-lab.co.jp/article/201809/【android】imageviewの画像を180度回転させる方法/

 

以上、Exifから画像の向きを取得する方法でした。
次回は、位置情報の取得について説明できたらと思います。

  • この記事いいね! (0)
著者:杉浦

タスク管理ツールtrelloとその拡張

 trelloは視覚的なタスク管理ツールです。画面の様にボード、リスト、カードを増やし、タスクが完了したら画面からどかす、という動作を繰り返すのが基本の使い方になります。
増やす、どかすはマウスのドラッグや簡単なキーボード操作ででき、扱いやすいです。

 このままでも便利なのですが、多くのカードを扱おうとするとデフォルトの設定では問題があります。上の画像はリストが折り返されていますが、デフォルトでは折り返されておらず、リストを増やすと延々と横に伸びていきます。List Layouts for Trelloは上の画像の様な折り返しを追加するChrome拡張ツールです。主にflex、flex-wrap、overflowあたりのStyleを自動で弄ってくれます。
 また、なにかからデータを移行する際には視覚的にわかりやすいことよりも簡単に入力できる事が優先されます。ここでいう移行はcsvからexcelシートに移すぐらいの気楽な移行です。Trello DevelopersにはTrelloのAPIに関する情報が詰まっています。もちろんこのAPIからカードの作成もできます。
 APIの使い方はリファレンスが非常に親切です。
 前準備としてhttps://trello.com/1/appKey/generateでキー、https://trello.com/1/authorize?key=<前述のキー>&name=&expiration=never&response_type=token&scope=read,writeでトークンを取得します。
 GETにkey=<取得したKey>&token=<取得したToken>を追加してリファレンスの通り使うだけです。このリファレンスは次の画像の様にパラメータを入れた場合、投げるべきコードを自動で生成してくれます。数行で済むAPIならではですがとても使いやすいです。

 このリファレンスを参考に文字列生成、パラメータあてはめ、送信の繰り返し処理を書くだけで簡単にデータの移行が出来ました。

  • この記事いいね! (0)
asaba 著者:asaba

【iosアプリ】jsAnywhereでどこでもプログラミング

手軽にプログラミングができるjsAnywhereというアプリをダウンロードしてみました。

このアプリの特徴は、名前の通りいつでもどこでもプログラムを書くことができ、JS、CSS、HTML別にプログラムを見ることが出来ます。

背景色やフォントも変えることが出来る点は従来のエディタと変わらないですね。持ち込みができるエディタと考えたほうがいいかもしれません。

プログラムかけてもデバッグできないのかーと思ったらブラウザ上でしっかり行うことができました。設定画面で設定できます。

facebookやdropboxとも連携できるので、自分の作ったプログラムをsnsにアウトプットして共有することもできます。

最近ではスマホでもプログラミングができるツールが増えてきたのですが、自分は現在javascriptを使っているのでたまたまこのアプリを見つけて紹介させていただきました。

スマホでプログラミングをしたいと思ったとき、ちょっとしたtipsを見つけたときにはいいのではないでしょうか。

  • この記事いいね! (1)
著者:ym

SSI と Apache

今更ですが SSI の設定でハマっています。

AddType text/x-server-parsed-html .shtml

とがあり、

AddHandler server-parsed .shtml

更には、

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

というのもあります。

Apacheのドキュメントを見る限りでは、一時期使用できなかったけど、新しい方のバージョンであればどのパターンでも互換性を保つ為に有効と書かれています。

しかし text/x-server-parsed-html パターンの場合、実行してくれない状況。助けてくれー。

 

 

  • この記事いいね! (0)
takahashi 著者:takahashi

SystemdでNode.jsのサーバープログラムをお手軽にデーモン化する方法

以前SoftEtherVPNを手軽にSystemdでデーモン化する方法をご紹介しましたが、実は、最近よく使われるNode.jsで書いたサーバープログラムも、Systemdを使うと簡単にデーモン化できるようです。

centos7で標準のsystemdを使いnode.js製サーバーをデーモン化する – Qiita

Node.jsはjavascriptのサーバーサイド版の言語・実行環境で、ほぼjavascriptと同じ言語を使ってサーバー側の処理を書くことができます。
Node.jsのライブラリにも”forever”というプログラムをデーモン化してくれるライブラリがあるのですが、OS起動時と同時に実行させたりする際はちょっと不安が残ります。

起動時にうまくNode.js製のサーバーをデーモンとして動作させる方法がないか探したところ、なんとSystemdのみで実現できるとのことだったので、実際に試してみました。
nodeのプログラムをsystemdを使ってデーモン化するには、

/etc/systemd/system/デーモン名.service

のような名前でファイルを作り、下記のように設定を書き込みます。

[Unit]
Description=node server #任意の説明
After=syslog.target network.target

[Service]
Type=simple
ExecStart=/usr/bin/node /path/to/Node.jsProgramPath #記法:ExecStart=node.js本体のパス node.js向けに書いたサーバープログラムのパス
WorkingDirectory=/path/to/ #作業ディレクトリの場所(スクリプト実行時にカレントディレクトリになっていて欲しい場所)
KillMode=process
Restart=always
User=centos #node.jsプログラム実行ユーザー
Group=centos #node.jsプログラム実行ユーザー

[Install]
WantedBy=multi-user.target

上記のような内容でファイルを保存したら後はお決まりの

systemctl enable デーモン名
systemctl start デーモン名

これだけでnode.jsのプログラムがデーモン化され、OS起動時の自動起動にも登録されます。

Systemdはファイルの記法がわかりづらくて嫌煙されがちな印象でしたが、いろんなプログラムをいとも簡単にデーモン化できてしまうあたり、もしかするとかなり優秀なのかもしれません…

  • この記事いいね! (0)
村上 著者:村上

【アプリ】写真加工機能を手軽に実装できる「Adobe Creative SDK」

まだAndroidに導入途中なので、詳しい実装方法はご紹介できないのですが、まずはこんな便利なサービスがあるというご紹介まで。

写真にフィルターをかけたり、スタンプを押したりできる無料のSDKが、Adobeから提供されています。
サービス名は、タイトルにある通り「Adobe Creative SDK」です。
公式サイトはこちらから。
Adobe Creative SDK
https://www.adobe.io/apis/creativecloud/creativesdk.html
Androidだけでなく、iOSやWebにも対応しています。
Web版だけは試したことがありますが、とても簡単でした!

なお、こちらの記事も参考になりますので、ぜひご覧ください。
https://qiita.com/84d010m08/items/566415df1914ca097082
https://qiita.com/84d010m08/items/566415df1914ca097082

 

こちらのサービスを使うにはアカウント登録とアプリ登録が必要なので、今回はそちらをご紹介。
まずAdobeアカウントを、Adobeの公式サイト右上のログインから作成してください。

アドビ公式サイト:クリエイティブ、マーケティング、文書管理ソリューション
https://www.adobe.com/jp/

アカウントがすでにある人は、ログインしてください。

ログインで来たら、下記からコンソールに移動します。

Adobe I/O Console
https://console.adobe.io/integrations

そのページに「New Integration」というボタンがあるので、そこから新規のアプリを登録します。
なお、アプリ名などは後で変更できますので、ご安心を。
ちなみに、この登録だけではアプリストアでの公開ができないらしいので、テスト用ならOKですが、のちのち公開するなら審査を通してください。
この作業についても、このコンソール画面からできます。
スクリーンショットをとる手間などはありますが、審査自体は思ったよりもすんなり通りましたね。

 

各プラットフォームごとの導入方法については、下記のドキュメントを参考にしてください。

Documentation
https://www.adobe.io/apis/creativecloud/creativesdk/docs.html

 

以上、簡単ですが、Adobe Creative SDK についてでした。
Androidに導入が完了しましたら、改めて手順をまとめたいと思います。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova】unable to load platformAPIでブラウザが開けなかった時の解決法

今回は再びコルドバの話題に戻ります。

先日cordovaを7.0.1から8.0.0にアップデートした時のことです。

直後にブラウザで動きを試したいと思い、いつものようにコマンドでnpm run serveでブラウザを実行したところ、下記のエラーが出現しました。

コルドバのバージョンをcordova.jsやモジュールにも認識させないといけなかったみたいです。

browserのplatformを入れ直したところ一発で解決しました。

一旦rmで消して↓


cordova platform rm browser

addで追加します


cordova platform add browser

ちなみに他のplatformを消す必要はないのでそこは大丈夫です。

一応このエラーの解決はしましたが、以前chromeで開けてたアプリがIEで表示されるようになってしまいました。原因は調査中です。

解決方法が見つかり次第このブログに書いていきたいと思います。

 

 

  • この記事いいね! (0)
著者:杉浦

国土地理院のハザードマップ

重ねるハザードマップ | 国土交通省
 ページのtitleは国土交通省ですし、国土地理院のトップページのみならず国土交通省のトップページからも簡単に遷移できますがが、ドメインとしては国土地理院のページです。国土地理院は国土交通省の一部ですのでおそらくその辺りでしょう。
 主な使い方は簡単です。左上の災害種別で災害毎の影響範囲のまとめを地図上に写して見る、右上の危険虫眼鏡で調べたい場所をクリックしてその場所のリスクを見る、これだけです。
 
 詳しくどういう情報から知りたい時はレイヤー情報の解説ボタンから詳しい解説が開きます。また作図、保存、印刷機能も備えており、メモ書き等含めて目的に合わせた地図を柔軟に作れます。

  • この記事いいね! (0)