月別アーカイブ 10月 2018

asaba 著者:asaba

【cordova-react】filereaderで画像を呼んでくれないときの対処法

imageオブジェクトを作ってその中にfilereaderで読み込んだ画像を格納してキャンバスでリサイズしたものを表示したかったのですが

上手く読み込めませんでした。

読み込んだ時点でwidth,heightが0,0になっているので画像を渡した辺りが怪しいですね。

ならimgタグの読み込み方を変えてやろうと思い少々強引ですがquerySelectorを使って力技で読み込ませました。

var preview = document.querySelector('img');

[/java script]

すると無事リサイズもしてくれて正常に表示させることができました。



chromeが不安定なのかes6の書き方からなのかは分かりませんがchromeだけかもわからないので、色々なブラウザ&実機で試してみると

違いが分かってくるかもしれません。

canvasから抽出した画像も少し怪しかったので原因が分かり次第また記載します。
  • この記事いいね! (0)
村上 著者:村上

【PHP】XMLファイルのエラー「Parse error: syntax error, unexpected T_STRING」の対処法

今日は、XMLを扱ったときに遭遇したエラーについて。
エラーの全文はこちら。

Parse error: syntax error, unexpected T_STRING in [ファイル名] on line 1.

「予期しないT_STRING がある」というシンタックスエラーです。
シンタックスエラー=構文エラーということでしたが、参考にしたサンプルと見比べても、間違いはないし…何故?と少しだけ焦りました。
そもそも、xml ファイルを開いているのに、何故 PHP のエラーが発生するのかも最初は分かりませんでした。

 

こちらのエラーは、原因としては下記の1行目が、PHP と誤認識されるために発生するエラーとのことでした。

<?xml version="1.0" encoding="utf-8"?>

確かに、PHPって <?php ~処理~ ?> だけでなく、省略形として <? ~処理~ ?> とも書けましたね…。

こちらの誤認識を防ぐために、下記のように、PHPの echo を使って1行目を記述すると、問題なく動作するとのことでした。

<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>

試したところ、確かに問題なく動作しました!

他にも、.htaccess に「AddType text/html .html」もしくは「php_flag short_open_tag Off」を追加するという方法もあるようでしたが、対処が簡単だったこちらの方法を採用しました。

ちなみに、今回参考にさせていただいたサイトはこちらから。

「syntax error, unexpected ‘version’・・・」 エラーの対処方法 – Project Group
https://www.projectgroup.info/tips/php/comm_0004.html

 

以上、XMLファイルが正常に読み込めない・開けない時の対処法でした。
思ったよりもあっさり解決できたので良かったです。
もし同じところで躓いていらっしゃる方がいましたら、参考にしていただければと思います。

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

Unicodeプロパティを用いた正規表現で日本語を抽出

Unicode(ユニコード)は、符号化文字集合や文字符号化方式などを定めた、文字コードの業界規格である。文字集合(文字セット)が単一の大規模文字セットであること(「Uni」という名はそれに由来する)などが特徴である。

引用:Unicode – Wikipedia
 この引用文にある通り、Unicodeは非常に多くの文字を含んだ文字コードです。多種多様な文字を扱うために文字に分類付けがされています。この分類の仕方は複数あり、この記事で扱う分類はスクリプトです。スクリプトは文字体系による分類形式です。Script (Unicode) – Wikipediaにはスクリプトの一覧が載っています。
 正規表現ではUnicodeプロパティを用いて文字を識別できます。日本語のスクリプト名はそれぞれ、ひらがながHiragana、カタカナがKatakana、漢字がHanと名付けられています。ちなみにこのHanは繁体字のHanです。
 例えばjavascriptでは次の画像の様にUnicodeプロパティを用いた正規表現を使えます。

/\p{分類の名前=分類の中における文字集合の名前}/u

 phpなら

$pattern = '/\p{Hiragana}/u';

javascriptにもphpにもついていたuはUnicodeを使うという宣言です。

import regex
pattern = r'\p{Han}'
print(regex.findall(pattern, "朝早く起きた"))

 pythonはとてもシンプルな記法です。ただし3系の正規表現でもデフォルトではUnicodeプロパティ表現に対応しておらず、regex · PyPIのようなライブラリが必要です。
 注意点としてUnicodeのプロパティによる分類は強力ですが、Unicodeという探索範囲がとても広いため速度はあまり優秀でありません。PHPのPHP: Unicode 文字プロパティ – Manual にも以下の様に注意書きがあります。

Unicode プロパティを使った文字列マッチングは速くありません。PCRE は 15,000 以上のデータからなるストラクチャを検索する必要が有るためです。 そのため、PCRE では、\d や \w といった 以前から有るエスケープシーケンスは Unicode プロパティを使用しないように なっています。

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

Google Pay を使ってポイント獲得

楽天Edyでの購入分が対象となるか不明ですが、非接触QuickPayへ切り替えた後、獲得した金額を見たら600円くらい獲得できていました。

Google Pay キャンペーン

Google Pay キャンペーン

5000円やGoogle Home Miniもチャンスがあるようなので、しばらく非接触QuickPayで支払いを続けます。
楽天EdyとQuickPay、どっちが得なのだろうか?楽天Edyは楽天カードからのオートチャージとEdy使用でポイント貯まりそうだけど。QuickPayどうなの?

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

nginxやAmazon ALBなどのロードバランサー経由でLaravelにアクセスさせたときにHTTP/HTTPSを振り分ける方法

nginxやロードバランサーなどを使ってWebサーバーにアクセスさせた際に困るのが、一部の情報が本体のWebサーバーまで到達しない点。
特に、クライアントがHTTPでアクセスしているのか、HTTPSでアクセスしているのか、などの情報はそのままの状態で取得するのは困難です。

こういった環境と、HTTPかHTTPSどちらで接続されているのかを判定したうえでDOMのURLを書き換えるタイプの機能を持つフレームワークやプログラムとの相性は特に最悪で、Webサーバーに対してHTTPでアクセスされた時点で”クライアントからHTTPでアクセスされている”と判定して、すべてのアセットのアドレスをhttp://から始まるURLに置き換えて返してしまい、結果jsやcssが読み込めずに表示崩れや不具合になってしまうことがあります。

最近人気のLaravelもこの機構を持っており、そのままの状態でnginxやLBを間に置いてしまうと、httpsでアクセスしたときにページが正常に表示されない問題が発生してしまいます。

幸いにも、HTTPSかどうかの部分についてnginxやロードバランサーが代わりに取得し、その情報をヘッダーに含めて投げてくれる場合が多いので、今回はLaravel上でこのヘッダ情報を使って簡単にHTTP/HTTPSを判定できるようにしてみました。

Laravelプロジェクトフォルダ内の
routes/web.php
の最初あたりに、次のコードを追加します。

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//ここから
//リバースプロキシ経由のHTTP/HTTPS判定
if(!empty($_SERVER["HTTP_X_FOWARDED_PROTO"])){ //"HTTP_X_FOWARDED_PROTO"ヘッダーが存在していたら
    if(strtoupper($_SERVER["HTTP_X_FOWARDED_PROTO"]) == "HTTP"){ //strtoupper("HTTP_X_FOWARDED_PROTO")の中身が"HTTP"だったら
        URL::forceScheme('http'); //すべてのURLをhttpに書き換える
    } else {
        URL::forceScheme('https'); //すべてのURLをhttpsに書き換える
    }
}
//ここまで

$_SERVERはPHPにおいて、サーバー情報および実行時の環境情報がすべて格納されるスーパーグローバル変数です。

$_SERVER – php.net

この中に、リクエストヘッダの中身もすべて格納されるので、その中からnginxやAmazon ALBやClassic Load BalancerがHTTP/HTTPSの情報を格納する”X_FOWARDED_PROTO”ヘッダーを参照して、どちらでアクセスされたかを判定しています。

ifを敢えてHTTPかどうかで判定している理由は万が一、”$_SERVER[“HTTP_X_FOWARDED_PROTO”]”にhttpでもhttpsでもない不正な値が入っていた場合も、とりあえずhttps://で吐き出すようにするためです。

こんな形で処理を加えてやれば、Laravelでもnginxやロードバランサーを使用していても正常にHTTPとHTTPSの切り替えが行えるようになると思います。

少しでも参考になりましたらしたら幸いです。

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

SVGファイルのエディタ

 SVGファイルはベクトル定義によって画像を表現するファイルです。SVGファイルの形式はBMP、PNG、JPG等のファイルと異なり独特であり対応していない画像編集ソフトが多いです。そのため専用のソフトやサービスが必要になりがちです。またその特徴上、最後の微調整はベクトルの計算、数字を直に弄る方が楽です。
 最近、自分が使った環境の一つはVectr – Free Online Vector Graphics Editorです。下画像の赤丸のバーから図形を配置してざっくりとSVGを作ります。

 次いで使用するのはIDE、今回はPhpStormです。IDEは実行環境とテキストエディタを兼ねた開発環境です。実行環境とエディタがある以上、実行が軽いものであれば、実行しながら編集する、ということも可能です。PhpStormでは下画像の様にSVGが編集できます。こちらはテキストを変更して画像を作ります。
 
 IDEでは同じようにいくつかの種類のファイルをプレビューしながら編集できます。例えば、マークダウンです。こちらはちょっと飾ったテキストを扱うのでIDEのままで読み書きするのに向いています。マークダウンはよく説明書に使われているので、よくお世話になっています。

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

【cordova-react】fetchApiに触れてみる

最近ではjqueyのajaxではなくfetchApiを使った非同期通信が主流みたいです。詳細はこちら↓

http://jxck.hatenablog.com/entry/whatwg-fetch

jsonをリクエストした後にレスポンスでjsonのデータを引っ張ってくるコードです。

 

fetch('https://api.hamamatsu-kagakukan.test.cpt.jp:3002/corners',{
headers: {
    'content-type': 'application/json'
  },
  }).then(function(response) {
	  //jsonで受け取る
  return response.json();
}).then(function(json) {
  // jsonにJSONオブジェクトで結果が渡される
console.log(json);
});

[/java script]

ただ受け取るだけならこれだけでも大丈夫です。fetchの第二引数にはheaderの他にもbodyといったメソッドも追加することができます。

・・・つい最近ajaxの新しい書き方を知ったばかりなのですが、今はもうこっちが主流なんですね、知りませんでした。

 

 

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

【Android】Mapboxで表示した地図の中心を変更する方法

昨日の予告通り、今回はMapboxの地図の中心位置を変更する方法についてです。
前回の記事については、下記から確認頂けます。

【Android】Mapboxを使って地図上にピンを立てる方法
https://cpoint-lab.co.jp/article/201810/【android】mapboxを使って地図上にピンを立てる方法/

 

では早速実装方法について。
なお、今回のコードは Mapbox が導入済みであることを前提に進めています。

まず onCreate() 内に、下記のコードを追加します。

mapView.getMapAsync(this);

ちなみに、この時、Android Studioでは、this の部分がエラーになり、赤い波下線が引かれますので、そこにカーソルを合わせて Alt + Enter を押します。
表示される対処法の項目中に、OnMapReadyCallbackimplements するというような内容の候補があるので、こちらを選択します。
すると、onMapReady() という関数がオーバーライドされるので、その中に下記のコードを追加します。

@Override
public void onMapReady(MapboxMap mapboxMap) {
    CameraPosition position = new CameraPosition.Builder()
            .target(new LatLng(lat, lng)) // Sets the new camera position
            .zoom(11) // Sets the zoom to level 10
            .tilt(0) // Set the camera tilt to 0 degrees
            .build(); // Builds the CameraPosition object from the builder

    mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), 1000);
}

ズームレベルや、傾きなどは適宜変更してください。
こちらを実行すると、起動後、カメラの位置が上記で指定した位置が中心になるように移動します。
処理としては以上で完了です。

 

意外と回りくどい方法だな…と思うのは私だけでしょうか…?
レイアウトファイルのXMLでは、地図の初期位置を簡単に指定できるので、コード上でも簡単にできてほしいですね。
ですが、意図していたことは実現できたので問題なし!
もし、同じことに取り組んでいる方は、参考にしていただければと思います。

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

NextCloud 14.0.1から14.0.2へのバージョンアップで応答無いのでocc使ってコマンド側から調査

NextCloud が 14.0.1 から 14.0.2 へバージョンアップしたようなので、早速バージョンアップを行ってみました。最近のバージョンだと Web からバージョンアップができるのでそれを使ったのですが、アップグレード処理がボタンを押した後、進む気配なし。

しょうがないので、コマンドから実行して見た所、cron 処理が終わるのを待っていた様です。

# sudo -u www php -f ./occ maintenance:mode --on
# sudo -u www php -f ./occ upgrade
The current PHP memory limit is below the recommended value of 512MB.
Nextcloud or one of the apps require upgrade - only a limited number of commands are available
You may use your browser or the occ upgrade command to do the upgrade
Set log level to debug
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
Waiting for cron to finish (checks again in 5 seconds) …
...

調査した所、このサイトに同様の症状。

mysql> SELECT * FROM oc_jobs WHERE reserved_at <> 0;
+----+-----------------------------------+----------+------------+--------------+-------------+--------------------+
| id | class                             | argument | last_run   | last_checked | reserved_at | execution_duration |
+----+-----------------------------------+----------+------------+--------------+-------------+--------------------+
|  8 | OCA\Files_Sharing\ExpireSharesJob | null     | 1539302411 |   1539302411 |  1539302411 |                  0 |
+----+-----------------------------------+----------+------------+--------------+-------------+--------------------+
1 row in set (0.00 sec)

見てSQL命令を実行して該当するレコードがあったので 0 に更新をかけました。

mysql> update oc_jobs set reserved_at =0 ;

あとはもう一度実行。

# sudo -u www php -f ./occ upgrade
The current PHP memory limit is below the recommended value of 512MB.
Nextcloud or one of the apps require upgrade - only a limited number of commands are available
You may use your browser or the occ upgrade command to do the upgrade
Set log level to debug
Updating database schema
Updated database
Checking for update of app accessibility in appstore
Checked for update of app "accessibility" in appstore
Checking for update of app activity in appstore
Checked for update of app "activity" in appstore
Checking for update of app bruteforcesettings in appstore
Checked for update of app "bruteforcesettings" in appstore
Checking for update of app cloud_federation_api in appstore
Checked for update of app "cloud_federation_api" in appstore
Checking for update of app comments in appstore
Checked for update of app "comments" in appstore
Checking for update of app dav in appstore
Checked for update of app "dav" in appstore
Checking for update of app encryption in appstore
Checked for update of app "encryption" in appstore
Checking for update of app federatedfilesharing in appstore
Checked for update of app "federatedfilesharing" in appstore
Checking for update of app federation in appstore
Checked for update of app "federation" in appstore
Checking for update of app files in appstore
Checked for update of app "files" in appstore
Checking for update of app files_external in appstore
Checked for update of app "files_external" in appstore
Checking for update of app files_sharing in appstore
Checked for update of app "files_sharing" in appstore
Checking for update of app files_texteditor in appstore
Checked for update of app "files_texteditor" in appstore
Checking for update of app files_trashbin in appstore
Checked for update of app "files_trashbin" in appstore
Checking for update of app files_versions in appstore
Checked for update of app "files_versions" in appstore
Checking for update of app files_videoplayer in appstore
Checked for update of app "files_videoplayer" in appstore
Checking for update of app firstrunwizard in appstore
Checked for update of app "firstrunwizard" in appstore
Checking for update of app gallery in appstore
Checked for update of app "gallery" in appstore
Checking for update of app logreader in appstore
Checked for update of app "logreader" in appstore
Checking for update of app lookup_server_connector in appstore
Checked for update of app "lookup_server_connector" in appstore
Checking for update of app nextcloud_announcements in appstore
Checked for update of app "nextcloud_announcements" in appstore
Checking for update of app notifications in appstore
Checked for update of app "notifications" in appstore
Checking for update of app oauth2 in appstore
Checked for update of app "oauth2" in appstore
Checking for update of app password_policy in appstore
Checked for update of app "password_policy" in appstore
Checking for update of app provisioning_api in appstore
Checked for update of app "provisioning_api" in appstore
Checking for update of app serverinfo in appstore
Checked for update of app "serverinfo" in appstore
Checking for update of app sharebymail in appstore
Checked for update of app "sharebymail" in appstore
Checking for update of app support in appstore
Checked for update of app "support" in appstore
Checking for update of app survey_client in appstore
Checked for update of app "survey_client" in appstore
Checking for update of app systemtags in appstore
Checked for update of app "systemtags" in appstore
Checking for update of app theming in appstore
Checked for update of app "theming" in appstore
Checking for update of app twofactor_backupcodes in appstore
Checked for update of app "twofactor_backupcodes" in appstore
Checking for update of app updatenotification in appstore
Checked for update of app "updatenotification" in appstore
Checking for update of app workflowengine in appstore
Checked for update of app "workflowengine" in appstore
Starting code integrity check...
sudo -u www php -f ./occ maintenance:mode --off

無事解決。

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

VSCodeで簡単にMySQLと連携できるプラグイン”MySQL”

普段からVSCodeを使ってプログラムしているのですが、最近、DBの操作もプログラミングと同時にVSCodeから操作できないかなーと探していたところ、よさそうなものを発見しました。

MySQL – Visual Studio Marketplace

そのまんまの名前ではありますが、とても分かりやすく、使いやすいプラグインです。

インストールすると、VSCodeの左側カラムにMySQLのエリアが表示されます。

+ボタンがあるのでまずはクリックします。

上の画像のように専用のパレットが開くので、指示通りにDBへの接続情報を入力していきます。

設定が完了するとDBリストに追加されるので、目的のDBを右クリック。

New Queryをクリックします。
すると新しいタブが開くのでSQL文を入力し、
”Run MySQL Query”
をクリックします。

すると右側に実行結果が表示されます。

使い勝手もよく、とても見やすいのがいいですね。
おススメです。

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