ウェブ家の備忘録

ウェブデザイナーの備忘録

JavaScript

JavaScriptで可変変数

<script> for (var i = 0; i < 10; i++) { eval("var n" + i + "=" + i + ";"); eval("console.log(n" + i + ");" ); } </script> まあ要はevalの使い方の一例を「可変変数」というHOTなキーワードを通して紹介しているだけで、実際evalは何でも宣言できます。定数でもユーザ…

ホームページのソースコードをJavaScriptで秘匿化

下記のHTMLをほぼ秘匿化するものを作ります。 <h1>aaa</h1> 私が作ったもの。 (adsbygoogle = window.adsbygoogle || []).push({}); index.html --- <html> <head> <script type="text/javascript" src="jQuery.js"></script> </head> <body></body> </html> --- jQuery.js 下記の内容を難読化して格納する。難読化に用いるサイトは右記。https://obfuscator.io/ --- fu…

JavaScript : HTMLでサイトURLを列挙

意図 このサイトの左カラムのリンク編集を楽にしたい。URLとサイト名だけ入れればいいようにしたい。 今回作成する物 下記のHTMLを出力するJavaScript。 <a href="http://searchdesk.com" target="_blank" style="text-decoration: none;">検索デスク</a> <br><a href="http://www.google.com" target="_blank" style="text-decoration: none;">google</a> liタグは個人的に好きじゃないので使ってません。 作成したJavaSc…

JavaScriptのvar let constの違い

大体スコープの違い。 <script> //var let constの宣言の違い { //var //let //const var varDec = '○初期値'; let letDec = '○初期値'; const conctDec = '○初期値'; varDec = '○再代入'; letDec = '○再代入'; conctDec = '×再代入'; var varDec = '○再宣言'; let l…

thimbleがglitchになる

使用感は全く変わりません。 glitch.com

JavaScriptでアニメーション、JSライブラリTweenMax

http://un-tech.jp/tweenmax-started/

JavaScriptで位置情報(GPS)取得

https://web-designer.cman.jp/javascript_ref/others/gps/

xamppのlocalhostになる所(ドキュメントルート)の変更手順

https://creating-homepage.com/archives/6049 xamppのコントロールパネル開いて"Explore"ボタンをクリック。xamppフォルダが開かれる。 xamppフォルダ→apacheフォルダ→confフォルダと開き、httpd.confファイルを開く。 httpd.confファイルの中の"DocumentRo…

サイトのソースコードを秘匿化したい

右クリックできない(Ctrl+Uはできる) http://www.broadband-xp.com/hidesource/contextmenu.html ソフトでHTMLを難読化『XORHTML』 http://www.broadband-xp.com/hidesource/soft.html http://ni.10-59.com/net/index.html wordpressの脆弱性対策 https://ww…

Adobe Xdはweb制作に使えない

Xdはweb制作に使えない気がする。 利点 ・サイトレイアウトを作るのは異様に早い 欠点 ・レスポンシブサイト作成には向かない ・ソースコード汚いのでXd以外のソフトでの保守性皆無 ・Xd自体が高額 以上を踏まえた私のXdの用途 ・タブレット・スマホ・PCのど…

Motion UI

https://postd.cc/motion-design-is-the-future-of-ui/ https://zurb.com/playground/motion-ui

Javascript ES6+について

https://javascript.keicode.com/newjs/

Vanilla JSというギャグフレームワーク

https://sitest.jp/blog/?p=8680 「Vanilla JSは他のJSライブラリと比べてめっちゃ早い。何でもできる」と色々な所で読んだので気になって調べてみました。 実際のVanilla JSはそれなんのJSライブラリでもないただのJavascriptじゃん、というオチでした。フ…

私がVisual Studio Codeで使っている拡張機能

HTML CSS Support HTML Preview HTML Snippets : HTMLのスニペット Japanese Language Pack for VS Code : 日本語にする Live HTML Pteviewer : HTMLの安易動作確認 Live Server : 安易仮想サーバー実装 JavaScript (ES6) code snippets : Javascriptのスニ…

JavaScriptのコード整形ツール

https://lab.syncer.jp/Tool/JavaScript-PrettyPrint/

Javascriptのnew Date()のミリ秒取得方法各種

