年別アーカイブ 2019

村上 著者:村上

【React】Material-UIのListsコンポーネントのrightIconButtonについて

ちょっとハマったので、対応方法をまとめ。
今回は、React のプロジェクトでマテリアルデザインを導入するために利用している「Material-UI」というフレームワークについてです。
このフレームワークで用意されている Lists コンポーネントを使ってリストを作成しているのですが、リストアイテムの右端にアイコンボタンを設置したとき、ボタンを押すとリストアイテムまで反応してしまうという現象が発生していました。

バージョンが古いのも問題なのでしょうが…依存関係の問題もあり、まだアップデートができていません。
時間を見つけて行いたいと思います。

 

サンプルのコードはこちら。

const rightButton = (
    <IconButton onClick={this.clickButton}>
        <MoreVertIcon color={grey400} />
    </IconButton>
);

<ListItem
    onClick={this.listClick}
    primaryText={[タイトル]}
    secondaryText={[サブタイトル]}
    leftAvatar={<img src={[画像URL]} height="40" width="40" style={style.image} />}
    rightIconButton={rightButton}/>

上記のように、右端に表示したいアイコンボタンを rightIconButton を使って定義したのですが、このボタンをクリックすると、ListItem で指定した onClick も発火してしまいます。
ドキュメントによると、rightIconButton を使って定義したボタンをクリックした時は、ListItem のクリックイベントは発火しないと書かれているのですが…。

で、正直面倒くさくなってしまったため、力業で解決することにしました。
それが下記のコードです。



<div className="listItem">
    <ListItem
        onClick={this.listClick}
        primaryText={[タイトル]}
        secondaryText={[サブタイトル]}
        leftAvatar={<img src={[画像URL]} height="40" width="40" style={style.image} />}
        rightIconButton={rightButton}/>
    <IconButton onClick={this.clickButton} className="rightButton">
        <MoreVertIcon color={grey400} />
    </IconButton>
</div>


ListItem から IconButton を外に出してしまい、CSS で位置を調整しました。
なお、CSS は下記のとおりです。

