常連

自己紹介

このようなボックスの作成を行いたいと思い、挑戦しています。
![イメージ説明](28fa5d8e4c545d23617accb33c3baa4a.png)
はみ出した線をどうするのかが思い浮かびません。
上に重ね掛けをすればよいのではないかと試したのですが、どうしても線が太くなってしまうことにも気づきました。
ネットで検索をしたのですが、できる可能性は低いのではないかと思ってはいます。

可能か不可能か教えていただけませんでしょうか。
また、可能でありましたら方法を教えていただけませんでしょうか。

```html
<div class="background-1">
    <div class="background-2">
       <p>あああああああ</p>
    </div>
</div>
```
```css
.background-1{
    margin: 12px;
    position: relative;
    background-color: #fff;
    border: 2px solid #333;
}
.background-1::before{
    position: absolute;
    content: '';
    right: -17.5px;
    top: -2px;
    border: 20px solid transparent;
    //追加コードが必要
}
.background-1::after{
    position: absolute;
    content: '';
    left: -17.5px;
    bottom: -2px;
    border: 20px solid transparent;
    //追加コードが必要
}
```

CSSで可能なボックスのデザインであるか

お世話になります。
現在作成しているサイト(bootstrapを使用)でツールチップの実装を行っているのですが、表示されず困っております。

色々と検証しているうちに、
htmlで直接

```html

<div class="test">
    <div data-toggle="tooltip" title="ツールチップ">
        aaaaa
    </div>
</div>
```

と書くとツールチップは表示されるのですが、
javascriptで生成されるソースに対してはツールチップが表示されないことに気づきました。



```javascript

var contents = '<div class="test" data-toggle="tooltip" title="ツールチップ">aaaaa</div>';

target = document.getElementById('test');
target.innerHTML = contents ;

```
```html

<div id="test">
</div>
```

javascrptで生成するコンテンツでツールチップを表示させるにはどのようにしたらよろしいでしょうか？
どうぞよろしくお願いします。

javascriptで生成する要素にツールチップを実装したい【Bootstrap】

お世話になります。サーバー関連は初心者です。


〜〜〜状況説明〜〜〜

現在、awsのec2にてサイトを運営しております。使用しているインスタンスはt2.medium(メモリ4G、CPU数2)でDB(mysql)も一緒のインスタンスに入っています。

サイトのアクセス数は平均すると1日1万、月で30万アクセスくらいです。

この度、サイトへのアクセスが重くなったのでいろいろと調べてみました。

uptimeコマンドでload averageを見ると、3.00 ~ 4.75くらいの値が出ます。インスタンスのCPUの数は2つですので、2.00を超えていると高いのかなという印象です。

freeコマンドで空メモリをチェックすると2.7Gありました。（4Gのうち使用中は1.3G）

続いてawsの管理画面でインスタンスのCPU使用率を見ると10%前後となっております。

〜〜〜状況説明終わり〜〜〜


お聞きしたいことは2点です。

●「load averageが高い = CPU、メモリに余裕がない」という認識は間違っているのでしょうか。またload averageの値が下がればサイトへのアクセス速度の改善も期待されるのでしょうか。

●load averageの値を下げるにはどのような方法がありますでしょうか。例えばインスタンスをt2.xlarge(メモリ16G、CPU数4)にスケールアップした場合、load averageの値の低下が期待できるのでしょうか。

ec2をスケールアウトして複数台構成にし、DBも別サーバーかRDSにするのが良い選択であるかもしれませんが、もしスケールアップしてメモリとCPUを強化することでも改善が期待できるのであれば、そちらで対応したいと考えております。

以上、お手数ですがどなたかご教授いただければ幸いです。
宜しくお願いします。


追記：
apacheとmysqlの設定等を下記に示します。

---apache（2.2.31）---
StartServers       8
MinSpareServers    5
MaxSpareServers   20
ServerLimit      256
MaxClients       256
MaxRequestsPerChild  4000

Timeout 60
KeepAlive off


---mysql（5.6.36）---
max_allowed_packet=16MB
max_connections  151


