常連

注目の的

回答者

ベストアンサー

拍手喝采

鑑定士

自己紹介

以下のようにスプレッドシートを作成後、共有リンクを発行し、それをJavaScriptからAPIを叩いて中身を取得したいと持っています。


![イメージ説明](564b8c11fc8a50a1227aba5312c7d5d6.jpeg)

今回叩こうと思っているAPIは以下のAPIです。
```
https://spreadsheets.google.com/feeds/list/[sheet_id]/[tab_id]/public/basic?alt=json
```

しかし、共有リンクからsheet_idを取得してAPIを叩いても404が返ってきてしまいます。

また、ファイル→ウェブに公開後、同じAPIを叩くと取得できます。
![イメージ説明](a9e2ddc44ad8709b5e7e0d89920cd18f.jpeg)

こちら、共有リンクを発行しただけでは上記APIを使用することは出来ないのでしょうか。

作成しようとしているアプリケーションとしては以下のことが想定されます
```
1. 共有リンクは様々なユーザーから送られてくる
2. ウエブに公開することは出来ない
3. こちらでは共有リンクを入力するフォームからsheet_idを抜き出し、APIへアクセス
4. 返ってきたデータからアプリケーションを実行
```

と言った感じです。

共有リンクからどうにかして中身を取得するAPIはないのでしょうか。
よろしくお願いいたします！

Google SpreadSheetの共有リンクから中身を取得する

### [√] cssでアニメーションさせた要素に残像が残る

![残像が残っている様子](0d0bb24be2f4009b0367fe6515a3655c.gif)

こういう状態です．
この残像はどうしたら消せるでしょうか？

---
**ソースコード**
```html
<!DOCTYPE html>

<html lang="ja">

	<head>
		<meta charset="utf-8">
		<meta name="author" content="lan.works">
		<meta name="description" content="today's ERROR //20170601_01">
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" >
		<style>

			/*cmn*/

			*,
			*::before,
			*::after{
				font-weight: normal;
				line-height: 1em;
				padding:0;
				margin: 0;
				box-sizing: border-box;
				-webkit-tap-highlight-color:rgba(0,0,0,0);
				-webkit-user-select: none;
			}

			a,
			a:link,
			a:visited{
				text-decoration: none;
			}

			li{list-style: none;}

			img{
				max-width: 100%;
				pointer-events: none;
			}
			
			html,body{
				max-width: 100vw;
				max-height: 100vh;
			}
			html{
				font: normal 17px / 17px 'Roboto', sans-serif;
				-webkit-text-size-adjust: 100%;
			}
			
			#page_section1{
				left: auto;
				width: auto;
				margin: 0 1rem;
				padding-top:50vh;
			}
			
			
			#menubtn-switch-btn{
				position: fixed;
				bottom: 9rem;
				left: 1rem;
				width: 4rem;
				height: 4rem;
				background: rgba(255,255,255,.9);
				border: 1px solid #ccc;
			}
			#menubtn-switch-btn::before{/*bgr-shadow*/
				content: "";
				display: block;
				position: absolute;
				top: 48.75%;
				left: 25%;
				width: 50%;
				height: 2.5%;
				background: #fff;
				border-radius: 3px;
				box-shadow:
					0 0 0 1px #777,
					0 -0.7rem #777,
					0 -0.7rem 0 1px #777,
					0 0.7rem #777,
					0 0.7rem 0 1px #777;
				transition: transform .5s, box-shadow .3s .5s;
			}
			#menubtn-switch-btn::after{
				content: "";
				display: block;
				position: absolute;
				top: 48.75%;
				left: 25%;
				width: 50%;
				height: 2.5%;
				background: #fff;
				border-radius: 3px;
				box-shadow:
					0 0 0 1px #777,
					0 -0.7rem #fff,
					0 -0.7rem 0 1px #777,
					0 0.7rem #fff,
					0 0.7rem 0 1px #777;
				transition: transform .5s, box-shadow .3s .5s;
			}
			#menubtn-switch:checked +#menubtn-switch-btn::before{
				transform: rotate(-495deg);
				box-shadow:
					0 0 0 1px #777,
					0 -2px #fff,
					0 -2px 0 1px #555,
					0 2px #fff,
					0 2px 0 1px #555;
				border-radius: 0;
			}
			#menubtn-switch:checked +#menubtn-switch-btn::after{
				transform: rotate(495deg);
				box-shadow:
					0 0 0 1px #777,
					0 -2px #fff,
					0 -2px 0 1px #555,
					0 2px #fff,
					0 2px 0 1px #555;
				border-radius: 0;
			}
		</style>
		
		<title>today's ERROR //20170601_01</title>
	</head>
	
	<body>
		
		<section id="page_section1">
			<input id="menubtn-switch" type="checkbox">
			<label id="menubtn-switch-btn" for="menubtn-switch"></label>
			<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
		</section>
		
	</body>

</html>
```

cssでアニメーションさせた要素に残像が残る

お世話になります。

var a = [5, 10];
alert(a.length); // → 2が表示される

当たり前のようにある、JSコードですが、ちょっと謎です。

参考サイトにもlengthプロパティの動作として配列の個数を返すと記載がありますが、そもそも
なんのオブジェクトのプロパティなのでしょうか？

参考サイト
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20366841/
 
A.Bのドット記法でAオブジェクトの添字Bにアクセスすると基礎を理解しているのですが、その上でこの記法が理解出来ないのですが、どなたかご教示願えますでしょうか？
宜しくお願い申し上げます。

javascriptのlengthプロパティにつきまして

border-radiusを使用して、プロフィール画像を円形にしたいのですが、添付写真の様に、楕円形になってしまいます。コードの誤りをご指摘頂けますと助かります。

![イメージ説明](3e9a7fca5097e4b422cda6b5017c1f9b.png)

```css
.icon{
  max-width: 5rem;
  max-height: 5rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
```
```html
<div class="icon-container">
      <%= user_icon_tag @user, :alt => "avatar", :class => "icon" %>
    </div>
```

CSS : border-radiusで完全な円形にならない（楕円形になってしまう）

![イメージ説明](ab16c25c21deb4d13eeef45e2a7b0ac9.gif)
tr:nth-childを使ってシマシマを実装したいですが
よろしくお願いいたします。

```ここに言語を入力
<table width="200" border="1">
  <tr>
    <th colspan="2">&nbsp;</th>
  </tr>
  <tr>
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
    <tr style="background:#ccc">
    <td rowspan="3">#ccc</td>
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
    <tr>
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr style="background:#ccc">
    <td rowspan="3">#ccc</td>
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
</table>
```
テーブルソース追加しました。
複数のtrが1行となるので
odd evenだけでは実装できませんが。