.listItem {
    position: relative;
}
.rightButton {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

恐らく上記の CSS であれば、ListItem の高さが変わってもボタンの位置は上下中央揃えになるはずです。
なお、CSS はデザインに応じて適宜変更してください。

 

以上、Material-UI のLists コンポーネントの rightIconButton が思った通りの動作をしなかった時の対処法でした。
正式な方法ではありませんが、少なくとも私の環境では問題なく動作しておりますので、お急ぎの時はこの方法を検討してみてはいかがでしょうか。

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

【sql】INTO句で一発で新規テーブルを作る方法

ここ最近はsqlのリファレンスも積極的に読むようになりました。

zendframeworkも最初見た時はなんじゃこりゃjavaみたいと困惑することもありましたが

今になってようやくその戸惑いも消えつつあります。

普通のINSERT句で新規にテーブルを作って与えられた値をレコードに突っ込むのは

簡単ですが、そのレコードの値を新たに作った新規テーブルにまた入れるとなると骨が折れますよね。

今回良いなと思ったINTO句は、一つの命令文で新規テーブル追加と旧テーブル両方にレコード

を追加することができます。一文でできるって素晴らしいです。


SELECT 名前、価格、産地、消費期限
  INTO 消費期限切れテーブル FROM 野菜テーブル

WHERE 消費期限 20190809

ここでは野菜テーブルから、消費期限切れレコードの値以下の行を抽出しています。例えば

ここに消費期限レコードの値が20190801や20180122に該当すれば、新規の消費期限切れテーブルに

移送されるということです。

一時的に目的のレコードを抜き出せるので、在庫処理などに向いてそうで便利そう。

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

【PHP】ファイルの中身からファイル形式を識別する

 webサービスではユーザがサーバにファイルを送ることはよくあります。送られたファイルの中身を扱うこともよくあります。想定していない振る舞いをするファイルを扱った際はバグに繋がりやすく、時にセキュリティの問題も引き起こします。ファイル形式の識別と識別結果による条件分岐は必要になります。
 ファイル形式の識別は簡易な方法がいくつかあります。例えば、ファイル名末尾にある拡張子から読み取れます。セキュリティ的にはとても信用できませんがファイル名のみで判別というのはとても高速で簡単です。例えば、MIMEタイプで大別できます。とはいえまだ偽装は簡単です。ファイルの中身からファイル形式を読み取る方法はこれらよりいくらか頑強な方法です。
 MIME タイプ (IANA メディアタイプ) – HTTP | MDN
 ファイルの中身の先頭にはマジックナンバーと呼ばれるバイナリ形式の署名が入っています。形式によってはテキストエディタで無理やり開くと文字列で一部が見えます。下の画像の”臼NG”のあたりです。


 ファイル形式とマジックナンバーは次のサイトらにまとめられています。
File Signatures
File Signature Database:
 これと読み取ったファイルの中身を突き合わせることでファイル形式を識別します。PNG形式ならば次の通り、16進コードで表して” 89 50 4E 47 0D 0A 1A 0A”となっています。

 PHPならば次の様に検証できます。

function isPng($content){
    $png_sig = "\x89\x50\x4e\x47\x0d\x0a\x1a\x0a";
    return strpos($content, $png_sig) === 0;
}

 ダブルクォーテーションでくくった文字列はエスケープシーケンスが使え、\xhhは”16進コードで hh の文字”を表します。
PHP: エスケープシーケンス – Manual
 先ほど得られた16進コードによるファイル先頭マジックナンバーをエスケープシーケンスによるも文字列で表し、strposで先頭からマジックナンバーが現れるかを確かめます。
PHP: strpos – Manual
 これでファイル形式を識別できます。先頭が正しくともさらに続きの部分で攻撃の余地があるかもしれませんがノーガードよりは随分ましになります。

 ファイルのバイナリはLinuxコマンドのod -h [ファイル名] | less -Fが読みやすかったです。

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

rc.localにSSHトンネルを張るコマンドを書いたらrc.localがこけるようになった話

先日、紆余曲折あってRaspberry Piに、起動時に特定のサーバーに対してリモートトンネルを掘るように、/etc/rc.localに

autossh user@example.com -R <待ち受けIPアドレス>:<源ポート>:<送り先IPアドレス>:<送り先ポート> -i /path/to/.ssh/id_rsa &amp;
# https://www2.filewo.net/wordpress/2014/08/05/ssh%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AF%E3%83%BC%E3%83%89%EF%BC%88ssh%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB%EF%BC%89%E3%80%90%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%BB%E3%83%AA/#i-21 を参考

のように記述していたのですが、OSの起動ログを確認してみると、

Failed to start /etc/rc.local Compatibility.

というエラーメッセージが発生。

起動後journalctlで調べてみると

ssh exited prematurely with status 0

というメッセージが出ていました。

調べたところ、こちらのサイトに答えが乗っていました。

Autossh error with upstart script: ssh exited prematurely with status 0 [closed] – serverfault

どうやら、rc.localでsshコマンドを動かしてしまうと、sshコマンドが出力する対話メッセージが原因で問題が起きてしまうようです。

ということで、ssh(autossh)コマンドに “-N”オプションを付けて、非対話モードにします。

autossh user@example.com -N -R <待ち受けIPアドレス>:<源ポート>:<送り先IPアドレス>:<送り先ポート> -i /path/to/.ssh/id_rsa &amp;

これで/etc/rc.localが起動で失敗することはなくなりました。

ちなみに、autosshは完全にkillされるまで動き続けるため、コマンドの最後に”&”をつけてバックグラウンドにしないといつまでたっても起動が終わらないという状態になりますので注意が必要です。

/etc/rc.localは手軽に起動時にスクリプトを実行させるにはいい仕組みですが、上記のようなことを考えるとやはり起動時に実行させる処理は可能な限りデーモン化した方がよいのかもしれませんね…(;´∀`)

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

Symantec と Broadcom

なんとブロードコムがシマンテックの企業部門を107億ドルで買収したとのこと。
しかもニコニコ現金払い!キャッシュですよ!かっこいい(笑)

ブロードコム、シマンテックの企業向け事業部門を買収へ-107億ドル

法人向け製品では以前 Endpoint Security を使用していました。今ではスタッフ数も減った関係で仮定向けの Norton 製品へ切り替えてしまいました。個人製品は引き続きシマンテック社の様です。ウィルス検知エンジンなど、そもそも別なのでしょうか。なんだか先行き不安ですが。

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

Linux系OSでタイムゾーンを変更する方法

OSに設定されているタイムゾーンが自分の使用したいものと異なっている場合、数時間時刻がずれてしまうことになるので、いろいろ困ることがあります。

そういった場合はタイムゾーンを設定しなおさないといけません。

Linuxでのタイムゾーンの変更方法をご紹介します。

/usr/share/zoneinfo

を見ると

$ ls /usr/share/zoneinfo
Africa      CET      Egypt    GMT+0      Iran       MST7MDT  Pacific    UCT          leap-seconds.list
America     CST6CDT  Eire     GMT-0      Israel     Mexico   Poland     US           localtime
Antarctica  Canada   Etc      GMT0       Jamaica    Msft     Portugal   UTC          posix
Arctic      Chile    Europe   Greenwich  Japan      NZ       ROC        Universal    posixrules
Asia        Cuba     Factory  HST        Kwajalein  NZ-CHAT  ROK        W-SU         right
Atlantic    EET      GB       Hongkong   Libya      Navajo   Singapore  WET          zone.tab
Australia   EST      GB-Eire  Iceland    MET        PRC      SystemV    Zulu         zone1970.tab
Brazil      EST5EDT  GMT      Indian     MST        PST8PDT  Turkey     iso3166.tab

あらゆるタイムゾーンの設定が書かれたファイルが置かれています。

これらは名前のタイムゾーンの設定がそれぞれ入っているので、設定したいタイムゾーンファイルのリンクを/etc/localtimeとして張ります。

ln -sf  /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

(日本語時間に設定する場合)

ただ、この設定では再起動時に変更する前のタイムゾーンに戻されてしまうようなので、永続化させるためには
/etc/sysconfig/clock
下記のように変更します。

ZONE="Asia/Tokyo"
UTC=false

これで設定完了です。

【Linux】タイムゾーン(Timezone)の変更 – Qiita

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

【css】縦長のページで画像が一緒にスクロールしてしまう時の対処法

divタグにくっつけたimgソースが、下にスクロールした時に一緒に移動してしまったときの対処法です。

今回は他のページで使われているアイコンを流用することにしたのですが

cssで設定した要素は絶対に一緒のはずなのになぜかスクロールと同時に画像もおりてくる事態に。。。

仕方がないのであわてず騒がず要素を触りながら確かめることにしました。

どうやら原因はpositionに何も設定していなかったのが原因

だったみたいで、ralativeだのabsoluteだのfixedだの何かしらの設定をする必要があったみたいです。


top: {
    height: "40px",
    position: 'relative'
  },

↑このように高さが設定してあるタグに対しては何らかのpositionの値を与える必要があります。

 

この中で一番無難なのがralativeで、同じタグに要素をぶち込まない限りは機能してくれるので

何も制約がない場合はこいつをおすすめします。

ちなみにabsoluteはブラウザによっては反映されないものもあるので個人的にはあまり推奨しません。

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

【Python】対話型アプリケーション自動化ツールPexpectの紹介

 Linux端末などにアクセスしてコマンドライン上で操作を行うことはよくあります。何かの作業で定型化した操作を行うこともままあります。Pexpeectでコードを組むと自動化処理を作れます。PexpectはLinuxコマンドのexpectの様なことをするPythonモジュールです。
Pexpect version 4.7 — Pexpect 4.7 documentation
 接続コードはシンプルです。ただ使うだけなら次のコードで大丈夫ですが、gitやら何やらに上げると大惨事です。そういう時はid, passwordは設定ファイルなり実行時の引数なりで渡すようにしましょう。

child = pexpect.spawn('ssh user@example.com')
child.expect('password')
child.sendline('mypassword')

 Common problems — Pexpect 4.7 documentation
 とりあえずの作りなら対話は次の様になります。コマンドを送る、入力可能状態になるまで待つ、の繰り返しです。

child.expect('user@example.com.*') # 入力可能状態(左側にユーザ名とディレクトリが見えるアレ)であることを期待する
child.sendline('telnet localhost %d\r' % telnet_port# コマンドを送る

 あくまで対話なので対話先で改めて対話先のローカル線用対話プログラムを開始することもできます。というかかなり広範囲のことができます。Linuxを深く知らない自分の範囲では何でもできるぐらいの感じです。Pexpectはコマンドライン上のプログラムのテスト、サーバやマイコン設定のデプロイ、ncとか使ってペネトレーションテストなど様々な使い道があります。
 公式ドキュメントのExamples — Pexpect 4.7 documentationにはプログラムとしてほぼ完成の状態の例があるのでそれを改造すると理解が早まり、すぐ実践ができます。

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

【Cordova】端末のプラットフォームやバージョン情報を取得できるプラグイン「cordova-plugin-device」

Cordova アプリを開発中に、Android と iOS で処理を分けるなど、端末の情報を取得する必要があるときに便利なプラグイン「cordova-plugin-device」についてのご紹介です。
主に、プラグインによっては、Android でしか動作しないものがあったり、逆に iOS でのみ動作するものもあったりするのでそれの処理をかき分けたい時などに使っています。

GitHub のページはこちらから。

GitHub – apache/cordova-plugin-device: Apache Cordova Plugin device
https://github.com/apache/cordova-plugin-device

 

インストールは下記のコマンドで行います。

cordova plugin add cordova-plugin-device --save

準備は以上で完了です。
あとは、任意の場所でプラットフォームの種類などのデバイス情報を取得できます。

私が主に使うのは下記のコードです。

const device = window.device.platform;

switch (device) {
    case 'Android':
        // 端末が Android だった時の処理
        break;
    case 'iOS':
        // 端末が iOS だった時の処理
        break;
    default:
        // その他の処理
}

上記では、アプリを実行している端末が Android なのか iOS なのか、それ以外のものなのかを判定して、それぞれの処理を実行できます。

他にも、UUID を取得したり、バージョン情報を取得したりすることもできます。
取得できる情報は下記のとおりです。

  • device.model
  • device.platform
  • device.uuid
  • device.version
  • device.manufacturer
  • device.isVirtual
  • device.serial

また、端末の製造元や、現在の実行環境が実機なのかシュミレータなのかを判断することもできます。
使い方は下記のとおりです。

// 製造元を取得
const manufacturer = window.device.manufacturer;
// シュミレータかどうかを取得
const isSimulator = window.device.isVirtual;

なお、シュミレータかどうかの判定については、OS Xブラウザの場合は常に false を返すようです。

 

以上、アプリを実行している端末の情報を取得できるプラグイン「cordova-plugin-device」のご紹介でした。
プラットフォームの取得以外はまだ使ったことはありませんが、それだけでもかなり使えますので、是非ご活用ください。

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

DNS サーバ BIND の TXT レコード長

最近 DKIM の公開鍵をレコードに記述する機会が増えて来たのですが、BIND の TXT レコード長には 255 文字という制限がある様です。

調査したところ SOA レコードの様に複数に分けて記述することで記述するとのこと。しかしこの TXT レコードを必要とする側のアプリケーション実装によっては分割された TXT レコードを解釈出来ずにエラーとなる、アプリケーション次第とのこと。

dkim._domainkey IN TXT ( "v=DKIMv1; " " abcdefg" "opqrstu" )

こんな感じ。
OpenDKIM 等はどうなのだろうか。
そもそも DKIM の TXT レコードが長くなることは想定の内だろうから、問題は無いのだと思うけど。

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