---mysql> SHOW STATUS LIKE '%connect%';---
| Aborted_connects                              | 1       |
| Connection_errors_accept                      | 0       |
| Connection_errors_internal                    | 0       |
| Connection_errors_max_connections             | 0       |
| Connection_errors_peer_address                | 0       |
| Connection_errors_select                      | 0       |
| Connection_errors_tcpwrap                     | 0       |
| Connections                                   | 1034127 |
| Max_used_connections                          | 37      |
| Performance_schema_session_connect_attrs_lost | 0       |
| Ssl_client_connects                           | 0       |
| Ssl_connect_renegotiates                      | 0       |
| Ssl_finished_connects                         | 0       |
| Threads_connected                             | 4       |

以上です。


追記２：
sarの結果も示します。%iowaitは高いですが、%systemは低い値でした。

11時37分30秒     CPU     %user     %nice   %system   %iowait    %steal     %idle
11時37分31秒     all      0.50      0.00      0.50     48.76      0.50     49.75
11時37分32秒     all      0.00      0.00      1.51     98.49      0.00      0.00
11時37分33秒     all      0.00      0.00      1.00     80.00      0.00     19.00
11時37分34秒     all      0.00      0.00      0.51     49.24      0.00     50.25
11時37分35秒     all      0.00      0.00      1.01     76.88      0.00     22.11
11時37分36秒     all      0.00      0.00      0.50     99.50      0.00      0.00
11時37分37秒     all      0.00      0.00      0.00     99.50      0.50      0.00
11時37分38秒     all      0.00      0.00      0.00    100.00      0.00      0.00
11時37分39秒     all      0.50      0.00      0.50     99.00      0.00      0.00
11時37分40秒     all      0.00      0.00      0.50     99.50      0.00      0.00
平均値:      all      0.10      0.00      0.60     85.08      0.10     14.11


sar 1 10 -Wを実行した結果も表示します。

11時38分50秒  pswpin/s pswpout/s
11時38分51秒      0.00      0.00
11時38分52秒      0.00      0.00
11時38分53秒      0.00      0.00
11時38分54秒      0.00      0.00
11時38分55秒      0.00      0.00
11時38分56秒      0.00      0.00
11時38分57秒      0.00      0.00
11時38分58秒      0.00      0.00
11時38分59秒      0.00      0.00
11時39分00秒      0.00      0.00
平均値:       0.00      0.00

load averageが高い(3.00~4.75)がCPUの使用率は10%前後なのはどうして？

jqueryプラグインのslick.jsを使って画面に3つ表示させる設定をしています。
この時にオプションで矢印を表示させているのですが、
この矢印をセンター画像の内側に表示させる方法はありますでしょうか。

