月別アーカイブ 6月 2019

村上 著者:村上

【React】mapを使って入れ子になっている要素を取得する方法

とっさにやり方が分からなかったので、覚え書きとしてまとめ。
React の書き方で、入れ子になっている要素を map で取得する方法です。

通常だと、下記のような書き方になるかと思います。

const list = Object.keys(result).map((data) =>
    <div>{result.data}</div>
);

が、今回扱ったのは、更に入れ子構造になっているので、これだけではだめでした。
なお、サンプルデータは下記のような感じです。

{
    "floor1": [
        {
            "name": "food",
            "category": 2
        },
        {
            "name": "shoes",
            "category": 1
        }
    ],
    "floor2": [
        {
            "name": "clothes",
            "category": 2
        }
    ]
}

上記のようなデータを扱う場合は、map 内でさらに map を使ってデータを展開するする必要があります。

 

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

javascript – How to have nested loops with map in JSX?
– Stack Overflow

https://stackoverflow.com/questions/47402365/how-to-have-nested-loops-with-map-in-jsx

どうやら、質問者さんも私と同じことでお悩みの要でした。

で、入れ子を展開する方法ですが、下記のように記述します。

const list = Object.keys(result).map(function(title) {
    return (
        <div>{title}</div>
        <table>
            <tr><th>name</th><td>category</td></tr>
            { result[title].map(function(item) {
                <tr><th>item.name</th><td>item.category</td></tr>
            })}
        </table>
    );
});

忘れそうなのは return ですかね。
これの中であれば、再度 map を使うことが可能なようです。
一度、うっかり忘れたときは、エラーが発生しました。

 

以上、React で 入れ子になっている要素を map で取得する方法でした。
map は一度理解してしまえばとても便利なのですが、慣れないと難しいかもしれません。
はじめのうちは、ご注意ください。

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

【Laravel】【Vue】propsを使わずVue上で組んだページ部にLaravelのBladeから値を表示する

 LaravelからVueに値を渡す時によくやる手法は次です。

        <upload-image
            v-bind:dist-url="{{json_encode(route('hoge.update'))}}"
            v-bind:hoge="{{json_encode($hoge)}}"
            v-bind:fuga="{{json_encode($fuga)}}"
            ...
            ...
        ></upload-image>
<template>
  <div>
    {{ hoge }}
    {{ fuga }}
    ...
    ...
  </div>
</template>
export default {
  props: {
    distUrl: {type: String, default: ''},
    hoge: {type: String, required: true},
    fuga: {type: String, required: true},
    ...
    ...
  },

 引数をjson化してpropsとして渡し、Vue内のテンプレートに埋め込みます。やり方はシンプルなのですが情報が増えるにつれpropsの肥大化がひどいことになります。なんらかのオブジェクトにまとめるのも手ですが、それはそれでバリデーションが辛くなります。この問題の回答の一つがVueのslotの仕組みを使うことです。
スロット — Vue.js
 slotは指定された位置のHTMLコードをVueコンポーネントを呼び出す階層から決定するための仕組みです。そのため先ほどの例ならば次の様に書けます。

        <upload-image
            v-bind:dist-url="{{json_encode(route('hoge.update'))}}"
        >
          <div slot="slot-no-namae">
              {{ $hoge }}
              {{ $fuga }}
              ...
              ...
          </div>
        </upload-image>
<template>
  <div>
    <slot name="slot-no-namae"/>
  </div>
</template>
export default {
  props: {
    distUrl: {type: String, default: ''},
  },

 Blade上のHTMLエスケープエコーの短縮構文{{}}を実行してHTMLコードを生成。それのHTMLコードをslotに割り当てます。これにより、propsを介することなくPHP内部で扱っていた変数の値を持つHTMLコードをVue上で組んでwebページのテンプレート内に組み込めました。propした値を後から変更しない、Vue内の関数で参照する予定が無い、といった値は大体この方法に組み込むとスッキリしつつ問題のないコードを作るのに貢献してくれます。

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

【Excel】「折り返して全体を表示する」が解除できない時の対処法

別のファイルからセルをコピーすると、「折り返して全体を表示する」が強制的に付与される時があります。

通常は文が一行で収まらない時に無理やり改行させるために使用するのですが、ただコピーして貼り付けるときはいらないですよね。

そのままコピーすると、場合によってはせっかくコピーした文がセルに埋まってしまい作業効率が悪化してしまいます。

自分は、「折り返して全体を表示するが解除できない」を再度押しても解除が効かなかったので、やけくそ気味にホームタブのスタイル欄

にある標準_グラフのタブを押したら解除されコピーした文字がセルに埋まらず整った状態で張り付けることができました。

 

 

ちなみに形式を選択をして貼り付けのどれを使っても解決できなかったです。(「元の列幅の保持」を選択したら一応文字はセル内に

収まったのですがその分セルが伸びてしまいやはり使い物になりませんでした)。

 

 

 

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

総務省の強制SIMロック解除

総務省が中古市場のSIMロック解除を強制化して来ているので、 おそらく 2019年9月からすべてのキャリアの中古端末でSIMロック解除ができる様になります。

新品スマホ端末なんて、高くて購入できない私的には、早く中古端末が解除できる様になってほしい。

あと2ヶ月ちょっと。

待ち遠しいです。

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

レーダーと W53,W56 チャンネル

私の PC は 11n で 2.4Ghz 系統しか掴むことができませんが、オフィスの Wi-Fi は 5Ghz の電波をながしています。親機の仕様上 11n で 2×2 の 300Mbps までリンクできるはずが、私のPCは、どう頑張っても 144Mbps までの様です。バルク出来なくて残念。

最近 W56 の 110ch と 104ch がキショーレーダー検知して停波することがちょくちょくあるので、5Ghz 系のWi-Fi環境を改善しました。

といっても W52, W53, W56 をオートにしただけですけど。

プロファイル機能を使って、早朝出社前に一旦停波し、強制的に使用チャネルを探させています。天井に 4 機ありますが、うまい具合に電波が重ならない様に配置してくれています。

おそらく、再発はするだろうけど、自動的に別チャンネルで開始し始めるので”つながらない”、”無線おかしい”と声かかる前に復旧するかな?

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

【Webサービス】PDFファイルを英語から日本語に翻訳する方法

かなり便利だったので、備忘録としてまとめ。
タイトル通り、PDFファイルを英語から日本語に翻訳する方法です。

参考にさせて頂いたサイトはこちらから。

Google 翻訳の利用:PDFやWordのファイルを翻訳する方法 – 東京経済大学 TKUメール(Gmail)
http://google.tku.ac.jp/others/23/2

 

上のサイトで紹介されていたのは、Google 翻訳を利用する方法です。
Google 翻訳のページを開くと、下の画像のように翻訳元・翻訳後のテキストが表示されるエリアがあるかと思います。

で、いつも使わなかったので見落としていましたが、翻訳元テキストの入力欄の上に「テキスト」とは別に「ドキュメント」というボタンがあります。
こちらをクリックすると、Word や PDF、Excel ファイルなどを選択できるようになるので、こちらに翻訳したいファイルをアップロードします。
あとは「翻訳」ボタンをクリックすれば、翻訳が完了した文章がHTMLページで表示されるので、このページを保存するなり、必要な部分のみを抜き出したりするなどしてください。

 

以上、PDFファイルを翻訳する方法でした。
短文ならコピー&ペーストで対応可能ですが、ファイル丸ごととなるとその方法は面倒なので、今後はこの方法を使いたいと思います。
参考になれば幸いです。

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

【Excel】浮動小数点の計算結果のズレを解消する方法

今回もExcelの話題になります。今回は3.10-3.08などの浮動小数点の計算結果を正確に表示したいときの方法です。

例えば、3.10・・・ー3.08・・・の答えは0.12ですが、エクセルで減算すると0.11と表示されてしまいます。これは、計算される値が小数

点第二位以降の値まで含んでいるため起きる誤差です。浮動小数点以降の値が多いほど誤差が出やすく、小数点第二位までの値をExcelで正

確に出したい時に非常に邪魔になるのでrounddownで計算結果を演算する関数を囲んで浮動小数点第二位までの値を切り捨ててしまいましょう。

 

最初から計算される側の値を切り捨てておくことで、誤差が出るのを防ぐことができるのでおすすめです。


ROUNDDOWN(ここにsum関数などを入れる,2)

 

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

【PHP】一度の組み込み関数呼び出しでvar_dump()を二回呼び出す

 多分たまたまC言語実装がそうなっているだけなのでしょうが、タイトル通りの現象が起きます。起きるのは次の通りArrayAccessを実装した際のemptyです。

 ArrayAccessの説明には次の様にあります。

ArrayAccess::offsetGet

(PHP 5, PHP 7)

ArrayAccess::offsetGetオフセットを取得する

説明

abstract public ArrayAccess::offsetGet
( mixed $offset
) : mixed

指定したオフセットの値を返します。

このメソッドは、オフセットが empty() かどうかを調べる際に実行されます。

ArrayAccess::offsetExists

(PHP 5, PHP 7)

ArrayAccess::offsetExistsオフセットが存在するかどうか

説明

abstract public ArrayAccess::offsetExists
( mixed $offset
) : bool

オフセットが存在するかどうかを返します。

このメソッドが実行されるのは、ArrayAccess
を実装したオブジェクト上で isset() あるいは
empty() を使用した場合です。

注意:

empty() を使用すると ArrayAccess::offsetGet()
がコールされ、ArrayAccess::offsetExists()
TRUE を返すかどうかで空かどうかを判断します。

 要するにemptyの真偽をArrayAccess::offsetExists && ArrayAccess::offsetGetという式で判断しています。このため最初の画像の様にArrayAccess::offsetExistsとArrayAccess::offsetGetにvar_dumpを仕込むとemptyと一度組み込み関数を使っただけで2か所のvar_dumpが走りました。
 ArrayAccess::offsetExists && ArrayAccess::offsetGetという表現から予想できるように短絡評価をしています。そもそもnullの場合はArrayAccess::offsetExistsのみを実行して終わりです。
 

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

【Android】WebViewでURLで指定された画像が表示されないときの対処法

タイトル通り、Android の WebView にて、画像URLで指定された画像が表示できない時の対処法です。
私が普段使っている端末が Android 7.0 で、この環境では問題なかったのですが、Android 9.0 で発生しました。

で、Chrome のデバックモードで確認したところ、「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」というエラーが発生していました。
検索したところ、下記の記事がヒットしました。

Android – [Android] WebViewでサーバー上のhtmlを読み込めない|teratail
https://teratail.com/questions/94253

 

こちらによると、画像URLが https:// ではなく、セキュアではない http:// から読み込まれようとしているため、WebView がブロックしていることが原因のようです。
確認したところ、読み込もうとしている画像 URL は確かに URL は http:// ですね…。

で、対応策としては、AndroidManifest.xmlapplication タグに、下記を追加するとのこと。

<application ... android:usesCleartextTraffic="true">
    ...
</application>

上記の android:usesCleartextTraffic="true" を AndroidManifest.xml に設定することでも全ての通信に対して、暗号化されていない、HTTP 通信を許可することができます。
上記を追加して実行したところ、無事に画像が表示されました!

しかし、何故か PC にAndroid 端末を繋いで直接インストールする方法の時は画像が表示されるという謎な動きをしたので、DeployGate を挟んでインストールを行いました。
この現象については要注意ですね!

 

以上、Android の WebView で、画像URLで指定された画像が表示されない時の対処法でした。
…本当は、画像 URL もセキュアな通信で取得するようにするのが一番良いんですけどね…。
でも、すぐには難しいと思うので、この方法でしのぎましょう。

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

【PHP】のパスワード関数

 高級言語というものは大体何かしらパッと使うための組み込みなりパッケージなり用意されているため、あーだこーだ悩んで車輪の再発明をするよりもググった方が早い話がよくあります。PHPのパスワードもその一つです。

PHP: パスワードのハッシュ – Manual

PHP: Password Hashing 関数 – Manual

 これは攻撃を通すことが困難なパスワード処理を呼び出す関数群です。PHPにはこういった組み込み関数がいくつもあります。(ドキュメントを作っている人達自体把握しきれていない節がありますが。PHP: Imagick::getImageArtifact – Manualには(No version information available, might only be in Git)とあります。mightには思わず突っ込みが走りますね。)
 この組み込み関数を使えば復号化、総当たりを始めとした攻撃への対策を素人考えで行ったり、玄人になるくらい勉強するよりずっと早く楽にセキュアなプログラムを作れます。
 Laravelのログインも最後にはこのパスワードハッシュ関連の関数を使ってパスワード生成、認証を行っています。

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