株式会社サフィックス

  1. TOP  
  2. BLOG  
  3. フロントエンドチーム  

BLOG

株式会社サフィックス STAFF BLOG

予ing

弊社スタッフが更新するブログです。

gulp4.png

gulpでv3からv4にバージョンアップし、gulpを起動するまでの流れです。

▼gulp v3を削除し、v4をインストールする

インストールされているgulp v3を削除してgulp v4をインストールします。
私はバージョン指定で4.0.2を選択しています。

npm uninstall --save-dev gulp
npm i --save-dev gulp@4.0.2

▼このままgulpを起動するとエラーがでる

インストールできて起動してみると↓のような結果に。

$ gulp
assert.js:350
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\Users\自分のディレクトリ\html\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\Users\自分のディレクトリ\html\node_modules\undertaker\lib\task.js:13:8)
    at Object. (C:\Users\自分のディレクトリ\html\gulpfile.js:136:8)
    at Object. (C:\Users\自分のディレクトリ\html\gulpfile.js:138:4)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

いきなり壁が立ちはだかります。何がなんだかよくわかりません。

▼エラー文を検索してみた

"AssertionError [ERR_ASSERTION]"をキーワードにして検索しました。

たくさん検索結果出ましたね。
私が修正で必要な箇所は以下でした。

  • gulp.taskの引数の変更
  • gulp.watchの引数の変更

記述方法が違ってたようです。まぁわかるわけない。

▼gulp.watchの引数の変更

gulpfileがcoffee scriptで記述されてることでcoffee scriptのgulpfileをコンパイルしてgulpfile.jsを出力しなければならず。
gulpfile.jsとgulpfile.coffeeそれぞれの書き方が下記のようになりました。

[gulpfile.js]

修正前 v3

gulp.watch('src/ejs/**/*.ejs', ['ejs']);

修正後 v4

gulp.watch('src/ejs/**/*.ejs', gulp.task('ejs'));

[gulpfile.cofee]

修正前 v3

gulp.watch 'src/ejs/**/*.ejs', ['ejs']

修正後 v4

gulp.watch 'src/ejs/**/*.ejs', gulp.task('ejs')

coffee scriptの場合、gulp.watchの後に括弧いらないみたいですけど、なんか不安というか馴染めないです。

▼gulp.taskの引数の変更

taskの箇所の修正点は以下になります。

[gulpfile.js]

修正前 v3

gulp.task('default', ['watch', 'browserSync']);

修正前 v4

gulp.task('default', gulp.series(gulp.parallel('watch', 'browserSync')));

[gulpfile.cofee]

修正後 v3

gulp.task 'default', ['watch','browserSync']

修正後 v4

gulp.task 'default', gulp.series(gulp.parallel('watch', 'browserSync'))

他の解説サイトで検索しましたところ、seriesが直列処理で、parallelが並列処理となっているようです。
以下、引用になります。

直列処理はタスクを1つずつ順番に処理していくので、順番を明確にしたい時に使用します。逆にparallelは並列処理で、タスクを同時に処理していきます。

記述の修正後、gulp v4を起動することができました。
v3からv4にあげたことでどのような利点があるか実感できておりませんが。
以上、バージョンアップからの導入までの流れでした。

chromium_edge.png

Google Chromeの本家がChromiumというそうで。

[Chromium]

https://ja.wikipedia.org/wiki/Chromium

そのChromiumをベースにしたEdgeが2020年1月リリースというニュースを見ました。

[Chromium Edge]

https://www.microsoftedgeinsider.com/ja-jp/

ロゴが新しくなり、心機一転って感じが出てますね。

これでようやくコーディングでIEを意識しなくてもいいのかな、と思ってたのですがそうでもなさそうです。

私がIEで真っ先に思い出すのがe-TaxというWebサイトなんですが、申告・納税ができるシステムで確定申告の時期になるとかなりお世話になります。

凄く便利なe-Taxですが、何故か"Windows10でシステムを使う場合、IE11のみ利用可能"と書いてありました。

こういう重要なポジションのサイトがIE推奨である限り、IEは生き残り続けるでしょうね。

レンダリングエンジンが統一されればcss3もベンダープレフィックス無しで使えるプロパティが多くなって、
ハックを使わずにすむようになったりいいことづくめなんですが、ほんと思うようにいかないですね。

02.jpg

* Хиймэл оюун ухааны түүх
Анх "Хиймэл оюун ухаан" хэмээх нэр томьёог Жон Маккарти 1955 онд өөрийн бүтээлдээ ашиглаж, "ухаант машин техник бүтээх онолын болон инженерийн шинжлэх ухаан" гэж тодорхойлжээ.

