tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

プリミティブ値

プリミティブ型

以下のような基本的なデータ型のこと

boolean型
int型
str型
shar型
undefined

https://developer.mozilla.org/ja/docs/Glossary/Primitive

プログラミング言語によって扱うデータ型が違う

数値に使われるデータ型において、
C#は以下のデータ型が存在します。

・int型、
・byte型
・short型
・long型

Javascript

・numberのみ

オペレータ、オペランド、式

オペランド

オペレータの対象となるデータ値のこと

オペレーター(演算子)

前もって定義された処理をデータ値に適用し、値を返す記号のこと。
operatorは操縦者や運転手といった意味。

間違った回答メモ

Q:コンピュータが式2 + 3を処理する際、データ値は[____]のように扱われます。
⭕️ 整数5
❌ 2 + 3という式

→int型 と float型の足し算も「値はfloat型だろう」と予測してくれるので、
式が評価するデータがどのような型なのかを考えることが大切らしい。

終了

cs学習二日目
月曜日は朝早くから仕事なので 2~4時で学習しました。
今のところ楽しくできてるなという印象です。

プリミティブ値として四つの例があげられていましたが、
MDNで調べるとundefinedやBigint など、recursionに出てきていない型などもありました。
習った情報でも一回ググってみるといいですね〜! おしまい

コンピューターサイエンスの学習について

フロントエンドエンジニアとしてスキルアップするべく
コンピューターサイエンスの勉強を始めようと思います。

きっかけ

きっかけは、csの学習方法で検索したときに recruision という学習支援サービス
(progateのcs版??)を見つけて試しに少しだけやってみたことにあります。
まだデータ型の学習しかスタートしていないのですが、
これなら続けられそうと手応えを感じたからです。

仕事ではほとんどマークアップ言語、たまにreactなどのフレームワークを使う程度ですので、
基礎的な部分もしっかり身につけようと思います。頑張るぞー

ゴール

2022年7月までに1000時間のcs学習

具体的な目標でわかりやすいのは時間だなと思いました。笑
また、以下の記事に最低1000時間は勉強せよ、と書かれていたので
まずは1000時間積み重ねることにしました。ワクワクですね笑

note.com

365日で割ると大体2.5~3時間を積み重ねていけば達成できそうです。
1日のセットとしては以下のように進めていきます。

・起床
・recruisionでのcs学習(2h) 5:00 ~ 
・はてぶアウトプット(0.5)  
・仕事 8:00 h ~ 

作戦

①スケジュールについて

subjectが7点あるとのことだったのでそれぞれで100時間ずつ取っていきます。

・基礎 7~8月
・プログラミングパラダイム 8月~9月
・アルゴリズムデータ構造 9月~10月
・数学 10月 ~ 11月
・ソフトウェア開発 11月 ~ 12月
・クイックスタート & ツール 12月 ~ 2月
・コンピューターサイエンスプロジェクト 2月 ~ 4月

最後の二つは時間かかりそうなので2ヶ月ほど(笑)

もくもく会などに定期的に参加してモチベーション維持!!!

コンパスにいい感じのもくもく会が....!!
https://mame-coffee-programing.connpass.com/event/

③ルーティーン活用してみる!!(笑)

そして少し気になっている朝のルーティーンも検証
私事ですが、湘南の海が近いので朝ランニング、その後に勉強する形にしようと思います。
https://www.youtube.com/watch?v=CrIk2Iwghzk&t=948s

③アウトプット

毎週日曜日に1週間のまとめを書いて
モチベーションを維持していきます。

アドバイスご意見いただけると嬉しいです。

結構物事を調べずに進めることが多く、わからないことがたくさんあります><
コンピューターサイエンスの学習方法も
今のところ recrusion しか学習方法知らないので
こういう講義あるよーだったり、
他の学習サイト、応用方法などあれば教えていただけると幸いです。

以上!!
ご清澄感謝です!!

【amp】スクリプトタグに無効な JSON が含まれており、パースできません。

サーチコンソールに出たampのエラーを解決したのでログとして残しておきます。

今回は
スクリプトタグに無効な JSON が含まれており、パースできません。」
について。

f:id:okinawanpizza:20210715233848p:plain

原因

構造化データの作成に用いるJSON+LDの部分でこけていました。

 <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://dressy.pla-cole.wedding/stringart-popularstringartitem/"
    },
    "headline": "【ホニャララ】知ってる??人気急上昇▷◁.。ホニャララをご紹介☆:*:゚",
    "image": {
      "@type": "ImageObject",
      "url": "https://〇〇○",
      "height": 1125,
      "width": 1125    },
    "datePublished": "2019-10-23T09:15:23+0900",
    "dateModified": "2020-10-06T12:34:55+0900",
    "author": {
      "@type": "Person",
      "name": "〇〇○"
    },
    "publisher": {
      "@type": "Organization",
      "name": "〇〇○",
      "logo": {
        "@type": "ImageObject",
        "url": "https://〇〇○",
        "width": 100,
        "height": 100
      }
    },
    "description": "
ホニャララ
\ホニャララ/

  "}
  </script>

