- 1. LINE Messaging APIのアクションを使用したメッセージ送信
- 2. window.openでpdfを別タブで開く方法
- 3. 【Javascript】Truthy | Falsy values（javascriptにおける真偽値について）
- 4. React チュートリアル発展 関数コンポーネント編
- 5. 【個人開発】モックアップ画像を一瞬でつくれるサービスをVue.jsでつくって学んだこと
- 6. 進化した macOS の sips コマンド + JavaScript でお絵描きする
- 7. 【React開発のための復習】JavaScript：オブジェクトと配列の分割代入について
- 8. 練習のためにVue.jsでNatoフォネティックコード暗記帳を作ろうとしたがいまいちの出来だった件
- 9. [phina.js] Shapeの種類について知る
- 10. 仮想通貨のコントラクトアドレスを簡単に取得するWebアプリを作成してみた
- 11. [phina.js] Shapeを移動させる
- 12. Ajaxでバイナリデータを受け取ってimageタグにロードする
- 13. [phina.js] Shapeを拡大・縮小させる
- 14. コロナ太りの俺必見！自分にあったペースで数を読み上げてくれるパーソナルトレーナーアプリを作ったよ。
- 15. [phina.js] Shapeを回転させる
- 16. プリザンターの一覧画面で選択したレコードを送信する
- 17. 正直よくわかっていなくても短時間でそれっぽい地図アプリケーションが作れる
- 18. 【Vue.js】奥さんに喜んでもらうためにオリジナル「レシピ検索アプリ」のプロトタイプ1号を作った【Bootstrap】
- 19. ロンダルキアへの洞窟
- 20. 超初心者が、英語学習を始めたわが子に「英単語カード」をプロトタイプしてみた結果（改善点まとめ）
LINE Messaging APIのアクションを使用したメッセージ送信
# はじめに
はじめまして！パーソルプロセス＆テクノロジー株式会社（以下パーソルP&T）、システムソリューション（SSOL）事業部所属の髙井です。
私はモビリティソリューションデザインチームに所属しており、 __モビリティ（ここでは移動手段全般）に関するサービスを考えたり、アプリを構築したりしております。__
いわゆる__「MaaS」__に取り組んでおります。
私たちが「MaaS」に取り組む中で、__現在活用している、もしくは活用する予定の技術やサービスやとりあえず発信したいこと__などなど、幅広くチームメンバーと共に執筆していきたいと思います。
メンバーごとに違った内容を発信していきますので、お楽しみに！また、「MaaS」について詳しく知りたい方は、チームメンバーの吉田が記事を掲載しておりますので、
ぜひそちらをご覧ください。[「MaaSとは」でたどり着いて欲しい記事 （1/3 前編）](https://note.com/ppt_msdg_maas/n/naae427dbc37c)
[「MaaSとは」でたどり着いて欲しい記事 （2/3 中編）](https://no
window.openでpdfを別タブで開く方法
“`
// 同じタブ内でpdf開く
window.location.href = pdfDownloadUrl;// 別タブでpdf開く
window.open(pdfDownloadUrl, ‘_blank’)
“`###蛇足：vue-test-utilsの記述例
“`
it(‘同じタブ内でpdf開くときのテスト’, async () => {
// window.location.hrefを書き換える
global.window = Object.create(window);
Object.defineProperty(window, ‘location’, {
value: {
href: “”,
},
});// axiosでAPIレスポンス設定、mountなど色々
// 検証
expect(window.location.href).toBe(pdfDownloadUrl)
})it(‘別タブでpdfを開くときのテスト。”, async
【Javascript】Truthy | Falsy values（javascriptにおける真偽値について）
#初めに
javascriptを学ぶ上で基礎的な内容ですが、とても重要なTruthy valuesとFalsy valuesについてまとめてみました。※内容に間違いなどがある場合はご指摘をよろしくお願いします。
# Falsy valuesとは
booleanに変換した際にfalse(偽）になる値のことをFalsy valuesと言います。具体的には「0, ”, undefined, null, NaN, 0n」の６種類があります。# Truthy valuesとは
Falsy valuesでない全ての値がTruthy valuesになります。# Boolean関数を使って試してみる
まずはFalsy valuesをBoolean関数を使ってtrueかfalseかをみてみます。“`javascript
//Falsy values
console.log(Boolean(0));
console.log(Boolean(”));
console.log(Boolean(undefined));
console
React チュートリアル発展 関数コンポーネント編
Reactチュートリアルの、クラスコンポーネントを関数コンポーネントへの置き換えについてまとめます。前回の記事でモジュール化を行った続きです。まだの方は先に確認して頂ければと思います。
https://qiita.com/nishiwaki_ff/items/9305672c82c169e06327## 追加実装の流れ
– 公式チュートリアルのタイムトラベル機能実装まで完了(https://ja.reactjs.org/tutorial/tutorial.html#wrapping-up)
– [モジュール化](https://qiita.com/nishiwaki_ff/items/9305672c82c169e06327)
– 関数コンポーネントに書き換え **⇦この記事**
– 追加課題の実装前回に引き続き関数コンポーネントについて解説します。追加課題については別の記事で解説予定です。
## 関数コンポーネントに置き換え 解説
### ゴールの確認
現状はSquareコンポーネントだけ関数コンポーネントに置き換えできて
【個人開発】モックアップ画像を一瞬でつくれるサービスをVue.jsでつくって学んだこと
# ただ、使ってもらえるものをつくりたい。
冒頭から
欲望を剥き出しにしてしまったことを
お許しください。こんにちは、[@マーティ](https://twitter.com/marty_ojiya) と申します。
東京のデザイン&開発会社の下っ端エンジニアです。このたび、 **モックアップ画像をURLや画像から秒で作れるサービス**をつくりました。
今回はそこから学んだことを書いていきます。
もしよければ最後まで読んでやってください。[Works Thumbnail Generator](https://works-thumbnail-generator.vercel.app/)
## なんでつくったの??
皆さまもご存知の通り
昨今、**駆け出しエンジニアが湧いております。**主にTwitterに生
進化した macOS の sips コマンド + JavaScript でお絵描きする
## `sips` コマンドとは
macOS には標準で `/usr/bin/sips` に画像処理用のコマンドがあります。
ImageMagick などに頼らなくても簡単な画像処理ができるツールとして重宝されています。従来の `sips` コマンドの使い方については Qiita にもいくつか記事が上がっています。
– [Macのターミナルで簡単に画像処理できるsipsの使い方](https://qiita.com/livlea/items/53b755e5067d4ebc5b43)
– [macOS の標準コマンドで Jpeg 画像を PNG に変換するワンライナー](https://qiita.com/KEINOS/items/8bbf7217904ea832e1b4)最近 (おそらく Big Sur 以降) になって、`sips` コマンドがこっそり強化され、JavaScript を使って画像の操作が行えるようになりました。
インターフェースとしては `
【React開発のための復習】JavaScript：オブジェクトと配列の分割代入について
## はじめに
UdemyのコースでReactの学習一通り終えましたー！
しかし、JavaScriptはガッツリ学ばずにサラッと理解してReactに入った勢なので、所々つまづくこともありました。
そのためこのたび、react開発において重要と思われるJavaScriptの記法を少しずつ・毎日ここに復習として発信していくことにしました。ちなみにちょこちょこ英語の表記を入れているのは、英語環境での開発現場も少し意識しているためです。
海外で通用するエンジニアになりたいので、ちょっとした習慣として今後の記事もこんな風に書いていきます。
（ちなみにソースは公式ドキュメントなので信用できるかと・・・！間違いあればご指摘ください！）というわけでJavaScript復習編の第一回の今回は、『オブジェクトと配列の分割代入について』書きます！
### オブジェクトの分割代入 (Object destructuring)
まずは以下のような簡単なオブジェクトを作成します。“`javascript
const myProfile = {
name: “Jack”,
age:
練習のためにVue.jsでNatoフォネティックコード暗記帳を作ろうとしたがいまいちの出来だった件
Vue.jsの存在を知ったので練習しようと思いNatoフォネティックコードの暗記帳を作ろうと思ったが、思いのほか理解が難しく、いまいちなできで中間報告してみる。
NATOフォネティックコードとは
https://ja.wikipedia.org/wiki/NATOフォネティックコード
#環境開発環境 codePen
デプロイ先 netlify#コード
[phina.js] Shapeの種類について知る
その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)
## Shapeの種類
**phina.js**には、以下の種類の**Shape**が予め用意されています。## RectangleShape
矩形の**Shape**です。| プロパティ | 説明 |
| —- | —- |
| fill | 塗りつぶし色 |
| stroke | 縁取り線色 |
| strokeWidth | 縁取り線の太さ |
| cornerRadius | 角丸め値 |“`js
// RectangleShape
RectangleShape({
width: 128,
height: 128,
fill: ‘red’,
stroke: ‘lime’,
strokeWidth: 16,
cornerRadius:
仮想通貨のコントラクトアドレスを簡単に取得するWebアプリを作成してみた
CoinGeckoのAPIを利用して、仮想通貨のコントラクトアドレスを簡単に取得するWebアプリを作成してみました。
今回の作成したWebアプリでは[CoinGeckoの公開API](https://www.coingecko.com/ja/api#explore-api)を使用しています。
Webアプリにアクセスすると、Windowが開きコイン名を小文字英数字で入力することで、プラットフォーム、コントラクトアドレス、ホームページアドレスを表示してくれます。
また、コントラクトアドレスはクリップボードにコピーされそのままMetaMaskなどに貼り付けることができます。
（何も入力しない場合、サンプルでUniswapのデータが表示されます。）コントラクトアドレス取得！ pic.twitter.com/MN0SbUHmQr
— ymachida196 (@ymachida196)
[phina.js] Shapeを移動させる
その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)
## Shapeの移動
**Shape** を始めとしたオブジェクトの移動は、オブジェクトの**update**関数で位置を変更させるのが一般的です。## update関数で位置を変更する
**update** 関数は毎フレーム呼ばれるので、関数内で以下のように記述することで **Shape** を移動させることができます。“`js
// 移動
shape.update = function() {
shape.x += 2;
shape.y += 2;
};
“`## moveBy関数を使った移動
オブジェクトに用意されている**moveBy**関数を使って移動させることもできます。“`js
// 移動
shape.update = function
Ajaxでバイナリデータを受け取ってimageタグにロードする
以下の記事を参考にさせていただきました
https://qiita.com/Yarimizu14/items/f56123c738f12ad1844a仕様は入力フォームにデータを入力して、サーバサイドにJSON文字列を送付、サーバサイドでJSON文字列をパースしてImageを生成して、レスポンスを返す、JavaScriptでレスポンスを受け取って画面内のImageタグにロードします。エラーハンドリンクは省略しています。
**JavaScript**
“`javascript
var oReq = new XMLHttpRequest();
oReq.open(“POST”, “http://localhost:8080/target”, true);
oReq.responseType = “arraybuffer”;
oReq.setRequestHeader(“Content-Type”, “application/json”);
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response;
[phina.js] Shapeを拡大・縮小させる
その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)
## Shapeの拡大縮小
**Shape**の拡大縮小には複数の方法があります。どちらの場合も **1.0**を基準として、小さければ縮小、大きければ拡大になります。#### scaleX scaleY プロパティに直接指定
“`js
var shape = Shape().addChildTo(this).setPosition(320, 480);
// 横方向に拡大
shape.scaleX = 1.5;
“`#### setScale関数で指定
**setScale**関数を使うと、縦横の拡大縮小をまとめて指定できます。また、生成から一気にチェインメソッドで繋げて書くことができます。“`js
var shape = Shape().addChildTo(th
コロナ太りの俺必見！自分にあったペースで数を読み上げてくれるパーソナルトレーナーアプリを作ったよ。
Siriに頼んでみたんですけど運動アプリが起動するだけで数を数えてくれませんでした( ﾉД`) なのでこんな感じのを作ります。
#腕立て伏せメトロノーム（実際に使えるので是非お試しください）
***[Push-ups Metronome v1.0](https://friendly-feynman-497760.netlify.app/)***
#つくった理由はパーソナルトレーナーっぽいサポートが効果ありそうだったから。
在宅ワークや外出自粛でぶ
[phina.js] Shapeを回転させる
その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)
## Shapeの回転
**Shape**の回転角度指定には複数の方法があります。どちらの場合も **度=degree**で指定します。#### rotaitionプロパティに直接指定
“`js
// Shapeを作成してシーンに追加
var shape = Shape().addChildTo(this).setPosition(320, 480);
// 回転指定
shape.rotation = 45;
“`#### setRotation関数で指定
**setRotation**関数を使うと、生成から一気にチェインメソッドで繋げて書くことができます。“`js
var shape = Shape().addChildTo(this).setPosition(3
プリザンターの一覧画面で選択したレコードを送信する
#はじめに
プリザンターの一覧画面で選択したレコードを送信する方法を記述します。
（送信先のプログラムでPDF帳票を作成して返す、のような使用を想定しています。）
CORSエラーでハマったので、備忘と情報共有のため記事にします。##ボタン追加
スクリプトで一覧画面にボタンを追加します。“`javascript
// ======== 初期化 ========
// 一覧表示のロード時に初期化を呼び出す
$p.events.on_grid_load = function () {
init();
}/* =============================================================================
関数：init
機能：初期化を行う
・ボタン追加
・ボタンクリック時の処理を登録
・XMLHttpRequestと応答処理を作成
引数：なし
備考：一覧画面のロード時に呼び出される
=========================================
正直よくわかっていなくても短時間でそれっぽい地図アプリケーションが作れる
##開発できた地図を操作するWEBアプリケーション
将来開発したいサービスがあり、その実現性を確かめるべくスピード重視でプロト開発してみました。
完成品をNetlifyで公開していますので触ってみてください↓https://agitated-mahavira-7d1166.netlify.app/
参考）将来開発したいと思っているもの（note記事に飛びます）
https://note.com/grayhamchan/n/ne9e12909f60d
##確認したかった機能
* ブラウザに地図を表示する
* 現在地を地図上にプロットする
* ほかの任意の地点を地図上にプロットする
* 2点間の距離を計算するこれらの機能が初心者でも実装できるのか？確認してみました
##結論：ライブラリを活用することで簡単にそれっぽ
【Vue.js】奥さんに喜んでもらうためにオリジナル「レシピ検索アプリ」のプロトタイプ1号を作った【Bootstrap】
##目指したのはオリジナル「レシピ検索アプリ」
先日、奥さんと会話していると、こんなことを言われました。
**「食材からレシピ検索して、副菜も提案してくれるアプリが欲しい」**
なるほど、確かに奥さんはいつも主菜だけでなく副菜も作ってくれています。
これは何とか報いねばということで考えました。**目指したのはこんなアプリ**
しかしながら、作り始めてみてWebアプリケーション制作に関するスキルの無さに唖然とし、とりあえずプロトタイプ中のプロトタイプを作ったところで今に至ります。
##今回作ったもの
CodePenで作成したので、そのまま添付します。
初めて使いましたがコード弄りながら逐一結果を確認できて便利ですね。
ロンダルキアへの洞窟
“`html:test.html
<
超初心者が、英語学習を始めたわが子に「英単語カード」をプロトタイプしてみた結果（改善点まとめ）
##今回の目的 ~Webアプリでプロトタイプ！~
Webアプリケーションの学習を、数日前に始めたばかりの**超初心者**です。
[前回の投稿記事](https://qiita.com/kokano23/items/e4bc61090ad2164398cc)のとおり、基本用語そのものが理解しきれずにスタートしているため、大苦戦中?
わが子（幼児）が英語教室に通い始めたばかりなので、せっかくなら**一緒に楽しく学べるツール**のような何かを作ろうと思いました。結果、まだまだ技術が足りず、まったく思い通りのプロトタイプにはなりませんでした。
ですが、日々アウトプットしていくことを大事にしているため、今回記事として発信します。##英単語カード（完成品）
以下、**Netlifyで公開**しているURLとなります。https://vigilant-borg-962fa7.netlify.app
###使い方
####①単語練習
英単語が読めるように練習しよう！ということで、**日本語名**・**英語スペル**を単語カード風に登録しました。
（わが子の性格上、これだけだと読めずにや
