常連

注目の的

社会貢献

質問力

現在、Reactを使ってページを作っています。そのページ内ではAPIを叩いて、データを取得した後、その中の特定の1つを表示させようとしています。

今、こんな感じでDBの情報を this.state.users に入れています。

```JavaScript
constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }

  //初期化（画面レンダリング前)
  componentWillMount(){
    this.fetchResponse();
  }

  //リストの更新
  fetchResponse() {
    fetch('')
    .then ((res) => res.json() )
    .then ((res) => {
      this.setState({
        users: res,
      });
      // console.log(res);
    })
  }

```

その後、下記render()内でこのようにアクセスをしています。 ２行目の console.log(this.state.users[99]);
では　しっかりとすべての情報が表示されます。（プロパティ[“birthday”]もusers連想配列のkeyとして表示されます。）

しかしながら、３行目の　console.log(this.state.users[99].birthday);
を動かすと、 cannot read property ‘birthday’ of undefined　とエラーが出ます。

なぜかわかりますか？

```JavaScript
render() {
    console.log(this.state.users[99]);
    // console.log(this.state.users[99].birthday);
```

this.stateのプロパティが取得できない (React) - 再投稿

現在 ReactNative を使って、アプリを作っています。

オブジェクトの配列にあるユーザー情報を map()を用いて描画しています。

<スクリーン>
```javascript
//初期化
constructor(props) {
    super(props);
    this.state = ({
      userList: [
        { id: 1, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Momoka', followStatus: true },
        { id: 2, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Tinatsu', followStatus: false },
        { id: 3, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Nakagawa', followStatus: true },
        { id: 4, iconUri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg", userName: 'Haruna', followStatus: true },
      ],
    });
    this.handleFollowChange = this.handleFollowChange.bind(this);
}

// フォローボタン機能
handleFollowChange(key) {
    tmpUserList = this.state.userList;
    tmpUserList[key].followStatus = !(tmpUserList[key].followStatus);
    this.setState({ userList: tmpUserList });
};

//レンダリング
render () {
{this.state.userList.map((item, key) => {
          if (item.followStatus) {
            buttonColor = '#0088FF';
            buttonText = 'フォロー';
          } else {
            buttonColor = '#2244AA';
            buttonText = '解除';
          }
          console.log(item.followStatus);
          return (
            <View key={item.id}>
              <UserContainer
                userName={item.userName}
                userIcon={item.iconUri}
                associated={"follow"}
                handleFollowChange={() => this.handleFollowChange(key)}
                buttonColor={buttonColor}
                buttonText={buttonText}
              />
            </View>
          );
        })}
}
```

<UserContainerコンポーネント>
```javascript
constructor(props) {
    super(props);
    this.state = {
      userName: this.props.userName,
      userIcon: this.props.userIcon,
      associated: this.props.associated,
      buttonColor: this.props.buttonColor,
      buttonText: this.props.buttonText,
      handleFollowChange: this.props.handleFollowChange,
    };
}
render() {
    // console.log(this.state.userName)
    return (
      <View>
        <TouchableOpacity
          style={[UserContainerStyle.userContainer, { borderWidth: 1, borderColor: '#888', }]}
          onPress={() => Actions.profile()}
        >
          <Avatar
            containerStyle={UserContainerStyle.userAvatar}
            size={40}
            rounded
            source={{ uri: this.state.userIcon }}
            activeOpacity={0.7}
          />
          <Text style={UserContainerStyle.UserName}>{this.state.userName}</Text>
          {(() => {
            /* フォローボタンが必要なユーザーコンテナ */
            if (this.state.associated === "follow") {
              console.log(this.state);
              return (
                <View>
                  <Button
                    title={this.state.buttonText}
                    onPress={this.state.handleFollowChange}
                    containerViewStyle={UserContainerStyle.FollowButton}
                    buttonStyle={{ backgroundColor: this.state.buttonColor }}
                  />
                </View>
              );
            } else {
              return (
                <View>
                </View>
              );
            }
          })()}
        </TouchableOpacity>
      </View>
    );
  }
```

