常連

注目の的

社会貢献

質問力

自己紹介

昔のweb標準と言われる頃のwebコーディングは「文章の構造とデザインを分離」が主流で、
「htmlに余計なクラス名をかかない。デザイナーは（できるだけ）cssで見た目を整える。
といった感じですが、
現在はflocss等のcss設計が主流で
cssの編集だけでなくhtmlにクラスを増やしていくのが主流となっています。

これは「いつから」「なにがきっかけで」変わっていったのでしょうか？

ご存知の方がいらっしゃったら教えていただけると幸いです。


## 追記
言葉足らずですいません。
今回は文章構造とcssの分離的意味合い質問です。
もっと乱暴に説明するなら、システムとデザイナーの作業分離です。
（一昔の現場は…的な概念的話になります）

flocssは構文の意味を守りつつcss設計ができるのは理解できているのですが、
flocssはcssのカスケードを極力禁止しているため（プロジェクトはできる等例外はありますが好ましくない）、htmlに都度都度クラス名を足さないといけなくなります。

その際に、システム出力されるhtmlの場合都度システムに修正依頼をかけないといけなくなります。
自分でhtmlコードも管理できる場合なら気にならなかったのですが、flocssを守るとなるとhtmlを編集する回数が増えてしまい、昔の「分離」的考えならcssの上書きで
対処できたな…いつからこの考えが変わっていったんだろう？
と思ったのが質問の経緯です。

明確な答えはなく、時代の流れ的になんとなく……なのでしょうか？

昔のweb標準と現在のcss設計について

WordPressの追加CSSに下記のような
<h1>～<h6>タグを同じブロックで定義したいです。
pattern3-Q のような指定方法はありますでしょうか。

```CSS
/* pattern1-Q */
h[1-6] {
    font-size: 28px;
}

/* pattern1-A */
h1, h2, h3, h4, h5, h6 {
    font-size: 28px;
}

/* pattern2-Q */
.single-post-wrap > h[1-6]:nth-child(1) {
    font-size: 28px;
}

/* pattern2-R */
.single-post-wrap > h1, h2, h3, h4 h5, h6:nth-child(1) {
    font-size: 28px;
}

/* pattern3-Q */
.single-post-wrap > h[1-6]:nth-child(\d+) {
    font-size: 28px;
}
```

①pettern1-Qのように記述する方法はないのでしょうか。
ただの<h1>～<h6>なら
pattern1-Aのように記述すれば手間ではないのですが、

②pattern2-Q ように.single-post-wrap の<h1>なら
どうすればいいでしょう(pattern2-Rはダメでした)。

③一番困っているのはpattern3-Q のパターンで
wordpressが勝手に(?)作る数字がchild()の引数(?)になる時です。
このようなときは、どう指定するのが好ましいですか。

④よろしければ、なんとググれば出てきたかも教えていただけませんでしょうか。