* Хиймэл оюун гэж юу вэ?
Хиймэл оюун (Artificial Intelligence, AI) нь компьютерын програм хангамжаар бүтээгдсэн хүний сэтгэхүйг дууриалгасан ба бараг ижил түвшинд хүргэсэн технологийн төрөл ба аливаа хүний хийдэг үйл ажиллагааг удирдахад зориулагддаг болно.
Хиймэл оюун нь өөрийгөө хөгжүүлж байдаг программ хангамжийн төгс программ юм. Бид бүхэн хиймэл оюуныг роботоор төсөөлж болно. Гэхдээ өнөөгийн робот бол зөвхөн тухайн зохиогчийн бичигдсэн алгоритмын дарааллаар ажилладаг билээ. Мөн өнөөгийн компьютер тоглоомууд нь үүний тод жишээ юм. Хэрэв бид төгс хиймэл оюуныг зохион бүтээх аваас хүн төрөлхтөн өөрсдийнхөө бүтээсэн зүйлд устаж үгүй болох магадлалтай. Хиймэл оюунд байвал зохих чадварууд:
1. Өөрт дүн шинжилгээ хийж, хариултыг өөрийнхөөр илэрхийлдэг байх.
2. Өөрийн алдааг олж засварладаг
3. Хүний сэтгэхүйгээс илүү давсныг сэтгэх

* Хиймэл оюун ухаан хэрхэн ажилладаг вэ?
Хиймэл оюун ухаант машинд орж ирсэн өгөгдөлд дүн шинжилгээ хийж хариу үзүүлэх явдал юм. Жишээлбэл: Микрофон, Камер, Мэдрэгчээс хүлээн авч буй дүрслэл болон дуу авиа, мэдрэмж зэрэг нь хиймэл оюунт машины хувьд оролт буюу өгөгдөл бөгөөд дүрс болон дуу авиа гэх зэрэгт дүн шинжилгээ хийн нөхцөл байдлыг мэдэрч үүндээ тохирсон үр дүн үзүүлэх явдал юм.

* Хиймэл оюун ухааны хэрэглээ
2011 онд АНУ-д Ай Би Эм корпораци телевизийн асуулт хариултын шоунд зориулж, Ватсон нэртэй 40ш энгийн комьпютерыг холбон супер хиймэл оюуны лавлах бүтээж, дотор нь олон мянган ном, бүх төрлийн нэвтэрхий толь, Википедиаг багтааж хүмүүстэй өрсөлдүүлэхэд хүнийг маш хялбархан ялжээ. 2014 оны байдлаар Ватсоныг эрүүл мэндийн салбарт идэвхтэй нэвтрүүлж, эмч, сувилагчид найдвартай лавлах/зөвлөхөөр ажиллуулж эхлэв. Слоан-Кэттэрингийн Хорт хавдар эмчлэх төв дээр сувилагчдын 90% нь Ватсоны зөвлөлгөө заавар дор ажиллаж эхэлжээ.

03.jpg

* Давуу тал болон сул тал
Хиймэл оюун ухааныг хөгжүүлснээр хүний үйл ажиллагааг хөнгөвчлөхийн зэрэгцээ бүхий л салбарт хурдтай хөгжих нөхцөл байдал үүсч бий болох юм. Гэхдээ хиймэл оюун ухаан өөрөө сурч танин мэдэж ямар нэгэн үр дүнг өөрийн сурсан мэдсэн нөхцөл байдал дээр тулгуурлан хүнээс хараат хариу үйлдэл үзүүлдэг болвол ирээдүйн зөгнөлт хиймэл оюун ухааны киноны бодит биелэл болох аюул байгаа юм.
Жишээлбэл:
Энэ онд фэйсбүүкийн үндэслэгч Марк Зукерберг хиймэл оюун ухааныг ашиглан хүний хэлээр харилцан яриа үүсгэх зохиомол чадварыг танилцуулсан. Тэгвэл фэйсбүүкийн харилцан яриаг хөгжүүлэх хэлтсийн судлаачид тус хиймэл оюун ухаан хүнд ойлгогдохгүй шинэ хэлээр системээ хөгжүүлж эхлээд байсныг илрүүлж, системээс салгажээ. "Фэйсбүүк ийм төрлийн хиймэл оюун ухааныг нэвтрүүлэх нь маш аюултай алхам" гэж "Тэсла" компаний CEO Элон Маск буруутгажээ. "Эхлээд өөрийн системийн хэл хөгжүүлж байгаа юм бол, цаашид олон улсын сүлжээнд нэвтэрч мэдээлэл дамжуулахыг үгүйсгэхгүй" гэж тэрээр Tech Times сайтад мэдээлжээ. Нийгмийн сүлжээн дэх хамгийн том медиа болох фэйсбүүк хиймэл оюун ухааныг чат буюу харилцан ярианы системдээ нэвтрүүлэхээр ажиллаад удаж байгаа юм. Тэд үүнийг ашиглан мэдээлэл харилцааны салбарын үйл ажиллагаагаа хурдасгах гэсэн боловч саяхан уг систем удирдлагаа алдаж, систем бие даан үйлдэл хийж, өөрийн хэлийг хөгжүүлээд байгааг тэд хүчингүй болгосон гэж Марк Зукерберг онцолжээ. Уг систем үйлдлийн төхөөрөмжид суулгагдсан англи хэлээр биш, англи үсэг ашигласан ч хүнд ойлгогдохооргүй хэлээр бусад сүлжээнд нэвтэрч эхэлсэн байна. "Энэ ердөө л хөгжлийн шатандаа явж байна. Гэтэл тус хиймэл оюун ухааныг ертөнцийн төгсгөл гэж үзээд байгаа хүмүүсийг үнэхээр ойлгож чадахгүй нь" гэж Зукерберг үзжээ. Харин түүний өрсөлдөгч Маск хариу мэдэгдэн Зукерберг хиймэл оюун ухааныг дутуу үнэлж байгааг дурьдаад "Apple"-ийн үүсгэн байгуулагч Стив Жобс ч мөн амьд ахуй цагтаа хиймэл оюун ухаанд болгоомжтой хандахыг анхааруулж байсныг сануулсан байна. "Профессор Стивен Хокинг хиймэл оюун ухаан хэт хөгжсөнөөр хүн төрөлхтний биологийн хувьсал удаашрах аюултай гэсэн санааг дэвшүүлсэн. Хиймэл оюун ухаан шинэ түвшинд хүрч чадаж байгаа нь ч бүх удирдлагыг хиймэл оюун ухаанд даатгах нь тун хариуцлагагүй алхам гэж тэрээр үгүйсгэжээ.

