月別アーカイブ 1月 2019

著者:杉浦

ダミー画像表示サイトlorempixelの紹介

lorempixel – placeholder images for every case
 lorempixelはurl指定するとダミーの画像を表示してくれるサイトです。urlの指定の仕方は次の画像の通り。urlを指定すればするほどオンリーワンな画像が表示されます。例はhttpプロトコルですがhttpsでもアクセスできます。

 例えば、https://lorempixel.com/400/200/animals/5/msgならば次の様に、横幅400px、縦幅200px、カテゴリanimalsの5番目の画像の左下にmsgの文字を入れた画像が返ってきます。

 webページを制作した時の画像確認においてカテゴリ分けが特に便利で仮のそれらしい画像をいくつも作る手間が省かれます。
 PHPのダミーデータ作成ライブラリfzaninotto/Faker: Faker is a PHP library that generates fake data for youにはlorempixelが組み込まれています

// Image generation provided by LoremPixel (http://lorempixel.com/)
imageUrl($width = 640, $height = 480) // 'http://lorempixel.com/640/480/'
imageUrl($width, $height, 'cats')     // 'http://lorempixel.com/800/600/cats/'
imageUrl($width, $height, 'cats', true, 'Faker') // 'http://lorempixel.com/800/400/cats/Faker'
imageUrl($width, $height, 'cats', true, 'Faker', true) // 'http://lorempixel.com/grey/800/400/cats/Faker/' Monochrome image

 Fakerが組み込まれているLaravelならばダミーデータ作成機能ファクトリに次の様にランダムURL生成を定義できます。

use Faker\Generator as Faker;

// あらかじめ使用する予定のカテゴリを定義
$category = ['abstract', 'animals', 'business', 'cats', 'city', 'food', 'nightlife', 'fashion', 'people', 'nature', 'sports', 'technics', 'transport'];
/* @var \Illuminate\Database\Eloquent\Factory $factory */
$factory->define(App\Models\Post::class, function (Faker $faker) use ($category) {
    $word = $faker->word; // 画像に記述する文字列をランダム生成
    return [
        'img_url' =>
            $faker->imageUrl(640, 480, $faker->randomElement($category), false) // https://lorempixel.com/640/480/{$categoryのどれか}/
            . $faker->numberBetween(1, 10) . '/' . $word, // 末尾に、1~10のいずれかと書き込む$wordを追加
    ];
});
  • この記事いいね! (0)
村上 著者:村上

【React】React Routerで直前のページに戻るボタンを実装する

ちょっとしたことですが、コピペできると便利だろうなぁと思い、まとめ。
React Router で戻るボタンを実装する方法です。

参考にした記事はこちら。

React Routerのhistoryはどこから来るのか|TECHSCORE BLOG
http://www.techscore.com/blog/2017/12/01/where_does_react-router-history_come_from/

React 及び React Router の導入方法については割愛。
おそらく、Qiita あたりにわかりやすい記事があると思うので、そちらを参考にしてください。

 

実装方法…というか、前ページへ戻るための処理は下記の通りです。

this.props.history.goBack()

ページ遷移の時は、this.props.history.push('[遷移先]'); ですが、前のページに戻る時は最後が goBack() になります。
わかりやすいですね!

で、戻るボタン実装の際は、下記の通りです。

<button onClick={() => this.props.history.goBack()}>戻る</button>

よく、onClick に処理を書く際、最初の () => を書き忘れそうになるので、まるっとコピーできるように…。
…上記のコードはそのままコピー&ペーストで動くかと思いますので、是非ご活用ください

 

以上、React Router で戻るボタンを実装する方法でした。

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

2019年1月はじめWindows 共有へアクセスできなくなる

2019年1月の Windows Update で Windows2008 Server などの共有フォルダへアクセスできなくなるという症状がでた様です。

その時は、試しに \\192.168.1.1 といった IP ベースの接続を試してもらってしのぎましたが、こんなところに原因があったのですね。
ただ明らかに症状が違うきがするのだが・・・タイミングとしてはジャストなタイミング。

