- 1. youtubeで1秒スキップするショートカット
- 2. 動的に背景画像を変更する(Ruby on rails,JavaScript)
- 3. Vue.jsとElmを比べてみよう！ テンプレートとview編
- 4. 【JavaScript】 “data”って何？
- 5. Laravel6でfetchによる非同期ファイルアップロードする
- 6. 初心者によるプログラミング学習ログ 255日目
- 7. インストールしている Node.js のバージョンをダウングレードさせるために n を使ってみる
- 8. 【Javascript】全部ES6のループ文にしたかった最後の難関だったfor (let i = 0; i < 10; i++)をやっと抹殺した
- 9. 独学でオンラインWebアプリメモ帳サービスを開発した記録
- 10. Javascriptでいろいろな正星型図形（n芒星)を生成する
- 11. ReactでマークダウンをHTMLに変換する
- 12. TypeScriptでスクレイピングしてみよう
- 13. LIFFの新機能「Share Target Picker」を試してみた
- 14. 【JavaScript】canvasでビュー操作してみよう【canvas】
- 15. processmdでマークダウンをjsonに変換する
- 16. [Vue.js] vue-momentで日付をフォーマットする
- 17. VuetifyでRedmineのダッシュボードを作成する時にテーマをこんな感じにすると便利かもというお話
- 18. jest の toBe と toEqual の違いを比較
- 19. HANSONTABLEのセル入力における日本語対応について
- 20. jQuery UI Slider で、ハンドルの数を増減したい話
youtubeで1秒スキップするショートカット
# 概要
youtubeの動画再生中に1秒スキップするショートカットを作成するコードを作りました。先に言っておくと、youtubeではデフォルトで以下の便利なショートカットがあります。ただ、5秒では進み過ぎてしまう場合など、スキップ時間をカスタマイズしたい時に役に立ちます。
※youtubeにデフォルトで備わっているショートカット例
・「→」 ： 5秒進む
・「←」 ： 5秒戻る
・「L」 ： 10秒進む
・「J」 ： 10秒戻る
・pause中に「.」 ： 1フレーム進む
・pause中に「,」 ： 1フレーム戻る作成にあたって、tampermonkeyというchrome拡張機能を使用しました。※[tampermonkeyの参考](https://www.lisz-works.com/entry/chrome-tampermonkey)
この拡張機能はユーザースクリプトといって、ユーザー独自のスクリプトをwebサイトを閲覧する際にそのユーザーにだけ反映させる事ができます。コードの仕様はjavascrpt同様です。# コード
“`javascript
// ==UserS
動的に背景画像を変更する(Ruby on rails,JavaScript)
#はじめに
画像アドレスを入力することで、
背景画像を動的に変更する方法について書いていきます
#実行
基本となるビューファイルは次のようにします。“`haml:wall.haml.html
.body
= text_area “object_name”, {class: “wall-url”},{id: “wall-url”}
.wall-btn 画像を変える“`
`texr_area`が画像アドレスを張り付ける部分で、`.wall-btn`を押したら画像を変わるものとします。次にJavaScriptです。（jQueryで書いています）
“`javascript:wall.js
$(function(){
$(“.wall-btn”).on(“click”,function(){
})
});
“`
これで、`.wall-btn`をクリックした時に発火する関数ができました。
次は、処理の内容を書いていきます。“`javascript:wall.js
$(function(){
$(“.wall-btn”).on(“click”,
Vue.jsとElmを比べてみよう！ テンプレートとview編
Vue.jsは「[簡単である](https://jp.vuejs.org/v2/guide/)」Elmは「[シンプルであること](https://guide.elm-lang.org/)」ということがガイド等で強調されています。私の中では上手く抽象的な言葉のレベルでこれらを整理することが出来なかったので、二つのフレームワーク(言語)で意識し続けなければならないであろうHTMLの表現を比較することで、それぞれの特徴や問題点を考えてみることにしました。その中でもアプリケーションで特に重要であろう複数の値の扱いに特化して比較してみます。
## オブジェクトの表示
### Vue
おそらく多用することであろう汎用ループを扱うことが可能なディレクティブ`v-for`を用いていきます。
“`html
- {{ item.message }}
“`
起動に必要な最低限のコードの中に、テンプレートの中で使用するデータを`dat
【JavaScript】 “data”って何？
JavaScriptで「？？？」となったので調べた備忘録です。
“`
$(“#button”).on(“click”, {when:”morning”, message: “Good Morning”}, function (e){
console.log(e.data.message);
});
“`これでボタンを押したら”Good Morning”が出力されます。
`foo.data.message`の`data`について、前から何だろうなと思いながらをあまり理解していませんでした。
jQueryの仕組みなのかJavaScriptの仕組みなのかもわかっておらず、最近改めて調べていてようやく正体がJavaScriptのイベントオブジェクトのプロパティなるものだとわかりました。#「data」の正体
「ボタンを押す」というような出来事のことをイベントといい、このイベントが発火した時に実行されるコードをイベントハンドラ（イベントリスナー）と言います。
このイベントハンドラは引数としてオブジェクトを受け取るのですが、これがイベントオブジェクトです。
つまり今回では`fu
Laravel6でfetchによる非同期ファイルアップロードする
# つまずいたのでメモ！！
## 注意点
・credentialsの指定
・X-CSRF-TOKENの指定
・headersにContent-Typeは不要“`javascript
// ファイルアップロード(Fetch Ver)
const FileUploadFetch = (f) => {
var formData = new FormData();
formData.append(‘paramA’, ‘dataA’);
formData.append(‘paramB’, ‘dataB’);
formData.append(‘file’, f);fetch(‘/sample/upload’, {
method: “POST”,
body: formData,
credentials: “same-origin”,
headers: {
‘X-CSRF-TOKEN’: ‘{{ csrf_token() }}’
},
})
.th
初心者によるプログラミング学習ログ 255日目
#100日チャレンジの255日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
255日目は、おはようございます
255日目
・udemyでjavascript講座 インプット学習#早起きチャレンジインストールしている Node.js のバージョンをダウングレードさせるために n を使ってみる
# この記事について
本記事は、Node.js のバージョン管理が可能になる npm パッケージ **n** のインストールおよび n を利用した Node.js のバージョン変更方法について記載しています。
なお、*npm パッケージ n は Windows ネイティブでは未サポート* のため、対象となるのは Linux や macOS など、非 Windows 環境となります。## 対象読者
– Node.js を既にインストールしている方
– Node.js を過去のバージョンにダウングレードしたい方
– OS が Linux や macOS の方## 環境
– OS: macOS Catalina Version 10.15.2
– Node.js: v12.16.1# はじめに
普段、自分の開発 PC の Node.js は常に最新の LTS バージョンがインストールされているようにしています。\(2020/03/06
【Javascript】全部ES6のループ文にしたかった最後の難関だったfor (let i = 0; i < 10; i++)をやっと抹殺した
FormArrayを10個つくる
### 憎きfor文
“`ts
const array = new FormArray([]);
for (let i = 0; i < 10; i++) { const fg = this.formBuilder.group({ id: [null], name: [null], code: [null] }); array.push(fg); } ``` ↓ ### [...Array(10)] ```ts const array = this.formBuilder.array([...Array(10)].map(() =>
this.formBuilder.group({
id: [null],
name: [null],
code: [null]
}));
“`が、これで自宅の環境では動いたのに職場の環境でやったらエラーになった
(lengthは10だけどemptyの配列が作られた)↓
### Array.from(Array(10))
“`ts
独学でオンラインWebアプリメモ帳サービスを開発した記録
会員登録不要、無料で使用・保存できるオンラインWEBアプリメモ帳サービスを開発した記録です。
素人の私でもWEBサービスを作成できるので、参考にいただければ幸いです。
## ■サイト
メモ帳（メモ・ロモ）｜会員登録不要で無料で利用可能のオンラインWEBアプリメモ帳サービス
http://memo.lomo.jp/
## ■トップ画面
## ■入力画面
## ■特徴
・会員登録不要、無料で使用・保存できる。
・http://memo.lomo.jp/ ＋[複雑なID」を入力して自分専用のメモ帳として利用できる
Javascriptでいろいろな正星型図形（n芒星)を生成する
#仕組み
図形生成の仕組みは、[こちらのページの技術](https://mail.conifer.jp/csstest/css-circle-text.html)を応用したもの + 高校で習った三角関数。
そもそも六芒星をはじめとする星型図形には**どれだけ複雑なものであっても、線の本数と傾きは正多角形の時と変わらない**という法則がある。つまり、線の傾きと位置さえ調整してやれば、煩雑な多角形であっても生成可能なのである。
で、その線の位置と長さを求めるときに使うのが、いわゆるsin、cos、tanなのだ。図にするとこんな感じ。
赤線の部分がいわゆる「斜辺」と呼ばれるもの。斜辺の長さは50%=0.5で、赤線と赤線の間の角（中心角）は今回の場合５等分（赤い点＝円の中心から接線に向けて伸びる直線、つまり半径なのだ）。こ
ReactでマークダウンをHTMLに変換する
ReactでマークダウンをHTMLに変換する方法について記載
1.react-markdownをインストール
“`
npm install –save react-markdown
“`2.以下のコードを記載
“`
import React,{Component} from ‘react’;
import ReactMarkdown from ‘react-markdown/with-html’;export default class MarkdownSample extends React.Component {
constructor(props) {
super(props)
}getHTMLfromMarkdown(){
let markdown =
‘# 見出し 1\n’ +
‘## 見出し 2\n’ +
‘### 見出し 3\n’ +
‘#### 見出し 4\n’ +
TypeScriptでスクレイピングしてみよう
# 初めに
TypeScriptによるスクレピングの簡単な手法を紹介したいと思います。
記事のポイントはあくまでもTypeScriptの使用、高度なスクレピング技法の紹介ではありません。
## 前提条件
– ある程度Typescriptの文法が分かってること
– Node.jsの環境が整って、npmコマンド使えること
– グローバル環境にTypeScriptに入ってること
– 法に触れること、人に迷惑かけることをしないこと# プロジェクト初期化
“`shell
mkdir [好きなディレクトリ] && cd [好きなディレクトリ]
“`
package.jsonとtsconfig.jsonの初期化“`
npm init -y && tsc –init
“`
プロジェクトのフォルダ内にsrcフォルダを作ります。“`
mkdir src
“`
tscofig.jsonのrootDirをsrcフォルダに指定します。“`shell:tscofig.json
…
“rootDir”: “./src”, /* Specify the
LIFFの新機能「Share Target Picker」を試してみた
つい先日、LINEのフロントエンドフレームワークの「LIFF」に新機能が追加されました。その名も「**Share Target Picker**」。どんな機能かというと、WebアプリからLINEの友達に対してメッセージを送ることができる機能です。つまり、「LINEアプリを立ち上げなくてもブラウザからメッセージを送る」という機能を実装することができます。詳しくはこちらのブログが参考になります。
[Share Target Pickerがリリースされ、LIFFアプリからのメッセージ送信が大幅に強化されました。](https://engineering.linecorp.com/ja/blog/liff-share-target-picker/)というわけで今回はこの機能を試してみます。
# 今回作るもの
ブラウザから適当なメッセージを入力して誰かに送信するというものです。実際の動作は[こちら](https://target-share.netlify.com/)で確認できます。※LIFFは本来はLINEアプリ上で動くように作られていますが、この機能に関しては、LINEアプリのver
【JavaScript】canvasでビュー操作してみよう【canvas】
#はじめに
以前公開した記事の続編的な記事です。
canvasで、マウスイベント、リサイズイベントをハンドリングして、平行移動や拡大縮小をしてみましょう。
今回はcontext.setTransformを使ってみます。#仕様
動作確認ブラウザはPC版のChromeのみ
ライブラリはjQueryのみ使用
ドラッグで平行移動、ホイールで拡大縮小する(拡大縮小はカーソル位置中心)
ブラウザのリサイズに対応する
ブラウザいっぱいにcanvasを描画する
#仕様のイメージ
###ドラッグによる平行移動
###ホイールによる拡大縮小
);
“`#.vueファイルで使う
or演算子｜の右辺でフォーマット形式を指定します。“`javascript:App.vue
{{ new Date() }}
// 05 2020 19:38:33 GMT+0900 (日本標準時){{ new Date() | moment(“dddd, MMMM, Do, YYYY, h:mm:ss a”) }}
// Thursday, March, 5th, 2020, 7:38:33 pm{{ new Date() | moment(“YYYY/MM/DD”) }}
// 2020/03/05
“`#参考にしたサイト
vue-moment – npm
https://www.npmjs.com/package/vue-moment
VuetifyでRedmineのダッシュボードを作成する時にテーマをこんな感じにすると便利かもというお話
[Vue.js](https://jp.vuejs.org/)と[Vuetify](https://vuetifyjs.com/ja/)を勉強中の8amjpです。
## はじめに
さて、私の職場ではRedmineが稼働してまして、さらにそのデータを見やすく加工したダッシュボードを作成して、大型ディスプレイに表示してるんですけど。
そのダッシュボード、今までは[Angular](https://angular.jp/)で作ってたんですが、Vue.jsも勉強したいしVuetifyでマテリアルデザインを満喫したいし……ということで、現在リプレースの真っ最中です。Vue.jsもたのしー！
その過程で覚えた小ネタをひとつ。## テーマにカスタムカラーを追加する
Vuetifyとは、Vue.jsベースのフレームワークで、ダッシュボードみたいなWebアプリを作るのに最適なんですけど。
このVuetify、「テーマ」という機能を持っていて、これがRedmineのデータの表示にとても便利なんです。
具体的に言うと……
チケットの一覧なんかを表示する際、チケットのステータスやトラッカーの値によっ
jest の toBe と toEqual の違いを比較
1時間ほどハマったのでメモを。
# toBe と toEqual の使い所
– number, string の比較ならどちらでも良さそう。
– object を比較する場合は、 toEqual 。number, string
—–どちらも期待通りの結果に。
“`typescript
it(‘number’, () => {
expect(1 + 1).toBe(2) // ok
expect(1 + 1).toEqual(2) // ok
})
“`“`typescript
it(‘string’, () => {
expect(‘d’ + ‘b’).toBe(‘db’) // ok
expect(‘d’ + ‘b’).toEqual(‘db’) // ok
})
“`object
—-同じデータが入っていても toBe だと Fail します。
“`typescript
it(‘object’, () => {
const us
HANSONTABLEのセル入力における日本語対応について
# HANSONTABLEの２バイト入力への対応
ハンズオンはブラウザ上に表形式のインターフェイスを提供するありがたい部位です。
これを使用するにあたり、日本特有である日本語入力時の不具合があり
かなりハマったので、備忘録として残しておきます。—
まずはハンズオンテーブルとは・・
https://handsontable.com/JavaScript data grid that looks
and feels like a spreadsheet.
Minimalistic, Excel-like grid component for web apps.
Available for pure JavaScript, React, Vue, and Angular.—
## 問題点
そもそも英語圏の部品なので、日本のように全角半角がある場合の対処ができていない。
### 現象
ハンズオンで表示したテーブルのセル（テキスト）に対して、フォーカスを当てただけの状態で、ＩＭＥをＯＮ（日本語入力）した際、最初の１文字が入力されない。| col1 |col2|col3
jQuery UI Slider で、ハンドルの数を増減したい話
## 前書き
そもそも、[ここ](https://stackoverflow.com/questions/19348528/jquery-ui-slider-how-to-add-values)の回答を転記、加工して、動作を確認しただけです。
なぜ書き直したかといいますと、2013年の回答と、現在のバージョンが異なるから、
サンプルページが動作していなかったため、
そして、日本語での参考にできる記事がなかったため、検索性を考えて、転記しておこうということです。ということなので、話はタイトルで分かったから、早くという人は[本家](https://stackoverflow.com/questions/19348528/jquery-ui-slider-how-to-add-values)からコピーしたほうが早いです。元のままでもちゃんと動きました。
もしくは、[本番](#本番)へどうぞ。
## 何がしたいか
[jQuery UIのSlider](https://jqueryui.com/slider/)という機能、ハンドル（値を持てる箇所）を複数指定する場合“`js
$(‘
