- 1. 二画面ファイラーを作った。
- 2. indesign スクリプト ページ番号を取得して属性に書き込む（構造の選択要素のテキストフレームから）
- 3. PlayCanvasのAnim State Graph
- 4. TypeScript基礎まとめ
- 5. JavaScriptで指定日時までのカウントダウンタイマー作成
- 6. DockerでTypeScript×Node.js×Expressの環境構築
- 7. iPhoneでスクレイピング（ショートカットアプリ）
- 8. 【初心者向け】CSS JavaScript で虫眼鏡を実装する方法
- 9. 【Laravel】【jQuery】未経験から入社して約一年経ったので、1か月間でちょっとしたWEBアプリケーションを作ってみた
- 10. 雰囲気で書かないESLintの設定ファイル
- 11. PWAでお手軽にクロスプラットフォームでテキスト共有
- 12. 久々にJavaScriptを触ってみたら…letってなに？
- 13. リンクタグでページに遷移してもreloadしないとJavaScriptのイベントが発火しない
- 14. 【JavaScript】functionとアロー関数のthisの違い
- 15. ほぼ全部入りなのにほとんどコーディングせず完成する超簡単室温監視システム（ハムスター用）
- 16. Twitterを前回読んだところからの更新分だけ読めるようにする。
- 17. AWS Amplifyでログインフォームを実装する
- 18. javascript: getOwnPropertyNames
- 19. 把玩javascript AST
- 20. 備忘録 javascript URLでの条件分岐
二画面ファイラーを作った。
15 年以上前、まだ Windows ユーザーだったころ、二画面ファイラーを使っていました。
ファイラーとは、コピーや移動、リネームなど一連のファイル操作を行うソフトウェアのことで、いわゆるファイルマネージャー、Mac で言うところの Finder、Windows での Explorer にあたります。検索しても出てこないので、この文脈でのファイラーという単語の使い方はもしかしたら日本独特なのかもしれません。
二画面ファイラーは左右二画面を同時表示してファイル操作するという強い特徴があり、使い方によっては業務効率をかなり上げることができます。私が使っていたのは [あふ](http://akt.d.dooo.jp/akt_afxw.html) というソフトウェアで、その世界では知らぬ者はいない定番のファイラーでした。久しぶりに調べたところまだ健在のようですごく嬉しいです。
以下はコンソールで動かす二画面ファイラー [Midnight Commander](https://midnight-commander.org/) のスクリーンショットです。見た目は異なれど二画面ファイラーはど
indesign スクリプト ページ番号を取得して属性に書き込む（構造の選択要素のテキストフレームから）
構造の選択要素のテキストフレームからページ番号を取得して属性に書き込むスクリプトはこれで良いのかな・・・？
~~~JavaScript
/*
構造の選択要素のテキストフレームからページ番号を取得して属性に書き込む
更新 2021/05/31
*/// アプリ指定
#target “indesign”;// スクリプト名
var scriptName = “ページ番号を取得して属性に書き込む（構造の選択要素のテキストフレームから）”;//スクリプト動作指定（一つのアンドゥ履歴にする及びアンドゥ名の指定）
app.doScript(function () {// ページ番号を書き込む属性名
var pageNumberAttribute = “pageNumber”;// 書き込み数
var writeNumber = 0;// 日時の情報
var unshapedDate = new Date();// 日時の情報の整形
var shapedDate = unshapedDate.getFull
PlayCanvasのAnim State Graph
今まで、PlayCanvasではアニメーションを制御するのに本格的なスクリプトを書く必要がありました。
このAnimStateGraphはノードベースでアニメーションを再生することが可能です。切り替え用のスクリプトをちょっと書くだけで、簡単に複数のアニメーションを切り替えられます。
#アニメーションの切り替え
###必要な3Dデータ
https://launch.playcanvas.com/1138588?debug=true
走る、ジャンプ、歩くのアニメーションを切り替えられます。用意するデータはアイドリング、走る、ジャンプ、歩くの4つのアニメーション付きFBXデータです。
###Anim State Graphの作成
からDocker Desktopをインストールします。
Mac/Windows/Linuxに対応しています。### VSCodeのインストール
[こちら](https://code.visualstudio.com/download)からVSCodeをインストールします。
他のエディタでも問題ないですが、諸々使いやすいのでおススメします。
MacやLinuxをお使いの方であればvimでも問題ありません。# Node.js×Expressの環境構築
以下、ホスト上の作業は :file_folder: 、Dockerコンテナ上の作業は :
iPhoneでスクレイピング（ショートカットアプリ）
# はじめに
iPhoneにはショートカットと呼ばれるアプリがあり、これを使うとiPhoneで行ういろんな作業を自動化することができます。これでできることの一つにURLを指定してHTTPリクエストを送る機能があり、今回はそのレスポンスをパースする作業を説明してみますまたHTTPリクエストを送るだけでなく、iOSのSafariを開いてそのページで任意のJavascriptを実行することも可能です。この場合はSafari開く部分で操作が必要になるため、完全な自動化はできません
作ったショートカットはオートメーションに設定することで、毎日任意の時刻で自動実行が可能になります
今回はYahooJapanのトップページから主要ニュース一覧を取得するショートカットを作ってみます
– 使用するアプリ
https://apps.apple.com/jp/app/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88/id915249334
– 使用したiOS: 14.6
# HTMLのみをスクレイピングする方法
【初心者向け】CSS JavaScript で虫眼鏡を実装する方法
# これを作るよ！
[画像にマウスをホバーすると拡大するjavascript](https://jsfiddle.net/23to33to43/awht97vc/13/)
虫眼鏡、拡大鏡のような、画像の上にホバーすると画像を拡大させる方法は
~~jQuery等のライブラリはあるけど、素のHTML CSS Javascriptで実装しているのは~~~~検索しても見つからなかったので、今回作ってみました~~
「虫眼鏡 css javascript」 … では見つからなかったのですが
「magnifying glass css javascript」で検索したら普通に見つかりました…..
[How TO – Image Magnifier Glass](https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp)## 対象
+ 虫眼鏡、拡大鏡を素のJavascriptで実装したい人
+ domを取得して、要素を参照、変更、したことがある人
+ タグにonclick=”” を書いたり addEv
【Laravel】【jQuery】未経験から入社して約一年経ったので、1か月間でちょっとしたWEBアプリケーションを作ってみた
#はじめに
当記事を開いていただきありがとうございます。
タイトルの通り、未経験から新卒社員として開発事業部に入社して約一年が経ちました。そこで、学んだことを活かして、一か月間でLaravel、JQueryを用いたちょっとしたWEbアプリアプリケーションを作ってみました。当記事は作ったアプリケーションの紹介と感想をまとめたものです。#投稿者の情報
・2020年4月に未経験から新卒社員として開発事業部に入社
・入社後は主にサーバー側の実装を担当
・Laravel,jQueryは案件では少ししか触ったことがない
・2020年10月、AWSアソシエイトの資格を取得し、以降2件ほどインフラ構築にチャレンジさせてもらった#公開中のテスト環境
https://view-saurus.com/
！注意！
最低限の機能のみのテスト環境です。予期せぬ不具合が発生する場合があります。予めご了承ください。
テスト環境の出力は一回のみ可能です。
テスト環境についてのご指摘、ご質問を当記事にコメントすることはお控えください。
zipでの出力のため、chromeの場合は出力時に警告が出る場合があります。
雰囲気で書かないESLintの設定ファイル
# この記事が解決する問題
すでに結構いろんな記事が出回っているのですが、あまり設定ごとのピンポイントな説明記事が見当たらなかったので、
この記事では雰囲気でわかってそうだけど実はあまり良くわかっていないオプションのいくつかを私の独断と偏見で選んで解説します。# plugins と extends
いちばん大事な設定ですが、実は一番間違えやすい設定でもあります。 `@typescript-eslint/eslint-plugin` を例にすると、たとえば
“`js:.eslintrc.js
module.exports = {
“plugins”: [“@typescript-eslint”],
“parser”: “@typescript-eslint/parser”,
“rules”: {
…,
},
}
“`と書くこともあればこう書くこともあります。
“`js:.eslintrc.js
module.exports = {
“extends”: [“plugin:@typescript-eslint/recommended”]
PWAでお手軽にクロスプラットフォームでテキスト共有
PWAを使えば、簡単にアプリ化できて、なおかつ通知を受けられるので、今回は、Windows・Android・iPhoneで、テキストを共有するPAWアプリを作成します。（世の中にいろんなツールがありますが、自分で作った方が安心なので。。。）
大した技術は使っていなくて、以下の投稿さえわかれば実装できます。
[PWAを試してみよう](https://qiita.com/poruruba/items/77cbb6448d804e6e996b)
GitHubにもろもろ上げておきました。
poruruba/pwa_notification
https://github.com/poruruba/pwa_notification念のためですが、問題が起こっても責任はとりません。。。
#サーバの立ち上げ
https://github.com/poruruba/pwa_notification
上記から、ZIPをダウンロードして展開します。
“`
> unzip pwa_notification-master.zip
> cd pwa_notification-maste
久々にJavaScriptを触ってみたら…letってなに？
#1.はじめに
Qiitaの更新を２年くらいサボっていました。久々の投稿です。
最近、10年ぶりくらいにJavaScriptをさわって「あれ？」と思ったことがあるので書き留めておきます。きっとこんな疑問を持つのは古臭い人間だけなので「あー、業界の老人が何か言ってるなー」と思って読んでください。
#2.letってなによ？
とあるAPIをJavaScriptで実行しようと思い、久々にJavaScriptで書かれたサンプルコードを見たら、変数の前に「let」という謎の文字が。あれ？10年前は「var」だったぞ？と思い調べてみました。#3.letとvarの違い
「let」はES2015から出てきたそうです。その際に、同時に「const」というやつも出てきたそうです。そりゃ知らないわけだ。| 利用法 |var|let |const |
|:———–|:————:|:————:|:————:|
| 宣言したブロック外でも使える |〇 |× |× |
| 再宣言できる
リンクタグでページに遷移してもreloadしないとJavaScriptのイベントが発火しない
##解決したい問題
###“やタグ“でページに遷移してもreloadしないとJavaScriptのイベントが発火しない ##エラーの仮説
turbolinksが邪魔してそう…##turbolinksってなんだっけ？
turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgem。Rails4からはデフォルト。##原因
###data-turbolinkが働いて遷移したページではイベントが発火しない事があるらしい.##解決策
###“link_to“には“data: {“turbolinks”=>false}“を追加
###“タグ“には “data-turbolinks=”false”“を追加####data-turbolinkをオフにするために、遷移元のリンクタグにdata属性を追加！
【JavaScript】functionとアロー関数のthisの違い
ダメな例
“`
document.addEventListener(“turbolinks:load”, () => {
$(‘#post_image’).on(‘change’, () => {
var size_in_megabytes = this.files[0].size/1024/1024;
if (size_in_megabytes > 5){
alert(“アップロード可能なファイルサイズは5MBまでです。より小さいサイズのファイルを選んでください。”);
$(‘#post_image’).val(“”);
}
});
});
“`このエラーになる
“`
image_size.js:4 Uncaught TypeError: Cannot read property ‘0’ of undefined
at HTMLInputElement.(image_size.js:4)
“`###“() => {}“内のthisはaddEv
ほぼ全部入りなのにほとんどコーディングせず完成する超簡単室温監視システム（ハムスター用）
だいぶ暑くなってまいりまして、うちにおりますハムちゃんズもすこしへばり気味です。
ハムスターにとって快適な温度は20度～26度と言われていて、日本の夏は（冬も）苦手です。そんなハムちゃんに快適に過ごしてもらいたい！ まして、**熱中症になんて絶対にならない**ように室温（小屋温？）管理はしっかり行いたいところです。室温計はエアコンとかに備わってるよ？と思いがちですが、**我々の生活空間とハム小屋は意外と環境が異なる**もの。しっかり把握することが肝要です。そこで今回は**ハム小屋気温監視システム**をいろいろな既存サービスをつなぎ合わせることで「**ほとんどコーディングせず**」開発してみたいと思います。
##こんな感じになります
* ハム小屋の室温はobnizで計測します。写真はイメージ。ハムちゃんがガジガジしない
Twitterを前回読んだところからの更新分だけ読めるようにする。
#解決したい課題
プロトアウトスタジオで一緒にがんばっているメンバーがTwitterに頻繁に投稿しています。
そこに以下の課題があります。
1.フォロー人数が多いのでメンバーのツイートを見逃してしまうことがある。
2.Twitterが人気のあるツイート順に並べるので読んでいて意味不明な時がある。
3.数日読めなかった時に、前回どこまで読んだか探す時間がもったいない。1.と2.はTwitter公式のリスト機能や表示順の設定変更でなんとかなるので、3.を解決します。
#解決方法
Twitterのリストが更新されたことをZapierが検知して、WebhookでGoogle Apps Script（GAS）に飛ばして、スプレッドシートに記入させます。
ツイートのURLも引っ張ってきているので、画像・映像を見たい場合にはリンクから飛べます。運用方法は、スプレッドシートでツイートを読んで、読み終わった内容を消します。
これで次回は、今回読み終わった部分からの続きだけが読めます。
“`shell-session
npm install -g @aws-amplify/cli
“`## ユーザープロファイルの作成
“`sh
amplify configure
“`上記を実行するとブラウザでAWSマネジメントコンソールが開く。
ターミナル上でい
javascript: getOwnPropertyNames
`Object.getOwnPropertyNames`是es5中新增的方法，用来获取对象自身的全部属性名。
“`
function getAllMethods(obj) {
return Object.getOwnPropertyNames(obj).filter(function(property) {
return typeof obj[property] == ‘function’;
});
}console.info(getAllMethods(Math));
// abs acos acosh asin asinh atan atanh atan2 ceil cbrt expm1 clz32 cos cosh
// exp floor fround hypot imul log log1p log2 log10 max min pow random round
// sign sin sqrt tan tanh trunc sinh clamp degrees fscale iaddh isubh imulh
// radians scale
把玩javascript AST
> 
https://github.com/jquery/esprima 从JavaScript源代码形成AST
https://github.com/estools/estraverse 遍历树的节点并修改
https://github.com/estools/escodegen 把修改完的AST再次转化为源代码
—
参考：
https://astexplorer.net/ 神器，竟然还支持 solidity
http://jartto.wang/2018/11/17/about-ast
https://blog.fundebug.com/2019/01/22/how-does-javascript-compile/
https://segmentfault.com/a/1190000017992387
h
備忘録 javascript URLでの条件分岐
location.pathname …… 現在ページURLのパス名を参照する
matchメソッドの使い方
–matchとは、文字列を扱うStringオブジェクトで標準に用意されているメソッド。
matchは、一般的に文字列に含まれている特定の文字を検索したいときに活用します。基本的な使い方は以下の通りです。“`js
const str = 文字列str.match( 検索条件 )
“`
“`rb
if (location.pathname.match(“tweets/new)
“`