CSS 正規表現 でググると、下記のようなものが出てきましたが、
私のしたいような指定方法は見つかりませんでした。
行頭にマッチ：　p[class^="under"] {
行末にマッチ：　p[class*="through"] {
部分一致：　　　p[class$="bold"] {

よろしくお願いします。

CSSで正規表現を使いたい

WPにて全国チェーン店のサイトを構築する想定です。
連日調べまくって色々試してみたのですが、
上手いこと実現出来ず困っております。
実現したいのは↓以下の形です。

xxxx/tenpo/
店舗検索ページ　(固定ページで各都道府県の店舗一覧ページへのリンクがあります。)

xxxx/tenpo/kantou/
関東の店舗一覧ページ　(地方の店舗一覧)

xxxx/tenpo/kantou/tokyo/
東京の店舗一覧ページ　(都道府県の店舗一覧)

xxxx/tenpo/kantou/tokyo/shibuya
渋谷店の個別ページ　(投稿タイプtenpoでカテゴリはtokyoを選択して追加)

カスタム投稿タイプ	tenpo
タクソノミー			area

親カテが関東、子カテが東京といった感じで
地方・都道府県を追加していきましたが
category-xxx.phpやarchive-xxx.phpなどを使うのか
各地方・都道府県毎にテンプレートを作るのか、
その場合パーマリンクの設定はどうするのか・・・

また10店舗以上の場合はページャーも使いたいので
query_postsでなくget_postsでなんとかしたいし・・・

各地方・都道府県毎にテンプレートを作って、
それぞれタームを指定してループ文を書けば出来るのでしょうが
もっとシンプルに作りたいのですが、
どのような構成で、何を使って構築すればよいのでしょうか。
そもそも現時点で何かおかしいでしょうか。

カスタム投稿タイプの親カテ・子カテの一覧ページはどのように構築すればスッキリするのでしょうか。

現在　wordpress サイトの改修を行っています。

投稿を年度別で表示できるようにしたいとのクライアントの要望で、そのように作ろうとしているんですが、どうもうまく動いてくれません。

参考にしたサイトは
[WordPressで年度別アーカイブ一覧を表示](https://blog.bitmeister.jp/?p=797)
[年度別（4月から始まる）アーカイブリストを表示する](http://www.560designs.com/memo/859.html)

などです。

上に上げた2つ目のサイトに記載のコードが動いた（ひとまず<my_get_archives_by_fiscal_year>で年度別リストの表示はできた）のですが、リスト上の年度をクリックしても、年度別ではなく年別アーカイブになってしまい、どうもうまくfunction.phpに書いた内容（4月始まり→3月終わり）が取得できていないようです。もしくは出力の仕方が間違っていると思われます。

出力（リストのリンク先）は、date.phpです。
こちらには特にクエリなど指定せず、ただのループにて出力しています。

date.phpは以下のような感じです。
```php
<ul class="catList cf">
<li class="catTitle">年度別に探す</li>
<?php my_get_archives_by_fiscal_year(); ?></ul>
</div>	
	

<?php
	 if(have_posts()) :
	 while (have_posts()) : the_post(); ?>
	
	
<div class="news_contents clearfix">
	<p class="cap02"><?php the_field('event_date'); ?></p>
	<p class="news_title2"><a href="<?php the_permalink(); ?>" target="_parent"><?php echo the_title();?></a></p>
	<p><?php the_field('event_discription'); ?></p>
	<p class="date"><?php the_time('Y年m月d日h時i分'); ?></p>
	<p class="target"><?php if ( is_object_in_taxonomy( get_post_type(), 'category' ) ) : // Hide category text when not supported ?>
<?php
	/* translators: used between list items, there is a space after the comma */
	$categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );
	if ( $categories_list ): ?>
<span class="noblue">
	<?php printf( __( '<span class="%1$s"></span> %2$s', 'twentyeleven' ), '', $categories_list );
	$show_sep = true; ?>
</span>
<?php endif; // End if categories ?>
<?php endif; // End if is_object_in_taxonomy( get_post_type(), 'category' ) ?>
</p>
<br>
<?php the_tags('<p class="tag nofloat"><span>','</span><span>','</span></p>');?>	
</div>
<?php endwhile; endif; ?>


```
やったことあるよ！って方、また、わかるよ、という方にご助言いただけましたら幸いです。
よろしくお願いいたします。

wordpress 年度別アーカイブがうまく動かない

```html
<input type="range" name="count" min="0" max="20" value="8" id="count">
```
```javascript
const count = document.getElementById("count");

count.addEventListener('change', () => {
  console.log(this.count.value);
});
```
Javascript初心者です。フォームの値を取得して、フロントエンドでのバリデーションの練習をしたいと思っています。`addEventListener`内での`this`の実体は`count`だと思っていたのですが、`console.log(this)`をしてみると`Window index.html`であることがわかり、上記のように`this.count.value`とすることで想定通りの結果を得ることができました。
`const`をした時点で`document.`としているので、`addEventListener`内でも`this`の実体が`count`とならないのはなんとなく理解できたのですが、どうも直感的でない気がします。質問したいことは、なんらかコードを変えることによって、`this`の実体が`count`を指すようにし、以下のようなコードで想定通りの結果を得ることができるかどうかをお聞きしたいです。
```javascript
const count = document.getElementById("count");

count.addEventListener('change', () => {
  console.log(this.value);
});
```

質問がわかりにくいかもしれませんが、よろしくお願い致します。

Javascript : thisの実体について

###Javascriptにおけるpromise型って結局何がしたいのですか？


> http://postd.cc/how-do-promises-work/

こちらを参考にしてみたが全く意味が分かりませんでした。

処理実行を並列して行って？処理時間短縮させたいんだなぁ。って感じのことは分かったんですが。

このサイトでの文章を見るとこんなことが記載されています。
> Promiseは、欲しい値を待つ代わりに、その値の代替となるものを即座に得る方法を提案します。

私にはこの言葉の意味が全く持って不明です。
引数がないのに処理実行して、仮の戻り値を算出してるってことなのですか？

例えば掛け算で言うところの
２ × ２ ＝ ４
をプロミス化すると
X × X = Y

ってことですか？

質問が不明瞭ですいません。
結局のところ知りたいことはプロミスのメリット・デメリットです。
お願いします。

プロミスってなんですか？

Admobで広告ユニットを作成し、プロジェクトに設定をしたのですがまったく表示されず困っています。行った作業は下記の通りです。

1. Admobで広告ユニットを作成し、広告ユニットIDを取得
2. Admobのプラグインをインストール
```ここに言語を入力
$ cordova plugin add cordova-plugin-admobpro
```
3. プロジェクトファイル内のjsファイルに下記のコードを記述
```ここに言語を入力
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

var admobid = {};
// select the right Ad Id according to platform
if( /(android)/i.test(navigator.userAgent) ) { 
    admobid = { // for Android
        banner: 'ca-app-pub-xxxxxxxxxxxxxxxxx'
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-xxxxxxxxxxxxxxxxx'
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-xxxxxxxxxxxxxxxxx'
    };
}

if(AdMob) AdMob.createBanner( {
    adId: admobid.banner, 
    position: AdMob.AD_POSITION.BOTTOM_CENTER, 
    autoShow: true 
} );

app.initialize();


```

以上です。
ご教授頂けますと幸いです。

【Cordova】 Admobの広告が表示されない

初めまして。
最近アプリを作り始め、Google Play にUPできるようになりました。
その後、Googleより下記の警告がありました。

**************************************************************
警告の詳細: Google Play では、ユーザーや端末に関する機密情報を要求する、または取り扱うアプリの場合、デベロッパーは有効なプライバシー ポリシーを提供する必要があります。当該のアプリは、個人情報または機密情報に関わる権限 （カメラ、マイク、アカウント、連絡先、スマートフォンなど） またはユーザー データを要求していますが、有効なプライバシー ポリシーが確認できませんでした。
***********************************************************

上記の様な仕様にしているつもりはなく、UPした権限を確認してみたところ、
下記の内容になっていました。

android.permission.ACCESS_NETWORK_STATE
android.permission.INTERNET
android.permission.READ_PHONE_STATE
android.permission.WAKE_LOCK
com.google.android.c2dm.permission.RECEIVE
net.box_i.shinya.tasuhiku_apuri.permission.C2D_MESSAGE

アプリにはデータベース接続と、AdMobの広告を使用しています。
3行目以外は、それらのための権限と思っています。
気になる3行目は、前に一度、ゲームアクセス数を確認
するため、スマホIDを取得しようとしたことがありました。
今はID取得はしようとしていませんが、その名残でしょうか？
「android.permission.READ_PHONE_STATE」
この権限を削除すれば、他に何もしなくても、違反にはならないでしょうか？
それとも、何かの表示等が必要でしょうか？

分からず困っております。
申し訳ございませんが、よろしくお願いいたします。

Google Playデベロッパー ポリシー違反に関わる警告について

エンジニアならこれは読んでおけ みたいな本を教えてください。
ほかにも読んですごく良かった本などでも知りたいです。

アルゴリズムの本や正規表現、TCP/IPなどなど
お願いします

読んでおいたほうがいい本

JavaScriptで、文字列を一秒毎に一文字ずつコンソール画面に表示するプログラムを書いてみたのですが、わからないことがあるので教えてください。

最初に下のように書きました。

```lang-javascript
var str   = 'ABCDEFG';     //表示する文字列
var alpha = str.split(''); //配列に変換

var timer = setInterval(function() {
	console.log(alpha[0]); //表示する
	alpha.shift();         //配列の先頭を消す
}, 1000);

if (alpha.length === 0) clearInterval(timer); //配列が空になったら止まる(はずだった)

```
これでAから一秒ずつコンソールに表示されるのですが、Gまで表示しても(alpha.lengthが0になっても)止まらず、そのままundefinedがずっとコンソールに表示されました。そこでclearIntervalの位置を変えてみました。

```lang-javascript
var str   = 'ABCDEFG';
var alpha = str.split('');

var timer = setInterval(function() {
	if (alpha.length === 0) clearInterval(timer);
	console.log(alpha[0]);
	alpha.shift();
}, 1000);
```
これだとGの後に一回undefinedが表示されて止まりました。Gが表示されると同時に止めたいのでclearIntervalの位置を再度変えてみました。

```lang-javascript
var str   = 'ABCDEFG';
var alpha = str.split('');

var timer = setInterval(function() {
	console.log(alpha[0]);
	alpha.shift();
	if (alpha.length === 0) clearInterval(timer);
}, 1000);
```
こうするとGが表示されると止まりました。

そこで2つほど質問なのですが、
1.  最初のコードでタイマーが止まらないのはなぜなんでしょうか？
2.  2番目のコードで最後にundefinedが一回表示されるのはなぜでしょうか？

どちらか一方でも良いので、教えてくださると嬉しいです。よろしくお願いいたします。

clearInterval()の挙動ってどうなってるのですか？

###前提・実現したいこと
WordpressにてPHPでテンプレート(Stinger5)の関連記事のカスタマイズを行っています。

関連記事でタグ(優先１)とカテゴリ(優先2)を取得してランダムに表示する動作を実装したいのですがうまく動きません。
現状は投稿記事の同一カテゴリ内の記事をランダムに10件取得するだけのコードとなっているようです。

↓のサイトが参考になるのですが、タグとカテゴリを２つを両立させる取得方法にしたいです。
[http://nelog.jp/tag-reated-entries](http://nelog.jp/tag-reated-entries)

[希望動作]
 ①同一タグの記事をランダムに取得する。
 ②同一カテゴリの記事をランダムに取得する。

①②の条件にて合計で最大10件表示したいです。

[理想の動作例]
・ ①にて6件記事を取得をできた場合は残り４件を②より4件取得する。
 ・①にて10件記事を取得をできた場合は残り0件を②より0件取得する。

###発生している問題・エラーメッセージ
同一カテゴリからランダムに取得する仕様になっている。

###ソースコード
```php
<div id="kanren">
  <?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 10,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$st_query = new WP_Query($args); ?>
          <?php
if( $st_query -> have_posts() ): ?>
          <?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb70' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="70" height="70" />
      <?php endif; ?>
      </a> </dt>
    <dd>
      <h5><a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
        </a></h5>
      <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
    </dd>
  </dl>
  <?php endwhile; ?>
  <?php else: ?>
  <p>関連記事はありませんでした</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>

```


よろしくお願い致します。

WordPressの関連記事のカスタマイズについて。

こんにちわ。
Wordpressのカテゴリの出力についての質問です。

A Parent 
|__A child 1
|__A child 2
|__A child 3

B Parent 
|__B child 1
|__B child 2
|__B child 3

C Parent 
|__C child 1
|__C child 2
|__C child 3

例えばカテゴリが上記のような構造をしている場合に、child をすべて取得して表示したいと考えています。
もしA child 1が子供をもち、３階層目が存在したとしても表示させたくありません。
つまり、2階層目の要素をすべて取得したいと考えています。
アイディアが思いつく方に教えていただきたいです。
下記は現在のコードで、15個までカテゴリ一覧を取得するものなのですが見ての通り親要素(上記の木構造の場合 A,B,C parent)まで表示されます。

よろしくお願いします。

```lang-＜php＞
<ul>
            <?php
            $categories = get_terms('category', 'get=all');
            $outputNum = 0;
            foreach ($categories as $value):
                ?>
                <?php if ($outputNum >= 15): ?>
                    <?php break; ?>
                <?php else: ?>
                    <li class="each-cats">
                       <a href="<?php echo get_category_link($value->term_id); ?>">                        <?php echo $value->name; ?>
                       </a>
                    </li>
                    <?php $outputNum++ ?>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
```

wordpress階層を指定して子カテゴリを出力したい

レスポンシブサイトの制作で、「スマホレイアウトの時だけプラグイン適用したい」という要望があり、
ネットの情報を参考に「スマホ時にプラグイン適用」まではできたのですが、
ウィンドウサイズ変更でPCレイアウトにした時に、一度適用されたプラグイン（スライダー等）を解除するにはどうしたら良いのか分かりません。
現状のコードは以下の通りです。

```JavaScript
$(function(){

function slideHuck(){
	var w = $(window).width();
	var size = 640;
	if (w <= size) {
        //スマホレイアウト時にスライダープラグインを実行
		$("#slider01").slick();	
	} else {
		//★PCレイアウトの時にはスライダー等の処理を解除したい
	}
}
slideHuck();

var timer = false;
$(window).resize(function() {
	if (timer !== false) {
		clearTimeout(timer);
	}
	timer = setTimeout(function() {
        //リサイズ完了時に実行
		slideHuck();
	}, 200);
});

});
```

スマホ幅からPC幅にウィンドウサイズを変更した際に再読み込みすればもちろん解除にはなるのですが、
再読み込みせずに自動的に解除できる方法があるならそうしたいです。
「一度実行したものを解除する」という考え方自体がもしかしたらよろしくないのかもしれませんが、
現状自分の知識の範囲だとそれ以外の方法が思いつきません。
何か参考になるアドバイスをいただけますと助かります。
（JSについてはjQueryなら何とか、、という程度なので、もし生JavaScriptの機能等が必要になるようでしたら、どの辺を勉強すれば良いのか合わせてアドバイスいただけますと嬉しいです。）

なお、スマホレイアウト時にだけ実行されるのは、スライダー等の既存のプラグインの場合もありますし、
自作の関数である場合もあります。どちらでも共通でできる方法があればよいですが、
既存プラグイン実行と自作関数実行の場合でもし手法が異なるようでしたら、それぞれの場合の考え方・必要な機能等の情報をいただけますと助かります。

よろしくお願い申し上げます。

レスポンシブでPCレイアウトの時にプラグイン適用を解除したい

ランディングページを作っております。
改行タグを<br class="hidden-xs">として、
スマホの時だけ改行をとるというCSSを書いています。

```ここに言語を入力
@media only screen and (max-width: 480px) {
  .hidden-xs { display: none ;}
}
```


がしかし、これでスマホの場合(480px以下)は改行がとれて表示されるはずなのですが、
改行がとれずそのまま表示されてしまいます。

【やったこと】
Googleのディベロッパーツールにてスマホの時の幅を確認したところ、
スマホの表示なのにも関わらずPCと同じピクセル幅の表示になっていました。

![イメージ説明](35dcbc43208b0eca8aed423c275fd12f.png)

一方でスマホの時にちゃんと改行が取れるレターはディベロッパーツールで見たときの幅が
384pxとスマホの幅で表示されていました。

おそらく上記が原因かと思われるのですが、どのように記述すれば解決できるのか悩んでおります。

もしご存知な方がいらっしゃればご教示いただけますとありがたいです。