カテゴリーアーカイブ 言語

村上 著者:村上

【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)
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)
asaba 著者:asaba

【zendframework】行の要素を一行ずつ巡回する方法

ここ最近phpでsqlに触れる機会が少しあったので、せっかくなので配列に一行ずつアクセスする

処理を勉強がてらブログに残していきます。

まずテーブルを指定して、行を配列の要素として返すにはtoArray()メソッドを使います。

toArray()メソッドは、テーブルにある一つの行を配列の要素として持たせることができるメソッドで

カラムと値はkey=>valueの形で連想配列として扱われます。

 

</pre>
$Tables = new Tables();
$rowset = $Tables->fetchAll();

$rowsetArray = $rowset->toArray();

$rowCount = 1;
foreach ($rowsetArray as $rowArray) {
echo "row #$rowCount:\n";
foreach ($rowArray as $column => $value) {
echo "\t$column => $value\n";
}
++$rowCount;
echo "\n";
}
<pre>

 

一つ目のforeachで行を一つずつ見ていき、ネストされたforeachでは行のカラムの要素を一つずつ

見て一つずつ出力しているのが分かります。

 

これを上手く使えば、全列にアクセスして該当した値に対して指定した数値以下の値を書き換える・削除する

といった柔軟な動きを降り入れることができるのでキホンとして覚えておきたいですね。

 

もう少しフレームワークの動きとsqlの基礎が分かってきたらもう少し掘り下げていじってみたいと思います。

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

言語横断パッケージ検索サービスLibraries.ioの紹介

Libraries.io – The Open Source Discovery Service
Libraries.ioはパッケージ検索サービスです。パッケージ検索自体はよくありますし、大体パッケージマネージャの本元が強すぎて特色を出しにくいです。Libraries.ioは複数言語のパッケージマネージャを横断的に検索できる点で特別です。GitHubの中でリポジトリを探す感じです。

 特に有効的に使えるのは使用言語が自由で特定の目的を達成したい時でしょう。使用言語選定の一評価指標になります。例えば、dxf(図面用のフォーマットの1種。独自フォーマットA->dxf、dxf->独自Bの様に中間形式で使われやすい)で検索すると次のように出ます。

 Go言語やJavaScriptで層が厚そうです。pythonもいくつか選択肢があります。dxfを扱うプログラムを作るなら言語はこのあたりを使った方が手っ取り早くできそう、と判断できます。

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

PHPは”オワコン”?いやいや…

PHPよりも○○の方がいい、ネット上ではそんな話もちらほら見かけます。

PHPはもう古いから他の言語に乗り換えた方がいい、とかですね。

そんな中、最近こんな記事を見つけました。

PHPはもうダメだ、PHP万歳!- POSTD

“PHPはもうダメだ”といったブログの投稿が、登場し始めたのは2011年のようです(これより古いものを見つけたら、お知らせください)。Mediumや、mushroomsのように突然出現したcoding bootcampsを探し回れば、その唯一の共通点は、みんながPHPを嫌っているか、あるいは単に無視しているかです。どうやら、法外な値段のコーヒーを飲みながら、油まみれのヒゲと皮肉たっぷりのTシャツと一緒に、PHPでコーディングするのは不可能のようです。

ばかな!
もうたくさんです。反PHPのエコーチェンバー現象のせいで、疑わしいビジネス上の決断を下そうとしている創設者に私はいつも話しかけています。
これが現実です。2018年現在、Webサイトの約80パーセントがPHPが使用している
PHPは、なんだかんだ言っても、それほど廃れていないと思います。

https://postd.cc/php-is-dead-viva-le-php/

こちらの記事でも突っ込まれていますが、実際PHPはいまだによく使われている言語であるという話は僕も同感です。

もし使われていなかったら、Laravelのような優秀なフレームワークの開発がどうして継続されるでしょうか。

それに、PHPは本家も定期的にアップデートしている言語ですし、オブジェクト指向もサポートされていますし、いまだにひけをとらない仕様の言語だとも思います。

パッケージマネージャーのComposerもありますしね。

昔からWebサーバーとの親和性もいいので、入門にも是非お勧めしたい言語でもあります。

…とはいえ、自分は必ずしもPHPが100%良いとも考えていなくて、ディープランニングとかにも強そうなPythonとかもちょっと触れるようになりたいなぁ…とかもちょっと考えちゃいますけどね…w

とりあえず、もうしばらくはPHPでプログラミングのノウハウをためてから、是非他の言語もチャレンジしたいですね。







# サーバーサイドもクライアントサイドもなんでもできてしまうJavascriptが実は一番すごいのかもしれない
AI(人工知能)の開発に適したプログラミング言語ランキング8選

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

【CSS】テキストの上下中央寄せができない時の対処法

Android 7 以下でのみ発生するテキスト位置のずれに対処したので、その方法についてまとめ。
CSS の height プロパティと line-height プロパティを指定していたのですが、何故か文字が上にずれるという謎現象が発生していました。
そして Android 8 以上の端末や、iPhone では再現せず…。

で、調べたところ下記の記事がヒットしました。

inline-blockで上下が中央に揃えるのに時間かかった – Qiita
https://qiita.com/nagito25/items/fb0e8455a8b2fdcd480b

 

上記の記事によると、子要素に display: inline-block; を指定してある場合、親要素で heightline-height を指定し、子要素で vertical-align: middle; を指定すると綺麗に整うとのことでした。
具体例は下記のとおりです。

<ul>
    <li>要素1</li>
    <li>要素2</li>
    <li>要素3</li>
</ul>

CSS はこちら。

ul {
    height: 50px;
    line-height: 50px;
    padding: 0;
}
li {
    display: inline-block;
    width: calc((100vw / 3) - 6px);
    text-align: center;
    border: solid 1px;
    vertical-align: middle;
}

なお、子要素の li が 1行の場合は vertical-align: middle; を指定しなくてもOKです。
2行以上になる事が考えられる場合は必ず指定しておきましょう。

 

以上、テキストが上下左右中央揃えにならない時の対処法でした。
最初、ずっと子要素の li 内で heightline-height を指定していたのですが、親要素で指定しないと崩れるとは…分かりませんでした。
無事解決できてよかったです。
同じことでお困りの方の参考になれば幸いです。

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