<script> //下記は1970/1/1 00:00:00から指定日時までの経過ミリ秒を数値として保持する var a = new Date(2000,1,2,3,4,5);//2000/2/2 03:04:05 月の所は値が+1される var b = new Date(2000,2,2); //2000/3/2 00:00:00 var c = new Date(2000,0); //2000/1/1 00:00…

数字が動きまくって落ち着きないデジタル時計

動作結果 製作時のキャプション // 年:'+ (year+yearPer).toFixed(9)+ '' +''+'月:00'+("0"+(monthPerNum*12+1).toFixed(9)).slice(-12)+ '' +''+'日:00'+("0"+(datePer*monthDay+1).toFixed(9)).slice(-12)+'' +'' +''+'時:'+("0"+(hourPer*24).toFixed(3))…

Javascriptでその月の日数を計算する

function days(year, month) { return new Date(parseInt(year, 10), parseInt(month, 10), 0).getDate(); } https://www.softel.co.jp/blogs/tech/archives/4901

私が時間表示に使っているHTMLソース

↓実行結果 // 2000/00/00( ) 00:00:00 <script> function clock(DOM) { var yobi= new Array("日","月","火","水","木","金","土"); const timeText = //20XX/MM/DD(W) (new Date().getFullYear()) + "/" +("0"+ (new Date().getMonth()+1)).slice(-2) + "/" +("0"+ …

有名ソフトウェアの無料SVGアイコン

有名ソフトウェアの無料SVGアイコンhttps://simpleicons.org/ <img src="https://simpleicons.org/icons/microsoftword.svg" width="30px" style="background-color: #fff;" >

BootStrapの良いデザインDLできるURL

http://katoshun.com/blog/rwd-20131222.html https://www.sejuku.net/blog/7411#TITAN

fancyBox3の読み込み。CDNとローカルのやり方

■CDN fancyBox公式HPのQuick startをコピペ。 ■ローカル fancyBox公式HPのトップロゴ下部の↓DOWNLOADをダウンロード。 ダウンロードしたzipファイルのdistフォルダをを目的のHPフォルダに入れる。 最新版のjQueryをダウンロードしてjsフォルダに入れる。 下…

Bootstrapの読み込み。CDNとローカルのやり方

(adsbygoogle = window.adsbygoogle || []).push({}); ■CDN 最新のCDNを見るには、 ・Bootstrap公式HPの「Download」をクリック。「BootstrapCDN」中を見る。 ・Bootstrap公式HPのリボンにある「Documentation」の先のSearchで「CDN」と検索する。 ■ローカル…

GitHub ピザオーダー用webシステム

https://github.com/pzinsta/pizzeria?fbclid=IwAR3bY5bM8XHYLqjL1JlnOiYzn1BHjAryUc-pAjdzLFSvCSBhvP173wTP9cU

JavaScript製デジタル・アナログ時計

下記を使う際はinnerHTMLの改行をなくす。 <div id="hoge"></div> <script> const size=300; document.getElementById("hoge").innerHTML=' <center> <section class="clock"> <div class="dials"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>…</div></section></center>

JavaScriptで自分のPrivate IPアドレスを取得

// Vender Prefixありバージョンの場合も考慮 window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; // RTCPeerConnectionコネクションを作成。NAT越えは不要なのでiceServersは未指定 …

LightBoxの使い方

バージョンごとに仕様が変わって同様のソースでは使えなくなることがあります。ソースが古くなってたらすみません。 ここでダウンロード http://lokeshdhakar.com/projects/lightbox2/ dist中の「css」「images」「js」フォルダを使う。 下記を読み込むとLig…

コード中で文字としてシングルクォーテーションとダブルクォーテーションを使う

シングルクォーテーションの場合は \' ダブルクォーテーションの場合は \" 例 PHPでHTML中のCSSを動かす場合 hoge</div> $fontFamily='font-family: "Yu Mincho";'; echo '<div style=\'' . $fontFamily . '\'>hoge</div>'; ?>

JavaScriptの即時関数

(function() { }()); http://unitopi.com/js-function/ https://qiita.com/raccy/items/50fbb461781c4428be04

JavaScriptでswitch(true)を使うのはif文と比べて可読性悪いから止めといた方が良い

下記は最近書いたswitch(true)とifをここに載せる用に改変したもの。処理内容は同一です。どちらが見やすいか見比べてみてほしいです。 //JS //初期値 const nightStart = 21; const nightEnd = 6; const nowHour = new Date().getHours(); function night()…