1月のパッチが原因でWindows 7/Server 2008 R2の共有ファイルへリモートアクセスできなくなる問題が解決

https://forest.watch.impress.co.jp/docs/news/1164614.html

Windows 7/Windows Server 2008 R2向けの月例パッチに問題、ネットワークが動作不能に

https://forest.watch.impress.co.jp/docs/news/1163995.html

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

【Xcode】「An error was encountered while attempting to communicate with this device.」エラーの対処法

Xcodeでアプリ開発中に遭遇したエラーについて。
エラーは「An error was encountered while attempting to communicate with this device.」というものです。
訳すと「このデバイスと通信しようとしたときにエラーが発生しました。」とのこと。通信時のエラーのようですね。
解決方法は全く難しくなかったのですが、エラー文だけでは詳細な原因がわからなかったので、今後また遭遇した時のためにまとめます。

今回参考にさせていただいた記事はこちらから。

【Xcode9】An error was encountered while attempting to communicate with this device.のエラーが出た場合の対処方法【iOS11】|ニートに憧れるプログラム日記
http://program-life.com/227

 

さて解決策ですが、まず1つ目は、プロジェクトを Clean するというもの。
通常ですと、Build → Run の流れかと思いますが、一度 Clean してから Build を行うと解決できることがあるのだとか。
ただ、私の環境ではこの方法では解決できず。

2つ目は、Xcode の再起動です。
単にウィンドウを閉じるだけでなく、完全に終了してから、再度 Xcode を起動します。
で、再度 Build して実行します。
この方法を試したところ、問題なくアプリを実行できました!

他にも、使用しているiPhoneを再起動する方法や、最終手段として(Gitを使用している場合)一つ前のコミットに戻る方法もあるとのこと。
…とりあえず、Git 操作をしなくて済んでよかった…。
または、デバイスとの通信エラーのようなので、一度デバイスとの接続を解除してから、再接続するのも効果的かもしれませんね。

 

以上、Xcode でアプリを実機起動できなかった時の対処法でした。
今回のエラーは対処が簡単でよかったです。

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

Fujisoft製モバイルルーターを買ってみた

ある日のこと、

普段から使用していたモバイルルーターに空のSIMアダプタを挿入してしまったのが原因で、ルーター本体のSIMピンをやってしまうという大失態を犯しまして…

仕方ないので新しいSIMフリーのモバイルルーターを探すことにしました。
急な出費となった上、毎日使うものではないので、できれば1万円台で抑えたいところです。

どうせならBluetoothテザリングもできる高性能なものに変えようと思い、とりあえず一番有名どころのNECルーターをチェック。

NECプラットフォームズ 自動SIM切り替え LTE モバイルルーター Aterm MR05LN (デュアルSIM 対応/nanoSIM×2) PA-MR05LN – Amazon

うん、とっても高い。
機能は素晴らしいのですが如何せん日本のメーカーの高級ルーターだけあってなかなかのお値段です。

ならば型落ちのMR04LNはどうだ!

NEC SIMロックフリー LTE モバイルルーター Aterm MR04LN 3B( デュアルSIM 対応 / microSIM ) PA-MR04LN3B – Amazon

