- 1. Hello
- 1.0.1. 【Rails】flashメッセージをフェードアウトで消す方法【JavaScript】
- 1.0.2. WEBページに「Googleアカウントでログイン」を実装する
- 1.0.3. 制約の多い運用現場でエンジニアっぽいことをする方法
- 1.0.4. Vue.js開発の達人への道
- 1.0.5. Mohoから出力したSVGを制御したい妄想の話
- 1.0.6. JavaScriptしか知らない初心者のReact Native入門
- 1.0.7. 【初心者向け】JavaScriptのfor文でHTMLに表示する九九表を作る！
- 1.0.8. 自分用コードメモ – 特定のCookieを持つかどうか判別して処理をする
- 1.0.9. すっきり書きたい JavaScriptの条件分岐
- 1.0.10. PlayCanvasで建築系のモデルを良い感じの3Dビュワーにしてみる [WebGL]
- 1.0.11. 【JavaScript】フォーム上などの画像ファイルをブラウザだけでリサイズ
- 1.0.12. WordPressの管理画面にオリジナルのCSS・JavaScriptを適用させる
- 1.0.13. PlayCanvasの背景を透過canvasにする方法
- 1.0.14. HTML+JavaScript の keydown で使える特殊キーの件
【初学者実践録】分数を計算するJSに挑んだお話
**こんにちは。ばーんです。**
今回はJSで分数の計算をしていきます！
#はじめに
出会いは唐突でした…（↓ドンッ）これをjsで解けと会社の上司に言われたんですが全然わからん。
誰かわかります？笑 pic.twitter.com/ZM6VmigaVQ— ケイセイ＠JavaScriptと仲良くなりたい (@keisei_otsuka) February 2, 2020
これは仕方ない…
JavaScriptのキーボードイベント、キー判定にどれつかう？
# 概要
ブラウザｘJavaScriptで扱うキーボードイベント、キー判定にどのプロパティを使うかのまとめ です
## ざっくりいうと event.key または event.code のどちらかを使うべし
– 「●●が押されたら」のような判定をしたいときは **event.key** または **event.code** のどちらかで判定する。
– キー判定には、いろんなプロパティがあって、どれ使ったらいいの？と悩むことがある
– 以前ふつうにつかっていた **event.keyCode**等は**deprecated**になっている
キー取得方法 ステータス 概要 参考 event.key オススメ
(正確にはWD)キー属性値≒入力された文字 を取得する
・Sora JavaScript SDKを使ってみた
## はじめに
時雨堂さんのSoraを使ったライブ配信を試しました。
（ウソ穴という個人開発のシステムで使えるか試してみたかった→動いた！）A-Frame と 時雨堂さんの sora を使うとスマホで #ウソ穴 つくれた。わかりにくいですが、映像をリアルタイムに3Dオブジェクトにマッピングしてて #AR で表示しています。 pic.twitter.com/HSvkgSoHQ3
— j4amountain (@zsipp
ジェネレーターを簡易的にCPS変換してみた
ジェネレーターをモナド用の DSL として使いたかったので、簡易的にパースして CPS 変換してみました。
See the Pen
CPS Transformation by 七誌 (GoogleのCloud Text-to-Speechを使ってDiscordの読み上げbotをサクっと作った## Discordのメッセージ読み上げbot
Discordのボイスチャットで、特定のチャンネル内のメッセージを自動で読み上げてくれるbotを作りました。
弊ディスコで導入されている読み上げbot pic.twitter.com/VvdzYlmqEz
— 古都こと (@kfurumiya) February 12, 2020
Discordの読み上げbotとしては[喋太郎](https://www.d
React基本
## JSX
FaceBookが開発したjavascript拡張機能。HTMLタグをjavascriptの中に書ける。実際はBabelを使ってHTMLの部分をjavascriptのプログラムに置き換えている“`html
“`“`jsx
// jsxを使用できるようにreactのモジュールをimport
import React from “react”;
import ReactDOM from “react-dom”;// 描画関数のReactDom.renderにh1タグを渡して’app’に描画する
const app = document.getElementById(‘app’);
ReactDOM.render(Hello
, a
【Rails】flashメッセージをフェードアウトで消す方法【JavaScript】
#はじめに
この記事では、flashメッセージを表示したあと一定時間後にフェードアウトさせる方法を解説します。flashメッセージ系の記事はたくさんあるのですが、
どれも`bootstrap`を使用してたり
何やら複雑な方法だったり（Hamlハムル？？とかrenderとかややこしい！）。。もっと簡単な記事はないのか！とモヤモヤしたので、自分まとめます。
自分と同じような人の為に！！（自分用のメモですすみませんｗ）#flashメッセージの表示方法
それではレッツ実装！！まずはコントローラーから。
#コントローラー“`ruby
def destroy
@review = Review.find(params[:id])
@review.destroy
if review.destroy
redirect_to root_path, notice: “︎レビューを削除しました！”
end
end“`
メッセージを表示させる記述は4行目の`if`文からです。
レビューが削除された後、`root_path`(ホーム画面)に戻
WEBページに「Googleアカウントでログイン」を実装する
# 目次
– はじめに
– 目標
– クライアントIDを取得する
– クライアントサイドのコード（JavaScript）
– サーバサイドのコード（PHP)
– 実行してみる
– お世話になったサイト## はじめに
WEBアプリを作っていて、「Googleアカウントでログイン」が実装できたので備忘録として残しておく。
実装にあたっては、[Googleの公式ドキュメント](https://developers.google.com/identity/sign-in/web/sign-in?authuser=1)を大いに参考にしました。動画も一緒に載っていて、日本人が解説しています。Japanese Englishですごく聞き取りやすくて助かりました。皮肉じゃないです。日本語の方がうれしいんですけどね
PHPとJSを使って実装しています。サーバサイドの言語は自分はPHPを使いましたが、公式ドキュメントにはNode.jsとJavaとPythonのコードも載ってました。自分はPHPしか試していません。#### 必要なもの
– テキストエディタ
– サーバ（ローカル環境でも可、試し制約の多い運用現場でエンジニアっぽいことをする方法
## 対象
– セキュリティの関係でソフトやツールをインストール・導入できない
– お金がないからツールを購入してもらえない
– サクラエディタでコードを書いてる
– そもそも周りにコードかいてるやつがいない
– IEが推奨ブラウザ(そもそも外部にアクセスできない)
– 何でもかんでもExcelでやりたがるetc.上記はほとんど自分が今の現場に感じている不満だがおそらく自分だけじゃないはず．今や自宅での環境のほうが優れている人がほとんどだと思う．WEB系で働いている人のツイートとかみるとめっちゃ羨ましく思う．でもWindowsにはメモ帳があるじゃないか．
### PowerShell
用途としては単純作業の自動化がメイン– メリット
– 個人的に最近ハマっている
– Windowsに標準でインストールされている
– PowerShell ISEという統合開発環境がある
– .NET Frameworkを利用できる
– COMオブジェクトの操作が可能
– CSV,XML,JSONを扱いやすい(これで少しは脱Excelできるかも)Vue.js開発の達人への道
Vue開発を初めて使用する場合、シングルページアプリ、動的 & 非同期コンポーネント、サーバーサイドレンダリングなど、多くの専門用語が使用されていることを聞いたことがあるでしょう。
また、Vuex、Webpack、Vue CLI、Nuxtなど、Vueと一緒によく言及されるツールやライブラリについて聞いたことがあるかもしれません。
おそらく、この無数の用語とツールはフラストレーションになると思うでしょう。その中であなたは一人ではありません。すべての経験レベルの開発者は、自分が知らないことや、そうすべきだと感じているという永続的なプレッシャーを感じています。
## 0. JavaScriptと基本的なWeb開発
中国語で書かれた本のすべてを学ぶように頼んだら、まず中国語を読むことを学ぶ必要がありますよね？
同様に、VueはWebユーザーインターフェイスを構築するためのJavaScriptフレームワークです。 Vueを使用する前に、JavaScriptとWeb開発の基本を理解する必要があります。
[FreeCodeCamp](https://www.freecodecamp.c
Mohoから出力したSVGを制御したい妄想の話
現在、実際に作ってる最中のブツがこちら。
適当なタイミングで更新をしてるので、ここで書いてる内容から構成が変わってる可能性あり。【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/さて。
妄想話の前に、そもそもの話から。#Mohoとは
2Dアニメーションソフトウェアのこと。
昔はAnime Studioという名前だったらしい。
自分が使用しているのはMohoPro12。2Dアニメーションソフトウェア – Moho (Anime Studio): イーフロンティア
https://www.e-frontier.com/smithmicro/moho/初めて使ってみたときに調べたことを解説動画として雑にまとめたこともある。
MohoPro12使ってみたので自己流解説 –
JavaScriptしか知らない初心者のReact Native入門
プログラミング歴半年の素人が書いています。
間違いのないようご自身でも良く調べた上でお願いいたします。
# 対象読者
– モバイルアプリ開発をしたことがない人
– JavaScriptの基礎構文がわかる人
– Reactを知っている人
– Macの人わたしです。 試行錯誤の記録となっておりますので、ベストプラクティスではない可能性が十分含まれておりますことご了承ください。
#環境構築
## Node.jsのインストール
https://nodejs.org/en/download/
上記リンクからダウンロードできます。
## ReactNativeのインストール
[公式チュートリアル](https://facebook.github.io/react-native/docs/getting-started)でもおすすめされているように、「**Expo CLI**」という「ReactNative+便利機能いろいろ」のパッケージをインストールしてみます。
ついでに、お手持ちのスマホのアプリストアで「Expo」を検索し、アプリをスマホにダウンロードしておくとよいでし
【初心者向け】JavaScriptのfor文でHTMLに表示する九九表を作る！
# JavaScriptでHTMLに表示するtableを作る！
完成形はこんな感じ:baby_tone2:
[codepen](https://codepen.io/haribooooom/pen/jOPbLrL)から直接コード見られます。## tableを作るのに使う要素
`
### HTML
* `
* `
`
### JavaScript
* `document.write(‘xx’)`
* ``
* ``
* ``
* `for(var hoge=1; hoge <= 9; hoge++){document.write('‘+ hoge +’ < 自分用コードメモ – 特定のCookieを持つかどうか判別して処理をする
よくある、特定のCookieを持つかどうかで処理を分けたいときに使うコード。例えば特定のアンケートを回答した人には同じアンケートを表示しないなどといった運用をするときに使う。
“`.js
//メイン. 特定のCookieを持たなけれな特定の処理をしてCookieを付与する
function main(cookieName,cookieValue){
if(!existCookie(cookieName,cookieValue)){
myFunciton();
document.cookie = cookieName + “=” + cookieValue;
}
}//特定のCookie名を持たないブラウザで処理したい内容
function myFunciton(){
…
//console.log(“TEST”);
}function existCookie(cookieName,cookieValue){
//cookieName=任意のCookie名 cookieValue=そのCookie名を持たないときに処理した後セットしすっきり書きたい JavaScriptの条件分岐
# はじめに
未経験からNode.jsの現場に配属された2019年新卒エンジニアが、学習の振り返りとしてJavaScriptの基礎の基礎をまとめます。過去のJavaScript基礎シリーズ↓
[JavaScriptでvarが推奨されない理由を整理してみた]
(https://qiita.com/taiju_suzuki/items/49ed558bd837452353b8)今回は、多くの書き方が存在するJavaScriptの条件分岐に関して、よりすっきりとした書き方を考えていきます。
# Goal
– 思考停止のelseやswitchから離れる
– 可読性やリファクタリングのしやすさの観点から、JavaScriptの条件分岐を使いこなす# まず「すっきり」を定義する
本記事で目指したい「すっきり」を、以下のように定義します。
– コードの可読性が高いこと
– バグが生まれにくいこと
– 後からリファクタリングがしやすいこと## コードの可読性が高いこと
プロジェクトとして複数人で開発をする際に、可読性の高いコードを書くことはとても重要です。
「可読性」という
PlayCanvasで建築系のモデルを良い感じの3Dビュワーにしてみる [WebGL]
PlayCanvasの非ゲーム分野を開拓中のキドです。
今回はビジュアライゼーションで建築系に使えそうなコンテンツを作ってみました。
#建築系ビジュアライズ
[ここでコンテンツを見ることができます](https://playcanv.as/p/F1ZzFOYS/)
https://playcanv.as/p/F1ZzFOYS/とあるビルのオフィス内の案内コンテンツ、という感じで作りました。
3Dコンテンツなのでカメラで外装を見たり、階層の番号をクリックすることでその階層の中を一望できたり。
あとはそれに応じたDOMも変更したり、レイキャストでクリックできるスポットを設置したりしました。FlashがWebでよく使われていた頃に、デパートとか施設のマップ案内をするWebページがありました。
その頃はFlashで実装されていましたが、2【JavaScript】フォーム上などの画像ファイルをブラウザだけでリサイズ
JavaScriptで画像ファイルをリサイズしたい時があると思います。僕はありました。
単に[File](https://developer.mozilla.org/ja/docs/Web/API/File)を投入して変換するコードが意外となかったのでここに共有します。
この例では、リサイズ後の画像をブラウザからダウンロードの形で取得できるようにしました。# DEMO
WordPressの管理画面にオリジナルのCSS・JavaScriptを適用させる
# フォルダ構成
# 必要な記述
“`php:functions.php
PlayCanvasの背景を透過canvasにする方法
#canvasの背景透過
HTML5のcanvas要素は毎フレームでレンダリングを行います。
canvasの背景を透過したいなんて声はググったりすると意外と多い気がします。ちなみに、canvasの背景を透過したいなんて時は以下のようにalpha値を指定してあげれば良いです。
“`js
gl.clearColor(0, 0, 0, 0)
“`#PlayCanvasの背景透過
PlayCanvasはどうしたらいいか。
PlayCanvasエディターのRENDERINGに**Transparent Canvas**という項目があります。
これにチェックを入れます。
これだけで背景は透明になったかというとそうでもなかったり…
EntityにCameraがある場合は、このCamera
HTML+JavaScript の keydown で使える特殊キーの件
# 概要
とある web アプリを書いていまして。F1 ~ F12 のどれかのキーで「書類の差替」機能を割り付けるという話がありました。
でまあレガシーな web アプリですので、IE 11 / Edge (Project Spartan) / FireFox / Chrome での対応が必要になり云々。現状調査から手を付ける事にしました。
## charCode とブラウザーの機能との対応表
| キー | e.charCode | Chrome 79 | IE 11 | FireFox 72 |
|:-:|–:|—|—|—|
| F1 | 112 | ヘルプ | ヘルプ★ | – |
| F2 | 113 | – | – | – |
| F3 | 114 | – | ページ内検索 | ページ内検索 |
| F4 | 115 | – | URL ドロップダウン | – |
| F5 | 116 | ページ更新 | ページ更新 | ページ更新 |
| F6 | 117 | URL 欄等フォーカス | URL 欄フォーカス | URL 欄フォーカス |
| F7OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた