常連

回答者

拍手喝采

自己紹介

###前提・実現したいこと
cssグリッドレイアウト構造を利用して下記画像のデザインを作成したいです。
●対応したいブラウザ chorome,firefox,safari,Edge,IE11

![イメージ説明](43fdb2cb85c995498d160998e434a488.jpeg)
cssグリッドレイアウトを下記の記事を参考に設置してみました。
[CSS Grid Layout を極める！（場面別編）](http://qiita.com/kura07/items/486c19045aab8090d6d9)

[can I use](https://caniuse.com/#search=CSS%20Grid%20Layout)の情報によればchorome,firefox,safari最新版はベンダープレフィックスをつけなくても表示成功しました。

Edge,IE11にも対応させるために下記のサイトを参考にベンダープレフィックスを付与しました。
[EDGE対応参考記事](http://mntp.hatenablog.jp/entry/2017/05/01/003649)
[EDGE対応参考記事その２](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)

ここで問題が発生！
EDGEでは表示が成功しましたが、IE11では効きませんでした。IE11対応するためには何が足りてないでしょうか、ご教示お願いします。
下記にソース掲載します。

```html
<body>
  <ul class="grid_area">
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No1]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No2]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No3]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No4]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No5]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No6]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No7]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No8]"></li>
    <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No9]"></li>
  </ul>
</body>
```
```css
*{
  padding:0;
  margin:0;
}

ul.grid_area {
  width: 1000px;
  margin:0 auto;
  display: grid;
  display: -ms-grid;
  grid-template-columns: repeat(6, 1fr);
  -ms-grid-columns: repeat(6, 1fr);
  grid-gap: 10px;
  /*grid-auto-rows: minmax(100px, auto);*/
  list-style: none;
}
ul.grid_area li{
  background: #ccc;
}
ul.grid_area li img{
  max-width: 100%;display: block;
}


/*IE10*/
@media all and (-ms-high-contrast:none) {
  ul.grid_area li {
        margin: 5px;
  }
}

/*IE11*/
@media all and (-ms-high-contrast:none) {
       *::-ms-backdrop, ul.grid_area li {
    margin: 5px;
  }
}

/*EDGE*/
_:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
  margin: 5px;
}

ul.grid_area li:nth-child(1) {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(2) { 
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(3) {
  grid-column: 3/5;
  -ms-grid-column: 3;
  -ms-grid-row-span:2;
  grid-row: 1/3;
  -ms-grid-row: 1;
  -ms-grid-column-span:2;
}
ul.grid_area li:nth-child(4) {
  grid-column: 5;
  -ms-grid-column: 5;
  grid-row: 1;
  -ms-grid-row: 1;
}
ul.grid_area li:nth-child(5) {
  grid-column: 6;
  -ms-grid-column: 6;
  grid-row: 1;
  -ms-grid-row: 1;

}
ul.grid_area li:nth-child(6) {
  grid-column: 1/3;
  -ms-grid-column: 1;
  -ms-grid-column-span:2;
  grid-row: 2/4;
  -ms-grid-row: 2;
  -ms-grid-row-span:2;
}
ul.grid_area li:nth-child(7) {
  grid-column: 3;
  -ms-grid-column: 3;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(8) {
  grid-column: 4;
  -ms-grid-column: 4;
  grid-row: 3;
  -ms-grid-row: 3;
}
ul.grid_area li:nth-child(9) {
  grid-column: 5/7;
  -ms-grid-column: 5;
  -ms-grid-row-span:2;
  grid-row: 2 / 4;
  -ms-grid-row: 2;
  -ms-grid-column-span:2;
}
```

###発生している問題
IE11ではこのように表示させる
![イメージ説明](da5bddd9a4b89eb6e9131cc71d258e01.jpeg)

css グリッドレイアウト（display: grid;）をIE10/IE11でも対応させるためにはどうすればよいでしょうか？

スマホアプリの開発(とくにSwiftによるiOSアプリ)の以下についてご教授ください。
・スマホアプリの開発工程、開発技法と、各工程で決定すべき事項
・各工程ごとの具体的な成果物の残し方(設計書やテスト仕様書、テスト結果等)



このような質問をした背景ですが、私はCOBOLやJavaなどによる業務アプリケーションの開発を事業の中心とする会社に勤めております。私自身もCOBOL一辺倒の仕事をしておりましたが、この度、社内で初めてスマホアプリの開発を行う部署を立ち上げ、そこに異動することとなりました。

SwiftによるiOSアプリの開発は独学で趣味でポチポチ作る程度はできますが、仕事としてのアプリケーション開発についてはズブの素人のため、開発工程や技法についてのノウハウが無い状態です。

これまで、完全なウォーターフォールによる開発しか経験しておりませんが、スマホアプリの開発においては必ずしもウォーターフォールが当てはまるとは思っておらず、模索している最中です。

そこで、上記のような質問をすることとなりました。
大変大雑把かつ概念的な質問であることは重々承知しておりますが、社内でのノウハウ作りをゼロから始めるこのような機会はなかなか無いので、なんとかモノにしたいも考えております。

Swiftの解説や簡単なアプリの製造部分については一般的な書籍が多数販売されておりますが、そこに至るまでの設計段階やテスト工程についてはあまり書籍がない印象です。

具体的なサンプルアプリを元に、設計からテストまでの一連の考え方や成果物の残し方を学べる解説書がありましたらご教授ください。

なお、現状はSwiftによるiOSアプリの開発を進めるので、それに直接当てはまるアドバイスいただけたら大変ありがたいです。また、当てはまらない場合も「Androidはこうしている」や「Webアプリはこうしている」など応用できることがありましたら、ぜひ宜しくお願いします。

スマホアプリの開発工程、技法について

お世話になっております。

以前Linux内でMySQLを立てて運用していましたが、
この度新しいマシン（Windows機）を購入し、そこにMySQLをインストールしました。

以前から使用していたクライアントのノートPC（Windows機）から上記へ接続しようとしたところ、アクセス拒否となってしまいました。

MySQLのほうでcreate userおよびgrant allは実行しました。
また、ポート3306も許可しており、my.iniにはbind-addressの記述がないため
接続の制限もありません。

ただ、ipconfigを打って表示されたIPアドレスに対してクライアントからpingを投げたところ、「宛先ホストへ到達できません」と表示されてしまいました。

以上から、MySQLどうこうが原因ではなくネットワークの設定が原因かと思われますが、
色々調べても解決方法が見つからなくこちらへ質問させていただいた次第です。

どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。

WindowsにインストールしたMySQLへのクライアントからの接続

###前提・実現したいこと
以下の状況において、LIKE の前方一致によるINDEXが効かず、性能が出なくて困っております。。。
INDEXが効かない原因と対応策を教えて頂けないでしょうか。

＜状況＞
１：CREATE TABLEテーブルは以下です。
```SQL
CREATE TABLE `tb_test_data` (
 `id` bigint(20) NOT NULL AUTO_INCREMENT,
 `col1` bigint(20) NOT NULL DEFAULT '0',
 `col2` int(11) NOT NULL DEFAULT '0',
 `col3` float NOT NULL DEFAULT '0',
 `col4` float NOT NULL DEFAULT '0',
 `col5` int(3) NOT NULL DEFAULT '0',
 `col6` int(11) NOT NULL DEFAULT '0',
 `col7` bigint(20) NOT NULL,
 `url` text,
 `date` date NOT NULL,
 PRIMARY KEY (`id`),
 UNIQUE KEY UNI_col1_col5( col1, col5 ),
 KEY `IX_col2` (`col7`, col2),
 KEY `IX_col3` (`col7`, col3),
 KEY `IX_col4` (`col7`, col4),
 KEY `IX_col5_col1` (`col7`, col5, col1),
 KEY `IX_col6` (`col7`, col6),
 KEY `IX_col1_col5` (`col7`, col1, col5),
 KEY `IX_date` (`col7`, date),
 KEY `IX_url` ( url(255) )
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
```

２：上記テーブルは更新型テーブル。更新頻度は毎秒１００件くらいのDELETE / INSERTを２４時間実施。
  （MyISAMのため、参照するとテーブルロックになり、更新はされません）
  登録順はcol1をキーにcol5の分だけ削除し、削除したcol1の値でcol5の分だけ登録を行います。

３：上記テーブルは現在、１．５億レコード存在します。AUTO_INCREMENTの値は４．５億です。

４：URL に INDEXを効かせたいSQLは以下のSQLです。
```SQL
SELECT	T1.*
FROM	tb_test_data T1
WHERE	T1.col7	=	123456
	AND	T1.url		like 'http://abc.jp/xxx/xxxx/xxx%'
ORDER BY col1
Limit 0, 100
```

５：実行計画
```SQL
id | select_type | table | type | possible_keys | key | key_len | ref | rows | Extra
1 | SIMPLE | T1 | range | IX_col1,IX_col2,IX_col3,IX_col5_col1,IX_col6,IX_col1_col5,IX_date,IX_url | IX_col1_col5 | 8 | NULL | 1157468 | Using index condition; Using where 
```
※上記の実行計画は「http://abc.jp/xxx/xxxx/xxx%」の部分を68文字のURLを指定し、このURLだけで１件の表示になる値で実行計画を出しています。そのため、理想の実行計画としては、
refに「IX_url」が表示され、rows項目も1となる事を想定していました。
※仮に「http://abc.jp/xxx/xxxx/xxx%」とした場合、データが存在しないため、
 ref項目に「IX_url」が表示され、rows項目も1となります。

６：その他注意事項
 ・URL項目に対して、Likeではなく、=による絞り込みはNGとなります。
 ・URLを階層別にハッシュ化して、=による絞り込みもNGとなります。
 ・URLを１文字ずつずらしてハッシュ化して、=による絞り込みはOKですが、
  INDEXが最大数（64個）を超えてしまうため、出来ないと考えてます。
 ・MATCH AGAINSTはOKですが、この更新型テーブルにFULLTEXT INDEXを貼って効果があるかは、現在調査中です。

###発生している問題・エラーメッセージ
USE INDEX ( IX_url )やUSE KEY( IX_url )を利用しても、実行計画のref項目に「IX_url」は表示されず、
実際に実行してもものすごく時間がかかる（１０分経っても終わらない）状況です。
これを数秒以内に結果が返ってくる形にしたいと考えています。

###該当のソースコード
上記SQL参照

###試したこと
上記説明参照

###補足情報(言語/FW/ツール等のバージョンなど)
MySQLのバージョンは5.6.22
phpMyAdminのバージョンは4.5.1（ちょっと古い）

実行計画や速度が遅く感じると判断した際の動作環境は
phpMyAdmin上での実行結果になります。


###追記
check table tb_test_data;
を実行した場合、２時間経っても終わらないため、実施していません。

check table tb_test_data fast quick;
にて、テーブルの状態を確認していますが、
statusは「Table is already up to date」の状態で、問題ない認識です。

show table status like 'tb_test_data%';
にて、断片化は確認をしていて、0.6%程度の断片化率です。
（該当テーブルのURL以外の指定における性能劣化は見られていません。）

###追記２
検索用URL（100文字等）を作ってINDEXを貼って検索するのは、個人的には良いのですが、
仕様決定者的にはNGでした。。

###追記３
index(col7,col1,url(200))の追加案については、
col7での絞込件数≒実際の絞込件数（urlによる絞り込みがほとんどない）
であれば、Limitが効くため、性能は良いですが、
検索結果が「１件」の場合、Limitの効果がないため、性能遅延が発生してしまいます。

index(col1,col7,url(200))の追加案については、
全体の件数≒col7での絞込件数≒実際の絞込件数（col7,urlによる絞り込みがほとんどない）
であれば、Limitが効くため、性能は良いですが、
検索結果が「１件」の場合、Limitの効果がないため、性能遅延が発生してしまいます。

なお、上記２つのINDEXでは、URLのINDEXには届かないため、１件抽出する場合、即レスポンスにならないです。

INDEXさえ効けば、検索結果が１件の場合、即終わるハズなのですが、
実行計画の時点で効かない原因を知りたいです。。

###追記４
InnoDBについて

InnoDB化した場合、３００万の登録に６０分経っても終わらなかったため、INDEXが効くかどうかは分かりません。
別の仕様（毎秒１００件の削除・登録）が不可であるため、InnoDB化はできません。
（MyISAMであれば、３００万の登録に７分で終わります）
InnoDBは統計情報がきれいなはずなので、InnoDBであれば、確かに効く気はしています。

###追記５
INDEXが効いたSQLと効かないSQLがありましたので、情報共有いたします。
”存在しないURL”を指定すると、基本的に、INDEXが効きいて、1秒以内のレスポンスになりました。
ただし、"存在しないURL"が50文字以上となると、INDEXが効かず、300秒くらいのレスポンスになってしまいました。。

MySQL5.6.22のバグなんじゃないかと思い始めてます。。

###追記６
AkiraPenguin 様の回答により、解決いたしました！
ありがとうございます！！！！！

なお、追記５の問題も、ちょうど50文字目が「_」となっておりました。
「_」を含むURLは300万件存在するため、「_」の後に存在しないURLを置いていても、
それはINDEXが効きません。。。当然ですね。。。

たくさんの閲覧・回答ありがとうございました！