npm install && npm run dev が失敗したときの解決方法

環境

  • laravel Laravel Framework 6.6.2
  • node.js v6.17.1
  • npm 3.10.10

つまったところ

npm install && npm run dev を実行して、下記のエラー発生。

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

解決した方法

sass-loader をダウングレードしたら解決できました。

laravelのプロジェクトルートにあるpackage.json内のsass-loaderのバージョンをダウングレードしてください。
私は、”^8.0.0″→”^7.1.0″としました。

変更した後、npm install && npm run devを実行すればエラー無くなりました。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

参考

https://programing-school.work/laravel-vue-js-dont-work/

jQueryで指定するセレクタに変数を利用するコード

jQueryで要素の指定で使うセレクタを時と場合により違うセレクタに使いたいとき、そのセレクタを変数にして使うことができます。

テーブルにある0から10までの数字をクリックしたときに、
クリックした数字(td)が表示される(h1)コードを作りました。

変数を使用したセレクタ設定のサンプルコード

$(function(){
  for (var i=0; i < 10; i++){
    $('#' + i).click(function(){
      var num = parseInt($(this).text());
      $("#first-num").text(num);
    });
  }
});

使用するHTMLコード

    <table>
      <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
        <td id="10">10</td>
      </tr>
    </table>
    <h1 id="first-num">0</h1>

「Xeory-EXTENSION」の不要3項目を削除する方法

「Xeory-EXTENSION」の会社概要お問い合わせを消去したので、忘れないように自分のためのメモ。
ついでに、サービス紹介を消す方法も合わせて、「Xeory-EXTENSION」の不要3項目を削除する方法をメモしときます。

「外観」→「テーマの編集」で「front-page.php」から不要な項目を表示しないように変更します。のちに「サービス紹介」などの項目が必要になったら、追加してあげればいいだけですね。

サービス紹介を消去

「サービス紹介」を表示させないようにする場合は、下記の部分を丸っと削除します。

<!-- サービス紹介 -->
<?php
  $icon = 'none';
  $title = '';
  $bzb_ruby = '';
  $bzb_catch = '';
  $bzb_service_header_array = get_option('bzb_service_header');
  if(is_array($bzb_service_header_array)){
    extract($bzb_service_header_array) ;
  }

?>
<div id="front-service" class="front-main-cont">

</code></pre>

  <header class="category_title main_title front-cont-header">
    <div class="cont-icon"><i class="<?php echo $icon;?>"></i></div>
    <h2 class="cont-title"><?php echo $title;?></h2>
    <p class="cont-ruby"><?php echo $ruby;?></p>
    <div class="tri-border"><span></span></div>
  </header>


  <div class="wrap">
    <div class="front-service-inner">

<?php
  $i = 1;
  $bzb_service = get_option('bzb_service');
  if(isset($bzb_service)){
  foreach((array)$bzb_service as $key => $value){
    extract(make_info_4top($value));
?>
      <section id="front-service-1" class="c_box">
        <div class="c_title">
          <h3><?php echo $title;?></h3>
          <p class="c_english"><?php echo $bzb_ruby;?></p>
        </div>
        <div class="c_text">
          <h4><?php echo nl2br($bzb_catch);?></h4>
          <p><?php echo $service;?></p>
          <?php if(isset($button_text) && $button_text !== '') { ?>
            <p class="c_btn"><a href="<?php echo $button_url;?>" class="btn"><?php echo $button_text;?></a></p>
          <?php }else{ ?>
            <p class="c_btn"><a href="<?php echo $url;?>" class="btn">詳しく見る</a></p>
          <?php } ?>
        </div>
      </section>
  <?php
    }
  }
  ?>    
    </div>
  </div>

</div><!-- /front-contents -->

会社概要を消去

「会社概要」を表示させないようにする場合は、下記の部分を丸っと削除します。