やっぱり高い…
このお値段だったら普通にMR05LN買った方がいい気がします(汗

ならさらにその前のMR03LN!!!

NECアクセステクニカ Aterm MR03LN 6B ( LTE モバイルルータ / microSIM ) PA-MR03LN6B – Amazon

値段はとっても良かったのですが、流石に新品がありませんでした。
しかも評価欄をみるとちょっと香ばしいコメントが…

NECはあきらめて他社製のルーターも探したのですが、一部キャリアの周波数に対応してなかったり、電池持ちが悪かったり、今まで使っていたモバイルルーターよりも性能が低かったりなどなど….

意外とよさそうなルーターが見つかりませんでした。

これは困ったなぁとさらに探すこと数十分…

とてもよさそうなルーターを見つけました!

富士ソフト +F FS030W FS030WMB1 – Amazon

おっ、12000円!
予算の1万円を多少オーバーしていますが、許容範囲内です。

さて気になる機能・性能の部分。

Amazonには詳細が乗っていなかったので、型番からメーカーページで検索します。

+F FS030W – Fujisoft

主な特徴は下記の通り

・バッテリー持続時間
Bluetooth: 24h
Wi-Fi : 20h


・対応周波数

・その他
 自動APN設定
 自動再起動設定で長期間安定稼動(工場出荷時無効)
 ロングライフモード設定で電池の劣化を軽減(工場出荷時無効)
 交換可能な電池パックを採用
 オプションクレードルでモバイルとブロードバンドネットワークをシームレス利用
 自動消灯で液晶焼き付防止(工場出荷時30秒で消灯)
専用スマホアプリ有

あれ、もしかしてこれ大変優秀な端末では…

キャリア3社すべてのプラチナバンドをつかめる上、電池持ちもメーカー公称20時間以上、さらに自動でAPN設定もしてくれるとは…なかなかのすぺっくではないでしょうか。

評価を見てもそこそこ良好な印象だったので、思い切って購入してみました。

届いたのがこちら。
化粧箱がちょっとカッコいいです。

中身はこんな感じです。

本体とバッテリー、USBケーブルのシンプルなセットです。


蓋を開けるとこんな感じ。
SIMサイズはMicroSIMです。

SIMカードを入れでいよいよ電源ON。

電源を入れるとこんな感じ。
タッチパネルではないものの、カラー液晶でデータ残量などの情報がぱっと見でわかります。

本来であれば、接続した端末から挿入したSIMにあったAPN設定を行わないとパケット通信ができないのですが、この端末ではなんと、挿入したSIMカードに合ったAPN設定を自動で見つけ出して設定してくれます。

自分の場合は起動して数分間待っていたら、いつの間にか上記の画面になっていました。

これはスゴイですね。
ネットに接続できない状態でどうやって情報を取得してるんでしょうか((

使用感としてもとても良好で、Wi-FiやBluetoothが途中で途切れたりすることも特になく、回線も前に使ってたSIMルーターよりも高速が出ている気がします。

NEC同様、アプリでステータスや設定画面の呼び出しも行えるので便利です。

欠点としては、ボタンが一つしかないのでやや操作しづらいのと、電源に接続した際に自動で立ち上がってしまう点です。

バッテリー有り無しにかかわらず、電源の供給が開始されると自動で立ち上がるので、車載用ルーターとしてはとても向いていそうですが、普段使いだと、充電したタイミングで立ち上がったことに気づかずに、気づいたらいつの間にかスマートフォンやPCにつながってしまいガンガン通信してた….なんてことになる可能性があるので、ここは注意が必要です。

Fujisoftというと、年賀状ソフトの”筆ぐるめ”の印象が個人的に強かったので、ハードも製造していたというのはちょっと意外でした。

海外製の端末もいいものもたくさんありますが、性能面ではやはり国内企業の端末の方が安心感があるなぁと感じました。

とてもいい買い物でした。

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

オンラインPlantUMLエディタのPlantTextの紹介

PlantText UML Editor
 PlantTextはPlantUMLのオンラインエディタです。PlantUMLはUML図を容易に作図するための言語です。UMLとはUnified Modeling Language、統一モデリング言語の略でありUML図はUMLの記法に従った図です。フローチャート、クラス図、シーケンス図、状態遷移図などの様にモデルがどの様な構造でどの様にふるまうかを一定の規則でわかりやすく示します。次の図はあるイベントに参加するか否かのフローチャートのUML図です。

 長方形は処理、ダイヤは分岐、黒は処理のない始点、終点、通過点とわかれており、矢印はフローの方向を示し、UMLに従って作図するだけでわかりやすく仕上がります。UML図は便利ですが作図という性質上、まともに箱を書いて、丸を書いて、矢印を作って、と繰り返しているととても手間で面倒です。PlantUMLはUML図を容易に作図するために文字列だけを用います。
 PlantUMLの実行環境は様々です。大体IDEや多機能エディタには初期装備かプラグインかであります。PlantText UML EditorはPlantUMLのオンラインエディタです。先ほどの図は次の様に記述することで作図しました。

 画像右下のリンクにある様に画像として出力、テキストとして出力もできます。Editはコードの共有用です。先ほどのコードならばPlantTextの様にEditから飛ばされる先のリンクで共有できます。
 PlantUMLはUML用ですがER図もかなりそれらしいものが記述できます。下のリンクは読みやすかったPlantUMLの書き方です。
PlantUML Cheat Sheet – Qiita
PlantUML で ER 図(ERD)を描く(似非ではないです) – Qiita

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

【androidJava】exifInterface:exif情報の取得

前回はexifInterfaceを使うためのgradleの設定をしたので、今回いよいよ実際にコードを書いて説明していきたいと思います。

 

前述のサポートにより、画像を扱うアプリではInputstreamを使うことでExifInterfaceがぐっと使いやすくなりました。

これにより、受け取ったURIから直接画像のexif情報を取得できるようになりました。

exifInterfaceをnewする前にInputStreamを初期化しておきましょう。

<pre>InputStream in = null;</pre>

ここでようやくexifInterfaceクラスを使うことが出来ます。次に向き(orientation)の取得ですが、ここではexifInterfaceクラスの

メソッドgetAttributeIntを使って向きを取得します。getAttributeIntの使い方ですが、取得する情報のタグを指定して値を取得する.

だけで使うことができます。例えば、何の変哲もない修正していない画像を取得する場合はExifInterface.ORIENTATION_NORMALを

指定します。

<pre>int orientation = exifInterface.getAttributeInt(
        ExifInterface.TAG_ORIENTATION,
        ExifInterface.ORIENTATION_NORMAL);</pre>

無事に取得できれば後はこのorientationを変更したい角度に合わせてswitch文にセットすれば対象の画像のexif情報を

取ってくることができますね。

<pre>switch (orientation) {
    case ExifInterface.ORIENTATION_ROTATE_90:
        rotation = 90;
        break;
    case ExifInterface.ORIENTATION_ROTATE_180:
        rotation = 180;
        break;
    case ExifInterface.ORIENTATION_ROTATE_270:
        rotation = 270;
        break;
}</pre>

ExifInterface.ORIENTATION_ROTATE_〇〇はぱっと見分かりづらいですが、ものすごくかみ砕いて「この角度にすれば正しい位置になるよ」

と解釈しておけばその内慣れてくると思います。

次回はこのメソッドで取得したrotation変数を使って実際に向きを変えて表示してみましょう。

断片的なコードだけでは戸惑うかたもいると思うのでメソッド含めた全コードを載せておきます。


public class sample extends AppCompatActivity {

private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample);
imageView = findViewById(R.id.image_view);
int locatate;
int rotation = 0;
Bitmap bitmap;
Uri uri;
Intent intent = getIntent();
uri = intent.getParcelableExtra("imageUri");
try {
bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
//画像の向きを取得
getBmp(uri,rotation);
} catch (IOException e) {
e.printStackTrace();
}
}
public int getBmp(Uri uri,int rotation) {
  InputStream in = null;
  try {
    in = getContentResolver().openInputStream(uri);
    ExifInterface exifInterface = new ExifInterface(in);
    //緯度経度を取得
    getLatlong(exifInterface);
   //画像の向きを取得
    int orientation = exifInterface.getAttributeInt(
    ExifInterface.TAG_ORIENTATION,
    ExifInterface.ORIENTATION_NORMAL);
   switch (orientation) {
     case ExifInterface.ORIENTATION_ROTATE_90:
     rotation = 90;
     break;
     case ExifInterface.ORIENTATION_ROTATE_180:
     rotation = 180;
     break;
     case ExifInterface.ORIENTATION_ROTATE_270:
     rotation = 270;
     break;
  }
    System.out.println(rotation);
  } catch (IOException e) {
    e.printStackTrace();
  } finally {
    if (in != null) {
      try {
        in.close();
      } catch (IOException ignored) {
    }
  }
}
     return rotation;
}
}

 

 

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

【androidJava】exifInterfaceの初期化

長い間exifInterfaceの使い方がおぼろげだったのですが、理解が深まってきたところで小出しで記事をかくことにしました。

今回はチュートリアルみたいな感じでいきなり実践はせず設定の部分だけアウトプットすることにしました。

 

本題ですが、このexifInterfaceというのは1994年に富士フィルムが開発した画像のデータを含んだ形式のことを指します。

このデータを使うことで、角度を修正したりリサイズをしたり写真を撮った位置所法を取得できたりと画像を扱うプログラム

ならほぼ網羅することができます。

 

このExifInterfaceはapiレベルが24以上と推奨されていましたが

Support Library 25.1.0 のリリースに合わせて新たに ExifInterface Support Library が追加されたので、

apiが24以下の端末でも利用できるようになりました。

 

まずはgradleでminSDKVersionが実機より高くないか確認して、高かった場合はその実機のAPIより低くする必要

があります。

例えば、使用している実機のapiが22で、minSdkVersionが24だった場合はこのままでは怒られて使用できないので

minSdkVersionのapiレベルを下げましょう。

 

しかしminSDKVersionが低すぎても警告を受ける場合があるので今実機として使っているandroidのapiレベルが同じになるように

合わせてgradleのminSDKVersionを調整してみてください。

例えば実機のapiレベルが22の場合は


<span style="font-size: 14pt;">minSDKVersion 16 ×</span>

 


<span style="font-size: 14pt;">minSDKVersion 22 〇</span>

 

念のためにぴったりにしておいたほうが間違いないのでw

 

マニフェスト部分にもしっかりとパーミッションを書いておきましょう。

<pre><uses-sdk android:minSdkVersion="22" /></pre>

 

これでexifIterfaceを使う下準備は終わりました。次回は実際にexifInterfaceを使って向きを取得してみましょう。

 

 

 

 

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

Chromecast Audio、 生産終了だってよ…

Chromecast シリーズのデバイスの一つであるGoogle Cast Audioですが、先日、生産を終了したそうです。

Google、「Chromecast Audio」販売終了へ – ITMedia

現状、日本版Googleストアではまだ販売されているようですが、恐らく在庫限りだろうとのことです。

Chromecast AudioはChromecastの音声専用版で、Chromecastに対応したデバイスであれば、どのデバイスからでもWi-Fi経由で音声を飛ばすことができます。

自宅にもAUX付きでネットワークにつながらないスピーカーがあるのですが、音が結構いいのでよく使っていて、ChromecastAudioで無線化しようかなーとかちょっと考えてたので今回の発表はちょっと焦ってます(;´∀`)

思い切って買っちゃおうかな….

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

任意のJSONを返すサーバーを簡単に作るJSON Serverの紹介

json-server – npm
 JSON ServerはJSONファイルに書いた内容をそのままJSONとしてレスポンスしてくれるHTTPサーバを簡単に立てるパッケージです。使い方は簡単。

npm install -g json-server

 でjson-serverをインストール。必要があればglobalでなくしてプロジェクトに入れておきます。次に、任意の場所に適当なjsonファイルを置きます。例えばdb,jsonというファイル名で次の内容が記述されたものをC:\tmpの中に入れておきます。

{
  "profile": { "name": "typicode" },
  "spot": [
    {"id":1, "X":-140987.23691179, "Y":-71607.046446965, "lat":34.726604791, "lng":137.718115230},
    {"id":2, "X":-140987.23691179, "Y":-71607.046446965, "lat":34.726604791, "lng":137.718115230}
  ]
}

 この状態で

json-server --watch C:\tmp\db.json

 とコマンドを打てば、これでjsonレスポンスを返すサーバーが立ちました。こうすると次の様な画面になります。

 Resourcesに定義したjsonへのURLが記述されています。この通りにアクセスすると次図の様にjson形式のレスポンスが返ってきます。

 watchというコマンドから連想できるようにjson-serverはjsonファイルを監視しています。記述を変える度に再起動する手間も必要なく便利です。APIに関連するテストモックなどでよく使えます。

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