- 1. TODOリスト
- 1.1. JavaScriptのコールスタックとホイスティングについて
- 1.2. EdgeJsをC#側のソースコードからデバッグする
- 1.3. あなたの知らないディズニーキャラクターの世界
- 1.4. LINE Botでお菓子好きによる お菓子好きのためのガチャを作成してみた
- 1.5. 関数定義と再帰関数
- 1.6. 疑似彼氏、作りました。
- 1.7. ジブリAPIでLINEBotを作ってみた
- 1.8. w2ui(grid)のデータソースとしてSeaside(Pharo)を使う
- 1.9. InDesign スクリプト テキストファイルから索引
- 1.10. InDesign スクリプト 索引の項目（見出し）を全て削除
- 1.11. InDesign スクリプト 索引の参照の重複を解消
- 1.12. 睡蓮花のBigをBigにするブックマークレット
- 1.13. Javascript オブジェクト内の短縮型メソッド定義
- 1.14. 【JavaScript】関数とオブジェクト④ コールバック関数とthis
ニューヨークを拠点とするRevamp AgencyがWordPressショップからJamstackに切り替えた理由【前半】
Revamp AgencyがWordPressショップからJamstackに移行し、読み込みが速く、完全にカスタマイズ可能なウェブサイトで顧客を喜ばせるために、Bejamasがどのような支援をしたのかをお話いたします。
著者：Denis Kostrzewa 2019年1月23日
原文：https://bejamas.io/blog/revamp-wordpress-to-jamstack/
2017年の秋、Revamp Agencyの創業者兼リード開発者であるJames Weisは、クライアントのウェブサイトの読み込みを速くする方法を探していました。同年7月、Googleはモバイル端末向けのGoogle検索エンジン結果ページでの順位決定の要因として、サイトのロード時間や全体的なスピードを正式に含めることを発表しました。
WebStorageにバイナリデータを保存する
こんにちわ。
皆さんは **Web Storage API** を使っていますか？
私は最近使い始めたのですが、個人的に便利だと思ったバイナリ保存について紹介します。
# おさらい
– [Web Storage API – MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API)割と昔からある技術なのでざっくりおさらいすると、Cookieより大容量かつサーバー不要、IndexedDBより小容量で簡素、という手軽に使えるブラウザ内ストレージです。
仕様は以下の通りです。
– 最大容量 … 約10MB
– 保存領域の隔離 … オリジン毎
– ストア方式 … Key-Valueタイプ
– データ型 … `string` のみ
– WebWorker … 非対応ライフサイクルに応じて2つのAPIが用意されています。
– `SessionStorage` … ウィンドウを閉じると初期化
– `LocalStorage` … 明示的に削除するまで永続仕様については、どち
【JavaScript】関数とオブジェクト⑤ bindとthis
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/e8798dbf47ddf02c7577
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.前回のおさらい““javascript
window.name = ‘John’;const person = {
name: ‘Tom’,
hello: function() {
console.log(‘Hello ‘ + this.name);
}
}person.hello();
function fn(ref){
ref();
}
// personのhelloメソッドをコールバック関数として渡した際に
// refを実行した際のthisのオブジェクト先がwindowオブジェクトになった
fn(pe
javascript演習 5日目/３０日
覚えたこと
cssのflex
flex-grow:伸びる率（デフォルト0）
flex-shrink:縮む率（デフォルト1）“`css
displat:flex;
/* flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
“`いつものようにスクリプトでクラスをつけて動かす
“`javascript
function toggleActive(e){
if(e.propertyName.includes(‘flex’)){
this.classList.toggle(‘open-active’);
}
}panels.forEach(panel => panel.addEventListener(‘transitionend’ , toggleActive))
“`
世界の偉人たちが残した名言と戯れる
##知らないことは恥ではない。知っているふりや「まあいいや」と知ろうとしないことが恥なのだ。（ホリエモン）
今の私に刺さる:cupid:名言です。堀江さん良いこと言いますね。
落ち込んだとき、人生の迷ったとき、暇なとき、偉人たちの名言を調べたりしますよね。というわけで、人生を導いてくれる名言BOTを作成しました。
##LINE Bot 実演
名言を含む言葉を投げかけることでランダムで名言を返してくれます。
収録数はおよそ3000！
名言だけでは何なので、偉人たちの画像とプロフィールもつけています。
この名言が生まれた時の歴史的な背景に思いを馳せてはいかがでしょうか。名言BOTできたよー#protoout#LINEBot #名言 pic.twitter.com/phuBiou91K
— tishiyama (@tishiyamaa) October 19, 2021
・・・動画が暗い＆地味すぎる。なぜ白黒写真の偉人を引いてしまうのか。
せっかくなのでお気に入りがみつかるまでリスエストし続けてみた結果、
イチロー（SSR）ゲット
レアリティは自分の心が決める。
“`
まず最初に型
JavaScriptのコールスタックとホイスティングについて
##コールスタック
言葉の定義としては実行中のコードがたどってきたコンテキストの積み重ねになります。“`JS:JS
function a() {
}
function b() {
a();
}
function c() {
b();
}c();
“`
この関数を実行した際にはまず、グローバルコンテキストが生成されます。次にｃの関数が呼ばれる際にｃの関数コンテキストが生成されます。次にｂの関数が呼ばれるのでｂの関数コンテキストが生成され、同様にaのコンテキストが生成されます。イラストで確認しましょう。
実行中のコンテキストは常にコールスタックの一番上のコードになります。aのコードの実行が終了するとaは消滅し、次にb,c,グローバルの処理まで進み最後には全て消滅します。
EdgeJsをC#側のソースコードからデバッグする
###EdgeJsをC#側のソースコードからデバッグする
####EdgeJs処理の流れ
| 場所 | 処理 | 処理2
|:———–|:————|:————|
| JS側 |require(‘edge-js’); を呼ぶ |edge-jsがC#側のbootstrapを呼ぶ|
| C#側 |bootstrapが呼ばれる ||
| C#側 |bootstrapが参照しているEdgeCompiler.Dllがbootstrap内にないなら | Edge.js.CSharp.csprojを呼びbootstrap内にEdgeCompiler.Dllがを生成する|
| C#側 |bootstrapが参照しているEdgeCompiler.Dllがbootstrap内にあるなら | bootstrap内のEdgeCompiler.Dllが参照される|###node_modulesに入っているC#のプロジェクトをRiderに追加する
| プロジェクト名
あなたの知らないディズニーキャラクターの世界
#君の名は
※今回、投稿主の重度のヲタクぶりによりDヲタ[^1]用語が頻出しています。注釈をつけていますのでご活用ください。突然ですが、投稿主はこう見えて大のディズニー好きでございます。
アイコンも実はミニーちゃんカチューシャです。
現在のようにチケット入手が困難になる以前は月に1回はパーク[^2]に行っていました。
（ディズニー好きにしては少ない方です。）
そんなディズニー大好きな私ですが、パークでフリグリ[^3]に遭遇したとき
「あれ？あのキャラクターなんていう名前だっけ……？」となるときがあります。
パークを訪れているとき以外でも、イラストで見たとき、金曜ロードショーに登場したとき、などなど……。
なぜか思い出せないのです。こんなにディズニー愛に溢れているというのに……！突然やってくる「あれ？なんだっけ？」のために、普段からディズニーキャラクターについて学んでおく必要があるのです。
そしていつの日か「なんでそんな脇役キャラクターの名前まで知ってるの？！」
と驚いてもらえるように、あなたも一日一回ディズニーキャラクターを覚え
LINE Botでお菓子好きによる お菓子好きのためのガチャを作成してみた
#お菓子好きですか？
私はお菓子が好きです。
クッキー、チョコレート、ケーキ、お団子・・・あぁ幸せ:two_hearts:
世の中には、期間限定や地域限定など様々なお菓子があり、普段の生活ではお目にかかるのが難しいお菓子もあり、お菓子ラバーとしては残念な状態:disappointed_relieved:
まだ見ぬお菓子に出会うため、無課金で遊べるお菓子ガチャを作成して妄想でのお菓子ライフを充実させましょう！#お菓子ガチャ（LINE Bot）
LINE Botでお菓子の種類（チョコとか）を入力すると、ランダムで返答してくれるBotを作成しました。お菓子好きには堪らないガチャが出来た#protoout pic.twitter.com/bcb
関数定義と再帰関数
# 関数宣言
**関数**とは、JavaScriptおいてオブジェクトの一種であり、同じ処理を1つにまとめて定義したもの。関数を定義することで、同じ処理を繰り返し記述する必要がなくなる。
さらに、オブジェクトのプロパティである関数を**メソッド**と呼ぶ。JavaScriptにおいて、機能的な違いはないが分かりやすくするため呼び方を区別することがある。“`javascript:関数宣言
function <関数名> ( 引数 ){
// 処理内容
return <返り値>
}
“`#関数式
**関数式**とは、関数を変数値として変数へ代入できる式のこと。
関数宣言と違い、変数名で参照可能なため、function()の後の関数名は省略することができる。
この関数名を持たない関数を**無名関数**（匿名関数）という。“`javascript:関数式
const <変数名> = function() {
// 処理内容
return <返り値>
}
“`# 再帰関数
**再帰関数**とは、関数の処理の中で自分自身を呼び出す関数のこと。
疑似彼氏、作りました。
# 彼氏を作ろう
何かと疲れている現代人。私もまたそのひとりである。
ちょっとしたときめきと癒しが欲しい。仕事帰りに誰かに「今日も一日頑張ったね」と優しく言われたい。私のどうでもいい話に「うんうん」と相槌を打ってくれるだけでいい。
そうだ、**LINE Botで彼氏を作ろう。**# どんな彼氏？
**優しい言葉をかけてくれる**のは大前提で、**今日の天気**も教えてほしい。（よく傘を忘れてびしょ濡れになるので）
ついでに天気によって会話パターンもあるとよい。
ということで、やりたいことは以下の2点。* 天気予報（天気によって返事のパターンあり）
* ある程度キャッチボールのある会話# 環境
Visual Studio Code 1.61.0
Node.js 7.24.0
ngrok# 彼氏、できました
実際に作って動かしてみたものがこちら。ちゃんとそれっぽく会話をしている pic.twitter.com/d6PJeR85xm
— 7mst (@nnmshita) October 19, 2021
はじめまして、彼氏の**「タケシ(仮)」**（LINE Bot名）。
「タケシはきっとラーメン好き」という無駄な設
ジブリAPIでLINEBotを作ってみた
#ジブリ作品は好きですか？
最近、自分が好きだったアニメが〇〇周年を迎えた的なニュースをよく目にします:thinking:
あの頃のアニメは名作ばっかだなぁなんておっさんじみたことを思うわけですが、コアなものを話題に出すと「ナニソレ」って言われたりして、ちょっと寂しかったりするものです。でも、**ジブリ作品のタイトルであれば、みなさんもいくつかご存じではないでしょうか。**
スタジオジブリは日本が誇るアニメ制作会社のひとつ。そこに異論はないかと思います。
**今回、ジブリAPIなるものを見つけたので、それを使ってLINEBotを作ってみました。**[Studio Ghibli API (v1.0.1)](https://ghibliapi.herokuapp.com/)
なお、僕はジブリヲタではなく雑食系のアニヲタです。あしからず:raised_hand:
#用途
・ジブリヲタへ 監督・年代クイズなんかに使ってやってください。
画像を用いた
w2ui(grid)のデータソースとしてSeaside(Pharo)を使う
## はじめに
w2uiのgridはスクロールに伴いオンデマンドでサーバーからデータを取得することで無限スクロールを可能とするグリッドライブラリです。
ここでは、w2ui(grid)のデータソースとしてSeaside(Pharo)を使うサンプルを紹介します。## 動作した環境
|項目|内容|
|—|—|
|サーバー|Pharo8.0.0＋seaside3||
|クライアント|Google Chrome|
|javascriptライブラリ|w2ui 1.5|## ソースコード
※稼働中のプログラムの一部をコピペしただけで、このサンプルが動作するかの検証は行っていません。
# javascript
“`javascript:javascriptサンプル
$(function() {
$(“#grid”).w2grid({
name: “grid”,
limit: 50,
url: “dummy”,
recid: “id”,
columns: [
{ field
InDesign スクリプト テキストファイルから索引
テキストファイルから索引を作成するスクリプトは、これで良いのかな・・・？
~~~JavaScript
/*
更新 2021/010/19
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “テキストファイルから索引”;//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function () {// 分割文字
var splitText = “,”;// ダイアログ
var dialogueFlg = confirm(“テキストファイルからアクティブドキュメントに索引の見出しと参照を作成します。”
+ “\r” + “見出しと参照の座標が重複している場合は参照を追加しません。”
+ “\r\r” + “テキストファイルの例”
+ “\r” + “索引項目,読み”
+ “\r” + “猫,ねこ”
+ “\r” + “パンダ”,””, scriptName);// Noの場合
InDesign スクリプト 索引の項目（見出し）を全て削除
索引の項目（見出し）を全て削除するスクリプトは、これで良いのかな・・・？
~~~JavaScript
/*
更新 2021/010/19
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “索引の項目（見出し）を全て削除”;//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){// ダイアログ
var dialogueFlg = confirm(“アクティブドキュメントの索引の項目（見出し）を全て削除します。”,””, scriptName);// Noの場合
if (dialogueFlg == false) {// 終了
exit();
}// 結果用
var number = 0;// 索引の項目（見出し）の数だけ繰り返す
for(var i = app.activeDocument.indexes.firstIte
InDesign スクリプト 索引の参照の重複を解消
索引の参照の重複を解消するスクリプトは、これで良いのかな・・・？
~~~JavaScript
/*
更新 2021/010/19
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “索引の参照の重複を解消”;//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){// ダイアログ
var dialogueFlg = confirm(“アクティブドキュメントの索引の参照の重複を解消します。”,””, scriptName);// Noの場合
if (dialogueFlg == false) {// 終了
exit();
}// 結果用
var number = 0;// 索引の項目（見出し）の数だけ繰り返す
for(var i = 0; i < app.activeDocument.indexes.firstItem().t
睡蓮花のBigをBigにするブックマークレット
## 背景
https://togetter.com/li/1789992## スクリプト
“`javascript
javascript:(function(){var a = document.querySelector(“#left > div > section > section:nth-child(2) > div.contents_box.mb40 > div > div > article > div > div > p”);a.innerHTML = a.innerHTML.replaceAll(“＜”, “<");})() ``` 上記をお気に入り追加して、 https://music.oricon.co.jp/php/lyrics/LyricsDisp.php?music=61783 を開いて実行すれば、砂浜 big Wave!
Javascript オブジェクト内の短縮型メソッド定義
## 経緯
Reactのコードを読んでいると以下のようなコードがあり、少し読み方に躓いたので備忘録として残します。
“`javascript
const mapDispatchToProps = dispatch => ({
onMount(categoryId){
dispatch(actions.fetchRanking(categoryId))
},
onUpdate(categoryId){
dispatch(actions.fetchRanking(categoryId))
}
})
“`書き換えると以下のようになります。
“`javascript
var obj = {
onMount(categoryId){
dispatch(actions.fetchRanking(categoryId))
},
onUpdate(categoryId){
dispatch(actions.fetchRanking(categoryId))
}
}const mapDispatchToProps =
【JavaScript】関数とオブジェクト④ コールバック関数とthis
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/a6b6de600305fc61dfa1
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.コールバック関数とthis####前回までのおさらい
““javascript
window.name = ‘John’;// personというオブジェクトを定義
const person = {
name: ‘Tom’,
hello: function() {
console.log(‘Hello ‘ + this.name);
}
}
// ”HelloTom”と出力される
person.hello();
// オブジェクトのメソッドとして使った場合、thisは呼び出し元のオブジェクトを参照する
“““`#