html5.png

最近から自分がやってきたことを教える立場になってきて、 昔htmlで意味してたタグが現在では違うっていうのを再確認しました。

「iタグというのは気持ちなどを表すときに使うんです」と教えたときに
「あれ?イタリックではないんですか?」と聞かれ

以前はそうだったなぁと。

smallタグっていうのもいつの間にか変化してるんですよね。

以前はテキストを小さく表示するだけのものだったんですが
今は補足に使われるタグになっています。

この変化でasideが少し意味が近くて戸惑います。
html5で登場したasideも補足に使われるタグなので。

emタグもリファレンスでの説明自体があいまいです。
strongタグと同じように強調するポイントで囲むんですけどemの方が基本ゆるやかで、
私は使わない方法ですが、入れ子にすると強調具合が強まっていくというのもあるみたいです。

html5になってから正解が無い表現が多くなってきたので
w3c validatorで合格しても本文として成り立ってるか微妙なところがありそうです。

復習して精進しなきゃですね。

calendar.png

どうも、フロントエンドチームの者です。
自分のやりたいことがすんなり通じなかったことを載せます。

設定準備

phpからMTの変数に値渡しが可能なのか試しました。
例えばphpからjavascriptなら

var $a = "<? php echo $b; ?>;";

これだけで変数$bの内容を$aへ代入できます。
このような書き方がMTタグで通じるかもしれないと思い代入してみました。

<mt:SetVar name="a" value="<?php echo $b; ?>">

この書き方で再構築し、表示してみたところ数値が入っていたので次は日付でやってみます。

$i = 1;
$month = "201912";
$b = date('Ym', strtotime($month . '+' . $i .' month'));

西暦と月を単位無しで繋げた単純な5桁の数字を出力しています。
これで変数$bの値を先ほどのSetVarで格納し、値を出力すると「202001」のようにでました。
2019年12月から2020年1月になってたので成功です。

で、ここから本題。

MTContentCalendarを使う

一か月分のカレンダーを表示するブロックタグです。MT7からできたタグらしいです。

https://www.movabletype.jp/documentation/appendices/tags/contentcalendar.html

今までのバージョンだとMTCalendarというタグはあったようですが
MT7からコンテンツタイプという機能が追加されたことで、コンテンツタイプ専用のカレンダータグで用意されたのだと思われます。

使い方に載ってる部分を抜粋すると↓のようになっております。

<mt:ContentCalendar month="201710" content_type="イベント・セミナー" date_field="開催日時">

形式はYYYYMMです。この桁数から外れた書式だと再構築した時点でエラーが返ってきます。
この形式に従い、先ほどphpで準備した日付を入れて実行結果を得るのが目的です。
↓のように書きました。

<mt:ContentCalendar month="<?php echo $b; ?>" content_type="イベント・セミナー" date_field="開催日時">

結果は・・・エラーでした。再構築すらできません。
「monthモディファイアはYYYYMMでなければいけません。」とか言われました。
仮に通ってた場合、イメージとしては↓になってるはずです。

<mt:ContentCalendar month="202001" content_type="イベント・セミナー" date_field="開催日時">

結局わからずphpで値の受け渡しをせずにmonthモディファイアを通せるようにしました。
日付に関する部分は結構苦手で、その苦手な面が表に出てきた出来事でした。。

expand_less
Copyright©2011-2020Suffix, Inc.AllRightsReserved.