常連

注目の的

質問力

拍手喝采

情報収集家

支持者

自己紹介

iOSアプリからWebページの方にアクセスがあった場合にuseragentを使用して判別し、画像の出しわけをしたいと考えてます。
当初は以下のコードのようにPHPで実装していたのですが、諸事情でPHPが使用できなくなりました。
そこでJavascriptで同様に実装したいのですが可能でしょうか？

処理としてはXcodeの方でアプリのuseragent名(ios_app)を設定しており、Webページ側でios_appという名前のuseragentが飛んできたらuseragent_iosという関数で判定し、HTML側で画像の出しわけをしています。

```PHP
// iOSアプリ
if ( ! function_exists("useragent_ios") ) {
  function useragent_ios() {
    $pattern = '/ios_app\z/';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
  }
}
```
```HTML
<?php if (saras_useragent_ios() == 0) : ?>
  /*画像を表示*/
<?php endif; ?>
```

Javascriptでuseragent判定

[お知らせ｜teratail](https://teratail.com/notifications) で「あなたの回答に「+」が付きました」は何度か見ていますが、「あなたの回答に「-」が付きました」は見たことがありません。
マイナス評価は隠す仕様なのでしょうか。

[お知らせ] で確認できないとしたら、自分の回答にマイナス評価が付いたことを確認する方法はあるでしょうか。
(マイナス評価であっても、自分が間違っているのなら確認しておきたいのです)

teratail の [お知らせ] に「あなたの回答に「-」が付きました」はないのでしょうか

教えてくれたプログラマーの方々にとても感謝しています。
一から教えてくれてありがとう
クソみたいな質問にも丁寧に答えてくれてありがとう

こういうサイトが爆速で作れるようになりました。

[Rubbishbook - 失敗を共有するクチコミサイト](http://rubbishbook.net/)

レスポンスが遅いのが気になりますが、徐々に直していきます。

どこを直したらより良くなるのかがわかりません
アドバイスお願いいたします。
（ランキング機能はまだ実装していません）

teratailで質問してたら爆速でサービスが作れるようになりました（アドバイスお願いします！）

ご覧いただきありがとうございます。
ウェブサイトのフォント種類を、メディアクエリを利用してPCとスマホで変わるようにしたいです。

PCの場合、google fontをCDNより読みこんでbodyに指定、スマホの場合は一般的なフォントになるよう設定しています。

が、下記コードではgoogle fontが読み込まれていないようでPCでも通常のフォントになってしまいます。
どういった書き方をすればよいかお教え頂けますでしょうか。

※スマホで接続した際にgoogle fontを読み込んでしまうととても重いので、スマホの場合は読み込み自体をしないようにしたいです。

```ここに言語を入力
@media only screen and (max-width:580px){
  body {
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    font-size: 14px;
    color: #262626;
  }
}
@media only screen and (min-width:581px){
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: 14px;
    color: #262626;
}
}

```

font-family メディアクエリ レスポンシブ など調べても解決策がみつからなかったのでご質問でございます。
よろしくお願いいたします。

[css]font-familyをメディアクエリで設定する方法

初心者ですので意味不明なこと言ってたり、勘違いもあるかもしれません。ご指摘ください。

Node.jsで[irMagician](http://www.omiya-giken.com/?page_id=837)とシリアル通信をしようとしています。

コマンドを送信して、その結果を使うような処理をしたいのですが、 結果が返ってくるよりも先にコールバックが呼ばれてしまうようで、コールバック関数ではその結果を受け取れません。

コールバック関数でなくても、これがこのコマンドの返答だとわかるようになっていれば良いです。
ただ、返答が返って来てからしたい処理などもあるので、同期的な感じ?になっていてほしいです。

どうしたらいいでしょうか。ご教授お願いします。

コード
 ```javascript
var serial = require('serialport').SerialPort;
serial = new serial('/dev/ttyACM0',{baudrate:9600});

serial.on('open',function(){
    serial.on('data',function(data){
        console.log('data : '+data);
    });
    serial.write('i,6\r\n',function(err){
        console.log('write \'i,6\'');
        console.log(err || 'no err');
    });
});

=======================
出力
=======================
write 'i,6'
no err
data : 0012
```

このようなことをしたいです
```python
# -*- coding: utf-8 -*-
import serial
import time

ser = serial.Serial("/dev/ttyACM0", 9600, timeout = 1)
ser.readline()

ser.write("I,1\r\n")#赤外線信号の変化点 (L/Hの切り替わり)の数
time.sleep(1.0)
recNumberStr = ser.readline()
recNumber = int(recNumberStr, 16)
```

[irMagicianのコマンドとそのレスポンス](http://www.omiya-giken.com/?page_id=889)

意味がよく分からないところなどありましたら指摘してください

Node.jsでのシリアル通信で、送信したコマンドと受信データを1対1対応させるには

teratail で自分が投稿したコメントの履歴を見る方法はないでしょうか。
[回答], [質問] は履歴から追えますが、[コメント] を追う方法が分かりません。
そのせいか、他の人の動向を見ると自分の質問や回答に対するコメントは積極的に返信しますが、他人の回答に対するコメントは消極的(あまり見ない)な傾向があるように感じています。

teratail で自分のコメント履歴を見る方法

javascriptを書いたのですが綺麗にかけているのかどうかわからないのでコードの駄目だし、ここをこうしたほうがいいなどのアドバイス頂きたいです。

やりたいことは
・指定した画像（例の場合#js-translation-image）のview上でのサイズの変更を行いたい。
・拡大、縮小、初期化のボタンを用意
・拡大ボタンを押すと拡大率が0.5上がる（1.0 → 1.5）
・縮小ボタンを押すと拡大率が0.5下がる（1.0 → 0.5）
・初期化ボタンを押すと拡大率が1に戻る（2.5 → 1.0）
・ボタンを押した際の拡大率、縮小率は0.5倍刻み、最大3倍、最小0.5倍まで
・初期化のボタンを押すと拡大率を1に戻す。

以下がコードになります。

```html

<img src="text.jpg" height="100%" id="js-translation-image">

<div id="js-resizeImage">
  <div class="js-resizeImage--scaleUp">
    <i class="fa fa-plus fa-4x"></i>
    <div class="p-hover-balloon">拡大</div>
  </div>
  <div class="js-resizeImage--scaleDown">
    <i class="fa fa-minus fa-4x"></i>
    <div class="p-hover-balloon">縮小</div>
  </div>
  <div class="js-resizeImage--scaleInitial">
    <i class="fa fa-refresh fa-4x"></i>
    <div class="p-hover-balloon">初期化</div>
  </div>
</div>
```

```javascript
//vendorprefixの判定
var venderPrefix = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
                      (/firefox/i).test(navigator.userAgent) ? 'moz' :
                      (/trident/i).test(navigator.userAgent) ? 'ms' :
                      'opera' in window ? 'O' : '';

//ページの画像のリサイズの挙動
var resizeImage = function(element){
  var self = this;
  self.elem = document.getElementById(element);
  self.rate = 1.0;

  self.scaleUp = function(){
    self.rate == 3 ? self.rate : self.rate += 0.5;
    self.adoptScale();
  }

  self.scaleDown = function(){
    self.rate == 0.5 ? self.rate : self.rate -= 0.5;
    self.adoptScale();
  }

  self.scaleInitial = function(){
    self.rate = 1.0;
    self.adoptScale();;
  }

  self.adoptScale = function(){
    self.elem.style[venderPrefix + 'Transform'] = 'scale(' + self.rate + ')';
  }
}

var resizeImages = new resizeImage('js-translation-image');

//イベントを要素にセット
$('#js-resizeImage').find('.js-resizeImage--scaleUp').on('click', function(){
  resizeImages.scaleUp();
});

$('#js-resizeImage').find('.js-resizeImage--scaleDown').on('click', function(){
  resizeImages.scaleDown();
});

$('#js-resizeImage').find('.js-resizeImage--scaleInitial').on('click', function(){
  resizeImages.scaleInitial();
});
```

ダメな部分はいっぱいあるかと思いますが、個人的には最後のイベントを3つの要素に設定している部分をもっとスマートに出来ないかなと思っています。

根本的におかしい部分などがありましたらご指摘していただけると嬉しいです。
よろしくお願いいたします！

jsのリファクタリングをお願いしたいです！

いつもお世話になっております。

本日はoverflow-y:hidden;に関してお聞かせ下さい。
今ポップアップ内にoverflow-y:scroll;でスクロールするものを作成しているのですが、
ポップアップ内をスクロールして最下層まで行くと後ろ？のbodyタグがスクロールしてしまいます。

これを止める方法はないでしょうか。。。

よろしくお願いいたします！

overflow-y:scroll;内の要素でscrollした際のbodyのscrollを止める方法

下記のようなhtmlがあったときに「ここだけ色を変えたい」部分だけ、
color,background-colorを変えたいと思っています。
jQueryでできそうですが、cssだけでもできないかと考えています。
:hoverと:not使いながらあれこれ試しているのですが、階層の深さが変わると目的通りにいかない状態です。


```lang-html
<div class="alpha">
  <div class="beta">
    <span>ここは変えたくない</span>
  </div>
  <div class="alpha">
  <span>ここは変えたくない</span>
    <div class="beta">
      <span>色を変えたい</span>
   </div>
   <div class="alpha">
     <div class="beta">
       <span>ここは変えたくない</span>
      </div>
    </div>
  </div>
</div>
```
```lang-css
.alpha:hover .beta:hover{
  background-color:red
}
.alpha:hover :not(.alpha) .beta:hover{
  background-color:red
}
```
このような同じセレクターが階層化した場合に、最も深い（マウスホーバー直近）のエレメントのみを対象にする方法はあるでしょうか？

【追記】
spanの部分は実際にはspan以外にもpやdivが存在する場合もあります。
最小限の短いコードにしていあるため申し訳ありません。

よろしくお願いします。

css の :hover で最深階層のエレメントだけ色を変えたい

お世話になっております。

自分で経験したことのないレベルの開発の工数見積もりが必要になりました。
段階的な見積もりが必要なのですが、今まで既存の機能の修正や追加しかしたことがなく、どのように見積もればいいのかわかりません。

不動産の検索サイトを作成するのですが、どのような区切りで段階分けをすればいいのかが全く分かりません。

現時点では
- サイトそのものをWPで作成し、プラグインを使用(デザイン等の修正のみなのでプログラム面ではWPのインストールや微調整のみでOK)

- オープンソースのものやフリー・シェアウェアのCGIなどを使って微調整を行う

- 一から自分で作る

があると思っています。

上二つは機能自体はできているので工数としては最初のインストールや微調整、デザイン(デザインは別の方が行います）のみになり、最初は早いと思いますが、メンテナンスやエラーの際には自分で作っていない分時間がかかってしまうかと思います。
自分で作る場合は、単にどこまで作りこみをするか、ということになると思うのですが、不動産の検索はかなり項目が多くなるため区切りをどうしていいのかわかりません。

曖昧な質問になってしまって申し訳ありませんが、誰も相談する人がおらず行き詰っています。
些細なことでもいいので、アドバイスいただけると幸いです。

よろしくお願いします。

工数見積もりの方法

受け入れテストをCodeceptionとSeleniumServerを使って自動化しようと考えています。この場合にユーザエージェントの切り替えをどのようにすればいいのか教えて欲しいです。

該当システムはユーザエージェントでPC版とスマホ版の表示切り替えをしていて、
現状PC版のテストはプロトタイプが作れたのですが、ユーザエージェントの切替方法が分からずスマホ版のテストの目処が立ちません。

以下のようにacceptance.suite.ymlに書いて実行してみましたがダメでした。（PC版で実行されてしまいました）
```
class_name: AcceptanceTester
modules:
    enabled: [WebDriver]
    config:
      WebDriver:
        url: 'http://test.host.jp'
        browser: chrome
        capabilities:
          userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12F70 Safari/600.1.4"
```

調べていてデフォルトで使えるFirefoxWebDriverでは難しそう（出来なそう？）だったので、ChromeWebDriverを使ってみています。
[この辺](https://sites.google.com/a/chromium.org/chromedriver/capabilities)を見る限りmobileEmulationの当たりを上手く設定出来ればいけるのかとおもっているのですがCodeceptionを使ったときにどうしていいか分からず。。。

また、Codeception + SeleniumServer + ChromeWebDriverと書きましたがスマホ版のテストが出来るならChromeでなくても良いと考えています。

Codeception + SeleniumServer + ChromeWebDriverでのUserAgentの変更方法

[http://2plus10.com/tec/blur_pannel.html](http://2plus10.com/tec/blur_pannel.html)

このページを見てくもりガラスエフェクトを実装したのですが背景画像の指定で躓いています。
background-attachment: fixed;を僕は指定したくないのですがこれがないと#wrapの画像の大きさと#profileの画像の大きさが別になってしまい、エフェクトをかけてるところだけ画像の別の部分が表示されてしまいます。

他のサイトを見てみてもbackground-attachmentを指定しているサイトばかりでスクロールしても背景画像が動きません。
background-attachmentを指定しないでも動かせる方法がわかる方はいらっしゃいませんでしょうか？

```lang-html
    <div id="wrap">
      <div id="profile">
        <img src="img.jpg"/>
        <h1>
          text
        </h1>
      </div>
    </div>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      #wrap{
        width: 800px;
        height: 400px;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        background-image: url("back.jpg");
      }
      #profile{
        background: inherit;
        position: relative;
        border-radius: 8%;
        padding: 8px;
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 0 10px rgba(0,0,0,.4);
        z-index: 0;
        color: white;
        overflow: hidden;
      }
      #profile:before,#profile:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      #profile:before{
        content: '';
        background: inherit;
        filter: blur(5px);
        -webkit-filter: blur(5px);
      }
      #profile:after{
        content: '';
        background-color: rgba(0,0,0,.1);
      }
    </style>
```

くもりガラスエフェクトをつけるときの背景

スマートフォンサイトをHTMLで作成したいのですが、ページを横にスライドさせる方法を教えて頂きませんか？
参考![イメージ説明][WIDTH:320](ba994c9e93bcd528e6826a66d8af6393.jpeg)

スマートフォンサイト作成　横にスライドするページ

Retinaディスプレイなどの高解像度ディスプレイが普及してきて、そのようなディスプレイでWebサイトを閲覧すると、画像がぼやけて見えてしまうことが気になるようになりました。

画質が重要なイメージ画像については、高解像度ディスプレイ対応の必要性がでてくるかと思いますが、サイズが大きくなるとページの表示速度に影響するため悩ましい問題と感じています。

Webプログラマーの皆様の経験を踏まえて、高解像度ディスプレイ対応についてどうかんがえるべきかアドバイス頂けますでしょうか？
また、近年のサイト構築実績として、高解像度ディスプレイ対応を行った事例がありましたら差し支えない範囲で、どのようなサイトかなど教えていただけると幸いです。

Webサイトのコーディングで、高解像度ディスプレイ対応についてどう考えていますか？

###作っているもの
こういうLine的なチャット画面（スマートフォン想定）
View
[http://output.jsbin.com/pahibi](http://output.jsbin.com/pahibi)
Source
[http://jsbin.com/pahibi/edit?html,css,js](http://jsbin.com/pahibi/edit?html,css,js)

###要望
twitterのような「引っ張って更新」の機能を実装したい。
Twitter
[https://mobile.twitter.com/](https://mobile.twitter.com/)

###仕様
下が最新のメッセージになるので、最下部に来た時に
上にスワイプしたら更新が走るように動作させたい。

###質問したいこと
最下部にいるという判定までは作れたのですがここから先がどうすればよいかわかりません。
ご教示いただける方がいらっしゃいまいしたら、よろしくお願い致します。

twitterのような「引っ張って更新」の実装

いつもお世話になっています。

回転させた要素を斜めに移動させたく、以下の計算式を使用することで上手くいきました。

```lang-javascript
 x += Math.cos(deg * Math.PI / 180) * 5;
 y += Math.sin(deg * Math.PI / 180) * 5;
```

移動させる要素がある程度進んだところで、位置を初期の方に戻し無限ループしているような表現をしたいのですが、単純に初期値を入れるだけでは切り替わりの際にガクッとズレてしまいました。

どのようにしたら綺麗につながって、ループしているように見えますでしょうか。

# 補足

- 要素は横長の画像です。
- 画像を一つclone()して前方に横並びとして繋げています
- 横スライダーの斜めバージョンのようなイメージです

アドバイスの程よろしくお願いいたします。

# 補足2
言葉では上手く説明できないと思うので、やりたいことを具体的にコードにしてみました。
[https://jsbin.com/wosivi/](https://jsbin.com/wosivi/edit?html,css,js,output)

斜めに傾けた要素を綺麗に無限ループさせたい

スマホサイトにて、bxSliderを使って、左右に隠れている画像が見切れているカルーセルを実装しています。

説明の様に画像を用意したのですが、初期（スライド前）は、一定の位置から初めて、スライド後は横100%でスライドさせたいと思っています。

この部分がどうしても分からず、質問させていただきました。
不足があればおっしゃってください。

よろしくお願いします。

![イメージ説明][WIDTH:600](4a4ce0688bda9720e1d15e20b2dddf70.jpeg)

```lang-javascript
$(function(){
var obj = $('.slider').bxSlider({
  auto: true,
  infiniteLoop: true,
  responsive: true,
  speed: 700,
  displaySlideQty: 1,
  pager: false,
  controls: false,
  slideWidth: 136,
  minSlides: 2,
  maxSlides: 2,
  moveSlides: 3,
  slideMargin: 8,
  startSlide: 0,
  pause: 300,//3300
  onSlideAfter: function() {
  obj.startAuto();
  }
});
});
```
```lang-html
<div class="bx-wrapper">
  <div class="bx-viewport">
    <ul class="slider">
      <li>
        <a href="detail.html" class="textOverlay newItem">
          <img src="dammyImg.jpg" width="200" height="100" alt="ALT">
        </a>
      </li>
      <li>
        <a href="detail.html" class="textOverlay newItem">
          <img src="dammyImg.jpg" width="200" height="100" alt="ALT">
        </a>
      </li>
      <li>
        <a href="detail.html" class="textOverlay newItem">
          <img src="dammyImg.jpg" width="200" height="100" alt="ALT">
        </a>
      </li>
    </ul>
  </div>
</div>
```

bxSliderを使った左右見切れているカルーセルの実装

今、PHPもMYSQLを使った簡単なアプリケーションを運営中です。
来週うるう秒というのが追加されるらしいのですが、アプリケーション側で何か対策する事などあるのでしょうか？

例えば、ある動画に対して、ユーザがコメントを付けるなどの機能があり、この時はPHPの'time()'関数を使ってます。
ここで 08:59:60という数値が入ってくるとバリデーションで弾いたりしてしまいます。

MYSQLを使ってDBに値を入れるのも不安です。now()としたときに、08:59:60が帰ってくるのでしょうか。
そうした場合、今後selectする時の挙動もよく分からず不安です。。

今回のうるう秒、PHPやMYSQLなどで対策が必要かどうか教えてください。

うるう秒対策について

★一つから★五つまで選択できるセレクトボックスを、べた張りではなく、forループ等を使い実装したいのですが、数字分だけ★を表示させるメソッドはありますでしょうか？また、この方法以外に簡単な実装方法ありましたら教えて頂けると幸いです。よろしくお願いします。

★一つから★五つまで選択できるセレクトボックスを生成したい

仕事でプログラマ兼雑用をしております。
事務職志望だったのがなぜかシステム開発部に異動となり、
知識が全く無いため、色々とご教示頂きたいと思っております。

①綺麗なコードの定義と、汚いコードの定義を
サンプルと共にご教示いただけませんでしょうか。
また、皆様がコーディングの際に気を付けている事、
心がけている事などもご教示頂きたいです。

②コーディングのスキルは、どのように向上させましたか？
また、教えてくれる先輩や上司が全くおらず、
コードの見直しなども一切行って頂けない場合、
どの様に自分のコードをブラシアップ(？)すれば良いでしょうか？

③プログラマになって良かったこと、悪かったことはありますか？

様々な方のご意見、ご指導をお願いしたいと思っております。
どうぞよろしくお願いいたします。