▼以下にサンプルを作成しました。
[https://jsfiddle.net/aox1cb4y/](https://jsfiddle.net/aox1cb4y/)

ご教示いただけると幸いです。
よろしくお願いいたします。

slick.jsでスライダーに表示させる矢印を移動させたいです。

既にObject内に特定のキーが存在している場合は、そのキーの配列にデータを追加し、まだ、Object内に特定のキーが存在していない場合は、そのキーに配列をセットしてから、データを追加という処理を以下のコードで行なっているのですが、これを副作用のないコードに書き直したいです！

関数型プログラミング？？？

ですが、どうやったら副作用のない形に以下のコードを書き換えることが出来るかが頭を絞ってもわかりません >_<



# 副作用のあるコード
```JavaScript
'use strict';

const payload = [
	{id: '001', score: 100},
	{id: '001', score: 40},
	{id: '100', score: 132},
	{id: '100', score: 482}
];

//(1)Deep Copyするには？（ライブラリで解決する方法は既に把握済みですが、ライブラリを使わない場合はどう書くのか？
const state = {
	'001': [
		{id: '001', score: 142},
		{id: '001', score: 112}
	],
	'010': [
		{id: '010', score: 142},
		{id: '010', score: 112}
	]
}

//(2)forEachは値をreturn出来ないが、forEachを使わず副作用の無いように書くにはどうしたら良いのか？
payload.forEach((data) => {
	
	if(typeof state[data.id] === 'undefined') {
		state[data.id] = [];
	}
	
	state[data.id].push(data);
	
});
```



# 得たい結果
```ここに言語を入力
{ 
	'100': [ 
		{ id: '100', score: 132 }, 
		{ id: '100', score: 482 } 
	],
		
	'001': [ 
		{ id: '001', score: 142 },
	 	{ id: '001', score: 112 },
	 	{ id: '001', score: 100 },
	 	{ id: '001', score: 40 } 
	],
	
	'010': [ 
		{ id: '010', score: 142 },
		{ id: '010', score: 112 } 
	] 
}
```

このJavaScriptコードを副作用が無いように書き換える為には？

いつもお世話になっております。
下記のようなHTMLデータの<td>の文字列をキーに<tr>に設定されたrowidを取得したいです。
key1だけの条件であれば下記のように取得できたのですが、
key1とkey2を条件にしたい場合にうまくできませんでした。
この場合はどのように書けばいいのでしょうか？
よろしくお願いいたします。

```html
<html>
:
<body>

<table id="table2">
	<tbody>
		<tr data-rowid="101"><td>(1)</td><td class="key1">test1</td><td class="key2">aaa</td></tr>
		<tr data-rowid="102"><td>(2)</td><td class="key1">test2</td><td class="key2">bbb</td></tr>
		<tr data-rowid="103"><td>(3)</td><td class="key1">test3</td><td class="key2">ccc</td></tr>
	</tbody>
</table>
:
<script type="text/javascript">
$(function() {
	// key1を条件にrowidを取得
	var rowid = $("#table2 td.key1:contains('test3')").parent().data("rowid");
});
</script>
:
</body>
</html>

```

jQueryのセレクタで複数条件を指定したい

現在Monacaを用いましてPERSISTENTに保存したファイル名一覧を取得しています。下記コードを用いまして、PERSISTENT直下にあるファイル名一覧を取得することができたのですが、同じくそこに置いてあるサブディレクトリ（フォルダA）の中に置いたファイル名一覧を取得する方法が分かりません。

他所（[https://www.html5rocks.com/ja/tutorials/file/filesystem/](https://www.html5rocks.com/ja/tutorials/file/filesystem/)）調べてみましたところ「getDirectory」を用いるとサブディレクトリを取得できる？ようなのですが、その先どのようにコードを組んでいいものか分からず、方法お分かりの方がいらっしゃいましたらよろしくお願いいたします。

```ここに言語を入力
/*＝＝＝PERSISTENTにあるファイル一覧を取得する＝＝＝*/

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onFileSystemFail);
    }
    function onFileSystemSuccess(fileSystem) {
        var directoryEntry = fileSystem.root;
        var directoryReader = directoryEntry.createReader();
        directoryReader.readEntries(getFileName, fail);
    }
    function onFileSystemFail(error) {
        console.log("error: " + error.code);
    }
    function getFileName(fileEntries) {
        for (var index = 0; index < fileEntries.length; index++) {
            arr.unshift(fileEntries[index].name) ;
        }
    }
    function fail(error) {
        console.log("error: " + error.code);
    }

```

上記コードを使って以下のようなファイル名一覧を取得できましたが、「フォルダA」内に置いてあるファイル名一覧を取得できればと思います。

```ここに言語を入力
cdv_001.jpg
cdv_002.jpg
cdv_003.jpg
フォルダA
```

よろしくお願いいたします。

PERSISTENTに置いたサブディレクトリ内にあるファイル一覧を取得したい

みなさんこんにちは
現在エクセルのVBAを使用してツールを作成しています。
このツールですが、自動実行します。

問題なのですが、windowsupdateで再起動する時にエクセルファイルが保存されないので、自動実行中にセル入力した内容が消えてしまいます。

解決案の１つとしてはwindowsupdateの自動をoffにすればいいと思います。

それ以外の解決としては再起動時にエクセルファイルを保存する方法がないか調査をしています。

シャットダウンや再起動したら、
イベント「Workbook_BeforeClose」が呼び出すのかと考え、このイベント内で保存処理を実装しましたが、呼ばれないようで保存ができませんでした。

シャットダウン・再起動時にエクセルファイルを自動保存する方法があれば教えてください。
よろしくお願いいたします。

PCがシャットダウン/再起動する時にエクセルファイルを自動保存できるか

最近、マトモなWebページを作る必要が出てきて、それにともなって知識程度のHTMLをもう少しマトモに使えるようにしようと思い、勉強中なのですが、main、aside、articleタグについて少々疑問に思うことがあります。

mainタグやasideタグ、articleタグについてググるとそれぞれ、記事内のメインコンテンツを括る、サイドバーを括る、記事本文を括るということがわかりました。
その一方で、以下のようなデザインのためのdivと記事のアノテーション的役割を果たすmain、aside、articleタグを用いている例をよく見かけます。（私的な範囲で幾つかのWebページを見てどういう風に使っているのか実際に確認した程度ですが…）
```HTML
<!DOCTYPE html>

<body>
  
  <div>
    <div class="header">
      <header>
        
      </header>
    </div>
    <div class="wrapper">
      <div class="main-contents">
        <main>
          <article>
            
          </article>
        </main>
      </div>
      <div class="sidebar">
        <aside>
          
        </aside>
      </div>
    </div>
    <div class="footer">
      <footer>
        
      </footer>
    </div>
  </div>
</body>
```

このソースの場合そもそもheaderやmainタグを括るデザインのためのdivは不要なのではないでしょうか？
css側でheaderやmain、asideに対して直接padding等を設定すれば十分じゃないのでしょうか？
この点についてどうしてdivで括っているのかご教示いただけないでしょうか？

main,aside,header,articleタグの使い方について

###前提・実現したいこと
AWSで料金を節約しようとCost Reportsを見ていました
EC2-Otherという項目の料金が意外と高いので削減しようと思いましたが
どのサービスの利用で料金が発生しているのかわかりません。
EC2-Otherに含まれる可能性のあるサービスを教えてください。
###試したこと
未使用なElasticIPが対象のようです
それだけでは金額があわないので他のサービスもお願いします

###補足情報(言語/FW/ツール等のバージョンなど)
現在、月5ドル程度かかっています

EC2-Otherに含まれるのはどんなサービスの料金？

## 現状
AWSでインスタンスを新しく作成し、同時にpemキーも作成しました。（インスタンス1, pem1）
また、2つ目のインスタンスを作成して、pemキーは先程のキーを選択しました。（インスタンス2, pem1）
更にもう一つインスタンスを作成して、pemキーは新たに作成しました。（インスタンス3, pem2）

pemキーはどちらもchomod 600で権限を変更しております。

全てのインスタンスのセキュリティグループは同じ設定を利用しており、port22は開けております。

## 問題
上記の設定状況で、それぞれ設定したpemキーを用いてインスタンスにSSH接続を試みました。
```
ssh -i /xxx.pem ec2-user@publicIP
```

すると、下記のような結果となりました。
- インスタンス1はつながらない
- インスタンス2はつながらない
- **インスタンス3はつながる**

インスタンス1とインスタンス2につながらない時のエラーは以下のとおりです。
```
ssh: connect to host 00.00.00.00 port 22: Operation timed out
```

## 確認してみたところ
- publicIPを確認してみましたが、間違ってはいませんでした。
- 設定したpemと接続時に利用したpemを確認しましたが、間違っていませんでした。
- ~/.ssh/known_hostsを確認してみると、つながらないインスタンスへの設定は保存されておりませんでした。

対応策がおわかりの方はご教授頂けますと幸いです。
よろしくお願いいたします。

AWSのインスタンスにSSH接続できなくなった

### [√] transformさせた要素の挙動がおかしい

検証URL: [こちら](https://thimbleprojects.org/-lanwks-/295951)
ボタンを押すと要素が回転するデモです．
- L(左側面を前面に)
- C(初期面を前面に)
- R(右側面を前面に)
![image](c37c4a6fe347d00fe5f0730e0da0b0d4.png)
(スクショは正常に動いているWindows版Chromeより)

---
**[√] 発生している問題（概観）**
- Windows版Firefoxで，要素の前後がおかしい
- Android版Firefoxで，overflow:auto;やoverflow:scroll;が効いていないのかスクロール不可
- Windows版・Android版Firefoxと，縦幅と横幅を指定した要素(本件では.sec-wrp)の大きさが，指定どおりにならない
- iOSのSafari,Firefox,Chromeで，```transform-origin: center center -50vmin```,もしくは```transform:rotateY();```が正常に動作しない

---
**[√] 確認環境**
- **Windows10 (64 bit)**
 Chrome 58.0.3029.110 (64-bit)
 Firefox 54.0 (32 bit)
(無料アップデート期間中，Windows8 -> Windows10へ)
- **Android 4.4.4 (Kitkat)**
 Firefox 54.0
 Chrome 58.0.3029.83
- **iOS 10.3.2**(iPad)
 Safari 10.0 , Firefox 7.5
 Chrome 59.0.3071.102


**解決法について情報提供を求めています．**
**バグである場合は，ブラウザディヴェロッパーへも連絡していただけるとうれしいです．**

---
**[√] スクショ**

---
**windows**
- 前後がおかしくなる
![前後が変](8c32899fc2907b60e3c1fbf853cb1357.png)
- 枠のサイズ設定が効いていない
![青枠が変](bb3b7927aa978f8d05aeb3cc49dbe9f6.png)
- Androidも同様，さらにスクロールもできない
![こっちも変](2854c11702d535693c722e454a8ceefa.png)

---
**iOS**(友人提供)
- Safari
![safari](df73b88cdbd22e3873ea74437084e57d.png)
- Firefox
![firefox](0097d4ae43d26c1747f317b0263d72df.png)
- Chrome
![chrome](d1a00a999319874c62dc6577fd6d7527.png)

---
**おまけ**
- Edge
![edge](25b3de4003d538bf3eaabe6a2cb87b2e.png)
- Internet Explorer
![ie](06befb5d4c744b2c42e4f955e4813a12.png)

transformさせた要素の挙動がおかしい

```
[["a",10],
["b",20],
["c",30],
["a",40],
["a",50]]
```

このような配列の
1つめの要素が一致する場合
2つめの要素の数値を合算した配列を作りたいのです。
（この場合はaの数値をまとめたい）

▼期待する形
```
[["a",100],
["b",20],
["c",30]]
```

こういった場合、みなさんがどのように実装しているのか
ご教授いただければ幸いです。

よろしくお願いします。

二次元配列内の数値を加算してまとめたい

###■やりたいこと
テーブルのheadとbodyの幅を調整したいです。
ただし！スクロールさせるためにdisplay:block;をかけた状態で、です。

###■大事件
ラジオボタン選択でテーブルをスクロール表示に切り替える機能があります。
ところが！こちらのリンク先をご覧ください。
[https://jsfiddle.net/6rt01wo5/](https://jsfiddle.net/6rt01wo5/)

そうなんです！
スクロールさせるためにはdisplay:block;をかけなければならず、しかしそうすると、なんと、headとbodyのwidthがそろってくれない事件が、大事件が発生するのです！（chromeは平気でIE&firefoxの場合にです。）


display:block;さえなければwidthはきちんと揃うのですが。それだとスクロールができない。。

いちおう上記リンク先のコードはこちらです。
```HTML
<div class="radiogaga">
<label><input type="radio" onclick="funcOne()" id="radio1" checked>ちょっと</label>
<label><input type="radio" onclick="funcAll()" id="radio2">もっと</label>
</div>

<table id="Table" class="tablesorter">
<thead>
<tr>
 <th class="tabemono_th">食べ物</th>
 <th class="nomimono_th">飲み物</th>
 <th class="hututuka_th">不束者</th> 
</tr>
</thead>

<tbody id="Body">
 <tr class="boxes">
   <td class="tabemono">りんごとばななのハーモニー</td>
   <td class="nomimono">ワイン</td>
   <td class="hututuka">はなこ</td>
 </tr>
 <tr class="boxes">
   <td class="tabemono">りんごとばななのハーモニー</td>
   <td class="nomimono">ワイン</td>
   <td class="hututuka">はなこ</td>
 </tr>
 <tr class="boxes">
   <td class="tabemono">りんごとばななのハーモニー</td>
   <td class="nomimono">ワイン</td>
   <td class="hututuka">はなこ</td>
 </tr>
 <tr class="boxes">
   <td class="tabemono">りんごとばななのハーモニー</td>
   <td class="nomimono">ワイン</td>
   <td class="hututuka">はなこ</td>
 </tr>
</tbody>
</table>
```

```CSS
table {
    width: 100%;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
}

th {
  border: 1px solid #888;
  background: #ff6565;
}
td {
  border: 1px solid #888;
}

thead th:nth-child(1),
tbody td:nth-child(1) {
  width: 70%;
}
thead th:nth-child(2),
tbody td:nth-child(2) {
  width: 15%;
}
thead th:nth-child(3),
tbody td:nth-child(3)  {
  width: 15%;
}
```
```javascript
<script>
function funcOne() {
    document.getElementById( "Body" ).style.height = '30px';
}
function funcAll() {
    document.getElementById( "Body" ).style.height = '100px';
}
</script>
```

###■ダメなこと
％指定でなくpx指定ならばheadもbodyも揃います。けれど、それだと画面の解像度によってズレが生じてしまうので、やっぱり％指定でなければダメなのです(>_<)

###■不思議なこと
関係あるかわかりませんが、幅の指定部分を上記のようなnth-childでなく、下記のようなclass名にすると、headの中身が1行に収まったりします。
```CSS
.tabemono, .tabemono_th {
  width: 70%;

.nomimono, .nomimono_th {
  width: 15%;
}
.hututuka, .hututuka_th {
  width: 15%;
}
```
この書き方↑だとこんな感じ↓で、「不束者」の部分が１行に収まるんです。[https://jsfiddle.net/6rt01wo5/2/](https://jsfiddle.net/6rt01wo5/2/)
なんででしょう？まぁこれは質問内容とは関係ありませんでしょうか。

大事件です！テーブルにblockをかけると列の幅がそろいません！（firefox）

###前提・実現したいこと
現在、CSSでスライダーを実現させようとしていますが、うまくいっておりません。
画像13枚を使用したスライダーを表示させようと考えており、下記のCSSの設定しました。
1周目はうまくいくのですが、
・1週目の最後に数秒止まる
・2週目の最初の2枚が飛ばされ、3枚目からスタートする
このような現象が起こっております。
アドバイス、よろしくお願いいたします。

###コード（CSS）
```ここに言語を入力
.slider{
position:relative;
overflow:hidden;
background-color:#000;
}
.slider span img {
z-index:1;
width:100%;
}
.slider span img:nth-of-type(n+2){
z-index:10;
opacity:0;
position:absolute;
top:0;
left:0;
-webkit-animation:overwrap 26s ease infinite;
-moz-animation:overwrap 26s ease infinite;
animation:overwrap 26s ease infinite;
}
.slider span img:nth-of-type(1) {
}
.slider span img:nth-of-type(2) {
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
animation-delay:2s;
}
.slider span img:nth-of-type(3) {
-webkit-animation-delay:4s;
-moz-animation-delay:4s;
animation-delay:4s;
}
.slider span img:nth-of-type(4) {
-webkit-animation-delay:6s;
-moz-animation-delay:6s;
animation-delay:6s;
}
.slider span img:nth-of-type(5) {
-webkit-animation-delay:8s;
-moz-animation-delay:8s;
animation-delay:8s;
}
.slider span img:nth-of-type(6) {
-webkit-animation-delay:10s;
-moz-animation-delay:10s;
animation-delay:10s;
}
.slider span img:nth-of-type(7) {
-webkit-animation-delay:12s;
-moz-animation-delay12s;
animation-delay:12s;
}
.slider span img:nth-of-type(8) {
-webkit-animation-delay:14s;
-moz-animation-delay:14s;
animation-delay:14s;
}
.slider span img:nth-of-type(9) {
-webkit-animation-delay:16s;
-moz-animation-delay:16s;
animation-delay:16s;
}
.slider span img:nth-of-type(10) {
-webkit-animation-delay:18s;
-moz-animation-delay:18s;
animation-delay:18s;
}
.slider span img:nth-of-type(11) {
-webkit-animation-delay:20s;
-moz-animation-delay:20s;
animation-delay:20s;
}
.slider span img:nth-of-type(12) {
-webkit-animation-delay:22s;
-moz-animation-delay:22s;
animation-delay:22s;
}
.slider span img:nth-of-type(13) {
-webkit-animation-delay:24s;
-moz-animation-delay:24s;
animation-delay:24s;
}

@-webkit-keyframes overwrap {
    0%  {opacity:0;}
    5%,100% {opacity:1;}
	
}
@-moz-keyframes overwrap {
    0%  {opacity:0;}
    5%,100% {opacity:1;}
	
}
@keyframes overwrap {
    0%  {opacity:0;}
    5%,25% {opacity:1;}
	29%,100%{opacity:000;}
}
```

###コード（HTML）
```ここに言語を入力
<div class="slider">
<span>
	<img src="slide01.jpg" alt="">
	<img src="slide02.jpg" alt="">
	<img src="slide03.jpg" alt="">
	<img src="slide04.jpg" alt="">
	<img src="slide05.jpg" alt="">
	<img src="slide06.jpg" alt="">
	<img src="slide07.jpg" alt="">
	<img src="slide08.jpg" alt="">
	<img src="slide09.jpg" alt="">
	<img src="slide10.jpg" alt="">
	<img src="slide11.jpg" alt="">
	<img src="slide12.jpg" alt="">
	<img src="slide13.jpg" alt="">
</span>
</div>
```

CSSを使用したスライダーの実現で躓いています

配列の中に、
複数の番号を格納しているとき、
それをまとめて表示する「綺麗なロジック」を
教えていただけないでしょうか?

```ruby

data=["1","2","3","5","7","8","9","10","11","12","15","16"]

```
このようなデータがある時に
```ruby
1～3,5,7～12,15,16
```
という
「人が見てきれいな」出力を作りたいのですが、
「綺麗なロジック」が思いつきません。

熟練の方、
短く、早く、美しいロジックを
ご教授願えないでしょうか?

私がrubyやVBAを使っているのでサンプルはrubyですが、
rubyやVBAが第一希望ですが、他の言語でもOKです。
ですがが、
「言語特有の（モジュール等を使った）ロジック」でない方がありがたいです。

複数の数字入った配列を「人向けに」きれいにまとめて表示をさせる「きれいなロジック」を教えていただけませんか?

Access2010で作成したデータベースのテーブルをインポートすることが出来ないようにする方法を教えてください。

DB1.accdb にテーブルを作りデータを入力し、アプリを作成した後、第三者に渡す場合にテーブルの内容を見られないようにしたいです。
パスワード設定やShiftキーを使用できない方法はわかりますが、DB2.accdbを作成してDB1.accdbからテーブルインポート操作を行うと、無条件でデータを抜き取られてしまいます。
このようなインポートを防ぐ方法がありましたらお教え下さい。
よろしくお願い致します。

![イメージ説明](188c5484015b2afb85732525ce25221a.jpeg)

![イメ![イメージ説明](f0daabc0aa5b3ddb315a85c3ff54927d.jpeg)74ef820eb981eb1ef847ab5daa496839.jpeg)

![イメージ説明](14288a071e59ad176e1f92e9c7ca3170.jpeg)

Access2010 インポートさせない方法を教えてください

アプリ開発である部屋にいる人だけにしかログイン出来ないようなログインシステムを開発中です。

そこである部屋でしかログイン出来ないようにするためにはというところで悩んでいます。

考えてるのはBluetoothかGPSを使おうと思っています。

他にアイディアある方御教授お願

ログインシステムのアイディア

AWSのACMで発行したSSL証明書をELBに適応し、
ブラウザからELBに接続したところhttp通信はできるのですがhttps通信ができません。

httpsで接続したときは、
ブラウザ上にNET::ERR_CERT_COMMON_NAME_INVALIDなどのエラー表示が起きます。
セキュリティーグループもhttpとhttpsで設定しています。

なにか原因として考えられることがありましたら、教えてください。

ACMで発行したSSL証明書をELBに適応したがhttps通信ができません。

お世話になっております。

cssでの実装についてお伺いいたします。

```
 ___________________
｜      /            |
｜     /             |
｜    /              |
｜   /               |
｜  /                |
｜ /                 |
｜                   |
 ___________________

```
とCSSで実装しようとしております。

beforeで実装すれば良いのは理解出来るのですが
色は 左がd2e 右がe6f

```html
<div class="news_deco61">
hogehoge
</div>
```

```css
.news_deco61 {
	line-height:1.5em; 
 	text-align:center;
	background-color:#e6f;
}

.news_deco61:before {
  content: "";
  display: block;
  height: 100%;
  background: #d2e;
  transform: skew(0,170deg) translate(0,20%);
}
```
で出来そうだと思っているのですが
beforeで何も変化がありません。

グーグルさんで調査してみたのですが
見つけれる事が出来なかったためお伺いいたします。

上記斜めの境界をcssで実装するにはどのようにコーディングすればよろしいのでしょうか？

お忙しいところ大変申し訳ないのですが
上記お問い合わせいたします。