UserContainerにある、フォローボタンを押した際に、　「テキスト」と「カラー」が変わることを想定して書いております。（イメージはツイッターのフォローボタン）

しかしながら、仮想DOMの特性上、UserContainer自体は外から見て、変わっているようには見えないので、ボタンの　「テキスト」と「カラー」が変化してくれません。

どうしたら、変える事ができるのでしょうか？　皆様のお知恵をお借りしたいです。

React 仮想DOMにおける配列の再レンダリング

Ruby on rails初心者です。 Rails 5.0.1


伝票画面など親子関係のあるモデルを扱う際は、
hasManyやbelongs_to等の「アソシエーション」と、
「accepts_nested_attributes_for」の記述が１セットで必要と勘違いしておりました。

その後、少しずつ頭が整理でき、モデルのCRUDだけならば「アソシエーション」だけで実現できると知りました。
[accepts_nested_attributes_forを使わずに、もっと素直にできることがわかった。](http://d.hatena.ne.jp/donghai821/20120121/1327140834)


では、nested_attributesは
何のために存在しているのでしょうか？

また分からなくなってきました。

Viewで、子(行)の操作を簡単に実現するためでしょうか？
であれば
nested_attribute_forを使わず、子の操作部分を実現したい場合、
どのようにするのが一般的なのでしょうか？

ネットや書籍を探しても見つけることが出来ませんでした。
※アソシエーションや、nested_attribute_forの使い方ばかりです

地道に記述していくのでしょうか？

下記の理由から、nested_attribute_forは、使わず親子モデルの操作（明細行の編集など含む）を実現したいと考えております。
[【Ruby on Rails】accepts_nested_attributes_forで親の任意のデータを子にセットしたい](https://teratail.com/questions/69029)


見当違いなことを質問してたら大変恐縮ですが、どうぞ宜しくお願い致します。


【2017/03/23 追記】
teratail内にずばり同じ内容がありました。
[親要素のフィールドから受け取った値を子レコードに反映させたい](https://teratail.com/questions/46133)

上記で回答者の方が「accepts_nested_attributes_for 」について語っておられました。
要は
「便利だが、自由度が低くなりがちで型にはまったシーンでしか利用できません。」
ということでした。

しかしまだ具体的なイメージが付きません。

なので
accepts_nested_attributes_for 
を使うパターンと、使わないパターンの両方で
簡単なシステムを作ることにしました。

理解、整理出来ましたら追記致します。

宜しくお願い致します。

【Ruby on Rails】nested_attributes_forを使うメリットと、使わず実現する場合

###前提・実現したいこと

rails チュートリアル四版で rails test を入力したら発生しました。

MacOS Sierra  rails 5.0.0.1です。

###発生している問題・エラーメッセージ
```rails5.0.0.1
Warning: Running `gem pristine --all` to regenerate your installed gemspecs (and deleting then reinstalling your bundle if you use bundle --path) will improve the startup performance of Spring.
Running via Spring preloader in process 20383
/Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/activerecord-5.0.0.1/lib/active_record/connection_adapters/sqlite3_adapter.rb:27: [BUG] Segmentation fault at 0x00000000000110
ruby 2.2.2p95 (2015-04-13 revision 50295) [x86_64-darwin16]

-- Crash Report log information --------------------------------------------
   See Crash Report log file under the one of following:
     * ~/Library/Logs/CrashReporter
     * /Library/Logs/CrashReporter
     * ~/Library/Logs/DiagnosticReports
     * /Library/Logs/DiagnosticReports
   for more details.

-- Control frame information -----------------------------------------------
c:0072 p:---- s:0284 e:000283 CFUNC  :initialize
c:0071 p:---- s:0282 e:000281 CFUNC  :new
c:0070 p:0167 s:0277 e:000276 METHOD /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/activerecord-5.0.0.1/lib/active_record/connection_adapter
c:0069 p:0023 s:0270 e:000269 METHOD /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/activerecord-5.0.0.1/lib/active_record/connection_adapter
c:0068 p:0025 s:0267 e:000266 METHOD /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/activerecord-5.0.0.1/lib/active_record/connection_adapter
c:0067 p:0022 s:0264 e:000263 METHOD 



長すぎて省略します


 1684 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/minitest-5.10.1/lib/minitest/pride_plugin.rb
 1685 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/test_unit/minitest_plugin.rb
 1686 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/activesupport-5.0.0.1/lib/active_support/testing/stream.rb
 1687 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/generators/testing/behaviour.rb
 1688 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/generators/testing/setup_and_teardown.rb
 1689 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/generators/testing/assertions.rb
 1690 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/thor-0.19.4/lib/thor/shell/basic.rb
 1691 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/generators/test_case.rb
 1692 /Users/masashihiraishi/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/activesupport-5.0.0.1/lib/active_support/testing/autorun.rb

[NOTE]
You may have encountered a bug in the Ruby interpreter or extension libraries.
Bug reports are welcome.
Don't forget to include the above Crash Report log file.
For details: http://www.ruby-lang.org/bugreport.html





```



環境でミスっているのかもわかりませんが、自分ではよくわかりません。
お力を貸していただければ幸いです。


＞自己解決しました。 
＞[http://scior.hatenablog.com/entry/2017/01/31/034750](http://scior.hatenablog.com/entry/2017/01/31/034750)

＞こちらに乗っている通りにsqlite3を1.3.12に設定すると正常に動作しました。 
＞やり方は上記を参照してください！

＞＜追記＞ 
＞この後、何回かできていたのですがまたほぼ同じエラーが出て来ました。sqlite3を1.3.13にあげれば治りました。

＜追記１＞
再発しました。
治っていません、ruby2.2.2との相性がsqlite3が悪いという記事を見たためruby2.3.3にバージョンアップすると一瞬治りましたが、再び再発しました。

Ruby  railsチュートリアルでのrails testコマンド

サーバの選定方法といいますかどの程度のサーバを用意したらいいのか分からず悩んでおります。
ruby on railsで広告の管理を行う様なシステムになります。

簡単なシステム概要としては
AIUEO.com/1122334455
↑にアクセスすると

DBから1122334455の情報を検索して、登録されているリダイレクトURLを返す様な感じです。
リダイレクトする時に?pid=xxxxx&uid=yyyyyyyy&adid=zzzzzz 等のパラメータを付けてクリック数やUU数や成果等を管理するといった感じです。
アクセスはログを取って後でDB集計を考えています。
ユニークユーザはDBで登録させてUUIDなどを発行してリダイレクト時に付けて送ります。


現在2万-3万ユニークユーザ/日の広告からのアクセスがあるそうです。(UUなのでクリック数(アクセス)はそれの2-3倍程度はあるのかなーと。)
広告の配信を活発な時は10-15万/日程のUUアクセスがあるとの事。
※もちろんこれらは一日を通じて数値ですので時間帯により変わったくるので余裕をもったサーバを用意したいと考えています。

システムはサイトを表示(管理画面を除く)させる事は無くアクセスに応じてDBからそれに応じたデータを返してリダイレクトさせます。

どのサーバを利用していいのか分からないので現在はconohaにしようかなーと考えています。
5000-8000円/月程のを運用してみて負荷といいますか遅い様でしたら増やして行ければいいのかなーと考えていますが。。。
CPU：6コア	メモリ：8GB	SSD：50GB	転送量：無制限	6,670円/月
(9.3円/時)
CPU：8コア	メモリ：16GB SSD：50GB	転送量：無制限	13,010円/月
(18.1円/時)
本当はアマゾンサーバの様にさらに自由度の高いもの利用した方がいいのかなーと考えるのですが、利用した事がないのでよく分かっていないのが正直なところでして。

こんなサーバを利用した方がいいよーや、こんな計算方法で計算するとサーバをどれにしていいのか分かる様になるよなどあればご指摘頂けると幸いです。


やりたいことだけを書いた様な感じになってしまており大変申し訳御座いませんが宜しくお願いします。
サーバのスペックなどに詳しくないので、どこをポイントに伝えれば良いのか分からすでして。。。ご指摘頂ければ幸いです。

サーバの選定について ruby on railsでシステム構築

YoutubeAPIを利用し、アプリを運営しております。
今回はYoutubeのコンテンツによってはアプリ内では利用できないものがあり困っております。。

例えばVEVOコンテンツです。
![イメージ説明](ec3c6f04f1d8620c71f9688d667578f5.png)
このようにVEVOのコンテンツを含んでいるためWebのYoutubeで見ろとでてきます。
しかし数多くの公式アプリではVEVOのコンテンツを含んだ動画を視聴出来ます。
例えば洋楽歌詞ウィキアプリGeniusです。
![イメージ説明](11fffbdd1f52b827be684c469cae637b.jpeg)
このように左下の方にVEVOコンテンツの動画が再生されます。

どうしたらVEVOコンテンツなどを再生することができるのでしょうか？

是非お力添えしていただければと思っております！

ちなみにGeniusは音楽関係組織NMPAとは歌詞を利用する許諾は取っていますがYoutubeを使い音楽を流すことは特に許諾は取ってないです。

YoutubeAPIについて

[このサイト](http://tapestry.andaztokyo.jp/ja.html)にどのような技術が使われているか教えていただきたいです。

質問が大雑把ですみません…

このようなサイトを作れるようになるべく、いまはthree.jsの勉強をしているのですが、方向性が間違っていないか、また他にどのような勉強が必要かを知りたいです。

よろしくお願いします。

サイト制作のための技術

1bのアクセス1000000回と、1kbのアクセス1000回と、1mbのアクセス一回では、転送容量は同じでも、リクエスト回数が多いほうが、サーバーに負担がかかると思います。

レンタルサーバーでは、よく転送容量の上限が設けてありますが、リクエスト回数の上限も、また別にあるような気がします。

一般的な、ApacheやLinuxのサーバーでは、リクエスト回数の上限は、どのように決まっているのでしょうか？

メモリやCPUなどから、何かしら推測できないでしょうか？


自分で借りた共有サーバーで実験をしていて、PHPでヘッダリクエストだけしか送っていなくて、転送容量は少ないと思われるのに、サーバーの障害が起こったので、質問させて頂きます。

よろしくお願いします。


HTTPのページのヘッダ情報だけ取得する curl/wgetコマンド - それマグで！
http://takuya-1st.hatenablog.jp/entry/20110202/1296635084

PHP curl レスポンスヘッダとレスポンスボディの分割
http://kaworu.jpn.org/kaworu/2012-12-31-1.php

サーバーのリクエスト数の限界について

いつもお世話になっております。

とあるwebシステムの開発で、実装方法の方針がわからずに手が止まってしまい、質問させていただきます。

■概要
webシステム(LAMP環境)でプログラムを行っているのですが、会員登録したユーザの本人確認を、電話による形で実装したいと思っています。

■やりたいこと
ある画面に遷移すると、ブラウザ上に電話番号が表示され、
手元の電話(スマホ等)からその番号に電話をかけると「認証されました」という音声が流れて、認証が完了する仕組みです。

■備考
電話番号はあらかじめ、画面上からデータベースに登録しておき、認証用の番号として使用する流れです。

■質問事項
有識者さまに質問させていただきますが、
このような機能(やりたいこと)を実現する場合、どのような技術や、サービス、業者、が必要となるでしょうか？

お忙しい所恐れ入りますが、ご教示いただければ幸いです。
どうぞよろしくお願い致します。

電話による本人確認の実装について

phpで特定の条件でファイルをリネームしたい。

環境はwindows xamppです。

ファイル名に英語（アルファベット）、数値、日本語（ひらがな、かな、カタカナ）以外の
文字があれば、「?」に置換するにはどうしたらよいでしょうか

文字化けや機種依存文字、中国語等の外国語をファイル名から除外するのが
目的です。


置換はこれでできるのはわかったんですが
http://php.net/manual/ja/function.rename.php

正規表現がよくわからないです。

文字化けや機種依存文字を除外するといった
事で用途があり、サンプルがないかなとあさってみましたが
見当たりませんでした。

phpで特定の条件でファイルをリネームしたい。

htmlとcssでお問い合わせフォームデザインを作り、
「送信」ボタンを押すと指定されたアドレスにメールが届くようにphpでコーディングしました。

しかし、、
「送信」してもメールが届きません。

原因がわかる方いらっしゃいますでしょうか？
インターネットで検索してもよくわかりません。

MAMPを使ってフォーム送信すると、
しっかりと「メール送信成功しました。」を返してくれます。

宜しくお願い致します。
```html
<div class="form-content">
			<form action="send.php" method="post">
				<div class="form-group">
					<label for="name">名前<span class="required">必須</span></label>
					<input name="name" type="text" placeholder="佐藤太郎" class="radius">
				</div>
				<div class="form-group">
					<label for="age">年齢<span class="required">必須</span></label>
					<select name="age" class="radius pull-down">
						<option value="">年齢を選んでください。</option>
						<option value="18歳未満">18歳未満</option>
						<option value="18歳">18歳</option>
						<option value="19歳">19歳</option>
						<option value="20歳">20歳</option>
						<option value="21歳">21歳</option>
						<option value="22歳">22歳</option>
						<option value="23歳以上">23歳以上</option>
					</select>
				</div>
				<div class="form-group">
					<label for="email">メールアドレス<span class="required">必須</span></label>
					<input name="email" type="email" placeholder=abcdef@ghi.com" multiple="multiple" class="radius">
				</div>
				<div class="form-group">
					<label for="day">体験会参加日程<span class="required">必須</span></label>
					<select name="day" class="radius pull-down">
						<option value="">日程を選んでください。</option>
						<option value="6/1">6月1日</option>
						<option value="6/8">6月8日</option>
						<option value="6/15">6月15日</option>
						<option value="6/22">6月22日</option>
						<option value="6/29">6月29日</option>
						<option value="7/6">7月6日</option>
						<option value="7/13">7月13日</option>
						<option value="7/20">7月20日</option>
						<option value="7/27">7月27日</option>
					</select>
				</div>
				<div class="form-group">
					<label for="comment" class="last-form">その他<span class="any">任意</span></label>
					<textarea name="comment" placeholder="ご自由にお書きください。" cols="50" rows="5" class="radius"></textarea>
				</div>
				<div class="submit-area">
					<input type="submit" name="submit" value="送信" class="submit-btn"></input>
				</div>
			</form>
		</div>
```

```php
<?php
header('Content-Type: text/html; charset=UTF-8');
header('Content_Language: ja');
$to = '○○@○○';         //送信先メールアドレス
$subj = 'お問い合わせ';     //件名
$mess = '名前: ' . $_POST["name"] ."\r\n".'年齢: ' .$_POST["age"] ."\r\n".'メールアドレス: ' .$_POST["email"] ."\r\n".'参加日程: '. $_POST["day"]."\r\n".'その他(任意): '. $_POST["comment"];
$from = 'From: '.$_POST["email"] ; //送信元メールアドレス
mb_language('japanese');
mb_internal_encoding('UTF-8');
if(mb_send_mail($to,$subj,$mess,$from)){
   echo "メール送信成功しました。";
}else{
   echo "メール送信失敗しました。";
}
?>
```