こちらが実際のJSON+LDなのですが、
jsonのルールとして、「/」や改行は普通の文字列ではなく特殊文字としての識別扱いになり
ampではエラーになってしまいます。

以下記事参考 https://www.ipentec.com/document/json-character-escape

https://okinawanpizza.hatenablog.com/

functions.php にディスクリプション用の文言エスケープしてくれるような記述を追加して解決しました。 おしまい

【amp】AMP HTML タグの属性で指定されたレイアウトが無効です。

記事内のimgタグをamp-imgタグに変換した際に起こったエラーについて。

今回行ったこと

preg_replaceを用いて、
imgタグをamp-imgタグに置き換える。

            //<img>を<amp-img>に差し替え
            $content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $content);
            $content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $content);

エラー内容

調べてみると複数の記事で、width と height が設定されていないページがあったために起きたエラーでした。
(500記事くらいがエラー起こしてて放心状態でした、、)

f:id:okinawanpizza:20210714141303p:plain

解決方法

preg_match_allで全てのamp-imgコンポーネントを取得、
widthとheightが設定されていなければ、サイズを 16:9 で追加するという処理を加える。

functions.php に下記のコードを追加


            //<img>を<amp-img>に差し替え
            $content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $content);
            $content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $content);

            //以下を追記

            //imgタグに横幅、縦幅を付与
            preg_match_all('/<amp-img(.*?)<\/amp-img>/i', $content, $tw_matches);
            foreach ($tw_matches[0] as $index => $tw_match_tag) { 
              $matchimgwithoutwidth = preg_match('/width=(.*?)/',$tw_matches[0][$index]);
              $matchimgwithoutheight = preg_match('/height=(.*?)/',$tw_matches[0][$index]);
              if(!$matchimgwithoutwidth && !$matchimgwithoutheight){
                $replaceString = preg_replace('/<amp-img(.*?)<\/amp-img>/i','<amp-img width="400" height="300" $1</amp-img>',$tw_matches[0][$index]);
                $pattern = $tw_matches[0][$index];
                $replace = $replaceString;
                $content = str_replace($pattern, $replace, $content);
              }
            }

メモ

phpのforeach文でインデックスを取得する → foreach ( $array as $index => $value )の形で実装可能

<?php
 $array = array( '学校', '公園', '自宅', '商店' );
 foreach ( $array as $index => $value ) {
  echo $index. ":". $value. "\n";
 }
?>

// 出力結果
0:学校
1:公園
2:自宅
3:商店

参考:
https://designsupply-web.com/media/knowledgeside/5900/

幅はとりあえず 400 x 300 で設定しています。
もし画像のサイズがphp側で取得可能であれば、
取得した数字を使います。
できるのかな。、、 https://pisuke-code.com/php-how-to-get-image-size/

おしまい

【javascript】webworkerについて

こんにちは! ampなどに使われるwebworkerについて気になったのでまとめてみました。

webworkerとは

javascriptをマルチスレッドで処理を行えるようにした、web api の一つです。
メインスレッドを止めることなくjavascriptを利用できるようになります。
オブジェトを送り合う「メッセージング」と呼ばれる機能を利用しています。

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers#Browser_notes

何に使われているか

・ampのamp-scriptコンポーネント
・(やったことないけど、vueでも使うことあるみたい)

メリット・デメリット

メリット
・メインスレッドを妨げずにjavascriptを利用できる
デメリット
・アクセスできないオブジェクトがある

利用可能 不可能
navigator
location
XHR
window
document
DOM

使用方法

①ワーカーを作成

const worker = new Worker('worker.js');

②メッセージ送信

worker.postMessage('Hello');

③worker.js側でメッセージを受信

self.addEventListener('message', (message) => {
    console.log(message.data);
});

など。

ちなみにサーバー立てないとエラーを吐きます。
https://teratail.com/questions/167546

対応ブラウザ

safarichromefirefox、などでは利用可能です。
"webworker" | Can I use... Support tables for HTML5, CSS3, etc

参考

https://scrapbox.io/shokai/WebWorker%E3%82%92production%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%8B%E8%A9%B1

http://www.ric.co.jp/book/contents/pdfs/893_4_4.pdf

【amp】amp研究日記④ 〜schema.orgで構造化データを記述〜

今回は実際に構造化データを作成していきます。

構造化データとは
okinawanpizza.hatenablog.com

schema.org

・構造化データにおいて使用されるボキャブラリーの一つ。
・グーグル、マイクロソフト、ヤフー、ヤンデックスが手を組んだ。
・既存の情報をより詳しく意味を持たせることができる。

例えば次の文章が
「今日、鎌倉で〇〇社主催の合コンに行く。」
下の文章のような情報を持たせることが可能となる。
「今日(日時)、鎌倉(場所)で行われる〇〇社(主催)の合コン(イベント)に行く。」

構造化データを追加する

記事によって変わる部分もあるので、
wordpressのテンプレートタグを利用しながら構造化データを追記していきます。

  <?php
    // image(画像)の指定のためにアイキャッチ画像の情報を取得します
    $thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメントIDの取得
    $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // アイキャッチの情報を取得
    $src = $image[0];    // URL
    $width = $image[1];  // 横幅
    $height = $image[2]; // 高さ
    $description = get_post_meta($post->ID, _aioseop_description, true);
   ?>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "<?php echo esc_url(get_permalink()); ?>"
    },
    "headline": "<?php echo get_the_title(); ?>",
    "image": {
      "@type": "ImageObject",
      "url": "https://example.com/article_thumbnail1.jpg",
      "height": <?php echo $height; ?>,
      "width": <?php echo $width; ?>
    },
    "datePublished": "<?php echo get_the_date(DATE_ISO8601); ?>",
    "dateModified": "<?php if ( get_the_date() != get_the_modified_time() ){ the_modified_date(DATE_ISO8601); } else { echo get_the_date(DATE_ISO8601); } ?>",
    "author": {
      "@type": "Person",
      "name": "<?php the_author_meta('nickname'); ?>"
    },
    "publisher": {
      "@type": "Organization",
      "name": "<?php bloginfo('name'); ?>",
      "logo": {
        "@type": "ImageObject",
        "url": "<?php echo get_stylesheet_directory_uri(); ?>/img/side/img_wemz03.png",
        "width": 100,
        "height": 100
      }
    },
    "description": "<?php echo $description; ?>"
  }
  </script>
テストツールで確認する

こちらのテストツールを使用します。
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

僕らの場合はテスト環境がありますので、
テスト環境に表示されたソースを直接貼り付ける形で検証を行います。

エラーが出た箇所を随時直していけば完成となります。

おしまい。

明日
・preg_replaceタグを使ったHTMLタグの置換方法
・広告の表示

【amp】amp研究日記③ 〜構造化データとは〜

amp化も残りは記事内の置換の部分と構造化データに関する部分となってきました。
ampのテストを行っていると、どうやら構造化データの追加も任意ではあるが必要になってくるとのことでした。

こちら構造化が完了した際の画像
f:id:okinawanpizza:20210522232224p:plain

いろいろ調べたことを追記します。

構造化データとは

「HTMLで書かれた情報を検索エンジンに理解しやすいようにタグ付けしたものです。」

・リッチリザルトを表示させるためのもの
検索エンジンにただ文字列を認識させるのではなく、文字列の意味もセットで理解させる「セマンティックWeb」という考え方が基になる

セマンティックWeb

検索エンジンに単なる文字列をとしてテキストを認識させるのではなく、
その文字の意味や背景などまで理解させようとする考え方のこと。

W3CのTim Berners-Lee氏が提唱
Google検索エンジンのミッションは「世界中の情報を整理し、世界中の人々がアクセスできて使えるようにする」なんだとか

構造化データのメリット

メリットは主に2つ
検索エンジンがサイトコンテンツを認識しやすくなる。
例えると「tamakipediaはWebサイト」だったものが
「tamakipediaは技術系のWebサイトで、会社は鎌倉にあり、ロゴは、、、」
のようにより細かい情報として認識させることができるようになる。

②検索結果にリッチリザルトが表示されることがある f:id:okinawanpizza:20210522233033p:plain 画像のような、青色リンク以外の情報も表示されるきのうのこと

ボキャブラリーとシンタックス

ボキャブラリー
何についての情報なのかを定義するような規格のこと。

Google、Yahoo、Microsoftが策定を進めている schema.orgボキャブラリーの代表格。
schema.org ではタイプとプロパティーを指定する記法となっている。
「名前(タイプ)にはname(プロパティー)、住所(タイプ)はaddress(プロパティー)、誕生日(タイプ)はbirth(プロパティー)」

シンタックス
実際にマークアップする仕様のこと。
主に以下の三つがある。

・Microdata  
・RDFa Lite  
・ JSON-LD  

googleJSON-LD という仕様を推奨している。

<head>
<script type="application/ld+json">
//例
{
    "@context" : "http://schema.org/",
    "@type":"Web service",
    "name":"ECプラットフォーム(ドレス)",
    "description":"この商品の特徴は、、、、",
    "image":"https://......."
}
</script>
</head>
おしまい

今日は、構造化データがなんなのかについて
調べたことをまとめました。
明日は実際にwordpressサイトに構造化データを記述していこうと思います。

前回までの忘備録ももしよかったらぜひ↓↓

okinawanpizza.hatenablog.com

okinawanpizza.hatenablog.com

お疲れ様でした!!

参考:

google検索セントラル - 構造化データの仕組みについて -
https://developers.google.com/search/docs/guides/intro-structured-data?hl=ja

ほとんどこの方の記事を参考にさせていただきました。
https://digitalidentity.co.jp/blog/seo/schema-org/structured-data.html

構造化テストツール
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

schema.org の必須プロパティーに関する記事
https://www.suzukikenichi.com/blog/schema-org-articles-for-amp/

wordpress構造化データを動的に出力する
https://hirashimatakumi.com/blog/3192.html

構造化データの禁止事項
https://www.webdesignleaves.com/pr/html/amp_01.html

主なリッチリザルト
https://www.allegro-inc.com/seo/rich-snipet-schema-markup/#index_id3