<!-- 会社概要 -->
<div id="front-company" class="front-main-cont">
  <?php 
    $companies = get_option('company');
    $use_company_map = get_option('use_company_map');
    $company_map = "";
     
    if(isset($use_company_map) && $use_company_map !== ''){
      $company_map = get_option('company_map');
    }else{
      $company_map_class='no-company-map';
    }
 
  $icon = 'none';
  $titile = '';
  $ruby = '';
  $bzb_company_header_array = get_option('bzb_company_header');
  if(is_array($bzb_company_header_array)){
    extract($bzb_company_header_array) ;
  }
 
  ?>
 
  <header class="category_title main_title front-cont-header">
    <div class="cont-icon"><i class="<?php echo $icon;?>"></i></div>
    <h2 class="cont-title"><?php echo $title;?></h2>
    <p class="cont-ruby"><?php echo $ruby;?></p>
    <div class="tri-border"><span></span></div>
  </header>
 
 
  <section id="front-contents-1" class="c_box c_box_left <?php echo $company_map_class; ?>">
    <div class="c_img_box">
      <?php echo $company_map;?>
    </div>
 
    <div class="wrap">
      <div class="c_box_inner">
        <?php 
        if(isset($companies) && $companies !== ''){
          $i = 1;
          foreach((array)$companies as $key => $company){
            echo '<dl id="front-company-'.$i.'">';
            echo "<dt><span>" . $company['name'] . "</span></dt><dd><span>" . $company['val'] . "</span></dd>";
            echo "</dl>";
            $i++;
          }
        }
        ?>
      </div>
    </div>
  </section>
</div><!-- front-company -->

お問い合わせを消去

「お問い合わせ」を表示させないようにする場合は、下記の部分を丸っと削除します。

<!-- お問い合わせ -->
<div id="front-contact" class="front-main-cont">
  <?php 
 
  $icon = 0;
  $titile = '';
  $ruby = '';
  $bzb_contact_header_array = get_option('bzb_contact_header');
  if(is_array($bzb_contact_header_array)){
    extract($bzb_contact_header_array) ;
  }
 
  $bzb_contact_textarea = get_option('bzb_contact_textarea');
  ?>
 
  <header class="category_title main_title front-cont-header">
    <div class="cont-icon"><i class="<?php echo $icon;?>"></i></div>
    <h2 class="cont-title"><?php echo $title;?></h2>
    <p class="cont-ruby"><?php echo $ruby;?></p>
    <div class="tri-border"><span></span></div>
  </header>
 
  <section id="front-contents-1" class="c_box c_box_left">
    <div class="wrap">
      <div class="c_box_inner">
        <?php echo $content = apply_filters( 'the_content', $bzb_contact_textarea, 10 ); ?>
      </div>
    </div>
  </section>
</div><!-- front-contact -->

技術ブログの「ソースコード」表示する方法

web開発初心者の僕ですが、開発記録のようなものを残していきたいと思い、自分のために技術系記事を書いていこうと思いました。
超初級の技術系記事からですが、記事作りを始めてます。

そんな中、技術ブログに欠かせないのがソースコードの表示です。
自分が参考にしたソースコードの表示方法を載せてるサイトリンクをメモしておきます。笑

技術ブログの「ソースコード」表示する方法

SEO対策

SEOとは

 SEOとは(Search Engine Optimization)の略であり、検索結果で自社サイトを多く露出をするために行う対策のことをSEO対策といいます。検索エンジン最適化とも呼ばれます。

SEOを上げるコツ

1.サブタイトルにワード

Google が掲げる 10 のSEO理念

1.ユーザーに焦点を絞れば、他のものはみな後からついてくる。
2.1つのことをとことん極めてうまくやるのが一番。
3.遅いより速いほうがいい。
4.ウェブ上の民主主義は機能します。
5.情報を探したくなるのはパソコンの前にいるときだけではない。
6.悪事を働かなくてもお金は稼げる。
7.世の中にはまだまだ情報があふれている。
8.情報のニーズはすべての国境を越える。
9.スーツがなくても真剣に仕事はできる。
10.「すばらしい」では足りない。