- 投稿日：2020-03-30T22:04:21+09:00
パターン指定型パスワード ジェネレーター (JS版)
JavaScript を思い出す & 訓練すべく作ってみる。
IE8 でも動作するようにしたら、かなりアレな感じになった。
(追記: IE6 は OK で IE5 はダメだった)
HTMLファイル
ppwgen.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>パターン指定型パスワード生成</title> </head> <body onload="cpwSample();"> <h1>パターン指定型パスワード生成</h1> <hr> <p> <input type="text" id="cpwinp1" size="50" placeholder="ここに生成パターンを入力" style="font-size: large;" /><br/> <input id="cpwgen" type="button" value="クリックすると生成します" onclick="cpwStart('1');" /> </p> <p>パスワード（JavaScript によるローカル生成です）：</p> <blockquote><pre id="cpwout1">なし</pre></blockquote> <hr> <p>文字の選択は、'%' の後に</p> <blockquote> <div>% 種類 </div> <div>% 文字数 種類 </div> </blockquote> <p>の形式で指定します。文字数を省略すると１文字になります。</p> <blockquote> <table border="1" style="border-collapse: collapse; border-spacing: 0px;"> <tr><th> 種類 </th><th>内容</th><th>文字</th></tr> <tr><td style="text-align: center;">b</td><td> 2進数の数字 </td><td> 01 </td></tr> <tr><td style="text-align: center;">o</td><td> 8進数の数字 </td><td> 01234567 </td></tr> <tr><td style="text-align: center;">d</td><td> 10進数の数字 </td><td> 0123456789 </td></tr> <tr><td style="text-align: center;">X</td><td> 16進数の数字(大) </td><td> 0123456789ABCDEF </td></tr> <tr><td style="text-align: center;">x</td><td> 16進数の数字(小) </td><td> 0123456789abcdef </td></tr> <tr><td style="text-align: center;">A</td><td> 英文字 </td><td> ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz </td></tr> <tr><td style="text-align: center;">C</td><td> 英文字(大) </td><td> ABCDEFGHIJKLMNOPQRSTUVWXYZ </td></tr> <tr><td style="text-align: center;">c</td><td> 英文字(小) </td><td> abcdefghijklmnopqrstuvwxyz </td></tr> <tr><td style="text-align: center;">B</td><td> 英文字の母音 </td><td> AEIOUaeiou </td></tr> <tr><td style="text-align: center;">V</td><td> 英文字の母音(大) </td><td> AEIOU </td></tr> <tr><td style="text-align: center;">v</td><td> 英文字の母音(小) </td><td> aeiou </td></tr> <tr><td style="text-align: center;">D</td><td> 英文字の子音 </td><td> BCDFGHJKLMNPQRSTVWXYZbcdfghjklmnpqrstvwxyz </td></tr> <tr><td style="text-align: center;">Q</td><td> 英文字の子音(大) </td><td> BCDFGHJKLMNPQRSTVWXYZ </td></tr> <tr><td style="text-align: center;">q</td><td> 英文字の子音(小) </td><td> bcdfghjklmnpqrstvwxyz </td></tr> <tr><td style="text-align: center;">Y</td><td> 英数 </td><td> 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz </td></tr> <tr><td style="text-align: center;">Z</td><td> 英数(大) </td><td> 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ </td></tr> <tr><td style="text-align: center;">z</td><td> 英数(小) </td><td> 0123456789abcdefghijklmnopqrstuvwxyz </td></tr> <tr><td style="text-align: center;">W</td><td> 英数と '_' </td><td> 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_ </td></tr> <tr><td style="text-align: center;">L</td><td> 英数(大)と '_' </td><td> 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_ </td></tr> <tr><td style="text-align: center;">l</td><td> 英数(小)と '_' </td><td> 0123456789abcdefghijklmnopqrstuvwxyz_ </td></tr> </table> </blockquote> <p>複数の連続指定</p> <blockquote><div>%2c%3x%4d</div></blockquote> <p>を</p> <blockquote><div id="cpwinp2">%{2c3x4d}</div></blockquote> <p>として、{..} で簡略化できます。</p> <blockquote><pre id="cpwout2" style="color: gray;"></pre></blockquote> <p>さらに</p> <blockquote><div id="cpwinp3">%3{2c3x4d}</div></blockquote> <p>とすると、{..} を３回の繰り返しにできます。</p> <blockquote><pre id="cpwout3" style="color: gray;"></pre></blockquote> <p>省略形の途中に文字を入れるには、バックスラッシュ "\" を使って</p> <blockquote><div id="cpwinp4">%{2c\-3x\-4d}</div></blockquote> <p>とします。(バックスラッシュなしでも可能な場合があります)</p> <blockquote><pre id="cpwout4" style="color: gray;"></pre></blockquote> <p>選択する文字を限定するには [..] を使って</p> <blockquote><div id="cpwinp5">%20[ABHKO]</div></blockquote> <p>とします。例では ABHKO のどれかが出てきます。</p> <blockquote><pre id="cpwout5" style="color: gray;"></pre></blockquote> <p>選択文字を [..] の中に連続した文字の順番で並べる場合</p> <blockquote><div>%10[ABCDEF]</div></blockquote> <p>は<p> <blockquote><div id="cpwinp6">%10[A-F]</div></blockquote> <p>として、[ 開始 - 終了 ] で簡略化できます。</p> <blockquote><pre id="cpwout6" style="color: gray;"></pre></blockquote> <hr> <p>サンプル</p> <p><span>書式を列挙</span><span> : </span> " <span id="cpwinp11">%b %o %d %X %x %A %C %c %B %V %v %D %Q %q %Y %Z %z %W %L %l</span> " </p><blockquote><pre id="cpwout11"></pre></blockquote> <p><span>書式を列挙(空白なし)</span><span> : </span> " <span id="cpwinp12">%b%o%d%X%x%A%C%c%B%V%v%D%Q%q%Y%Z%z%W%L%l</span> " </p><blockquote><pre id="cpwout12"></pre></blockquote> <p><span>書式を列挙('{..}' による省略形)</span><span> : </span> " <span id="cpwinp13">%{bodXxACcBVvDQqYZzWLl}</span> " </p><blockquote><pre id="cpwout13"></pre></blockquote> <p><span>10桁の数字</span><span> : </span> " <span id="cpwinp14">%10d</span> " </p><blockquote><pre id="cpwout14"></pre></blockquote> <p><span>ライセンス キー風</span><span> : </span> " <span id="cpwinp15">LK%5{\-C2Z3d}</span> " </p><blockquote><pre id="cpwout15"></pre></blockquote> <hr> <script type="text/javascript"> function cpwSample() { for (var n = 2; n <= 20; n++) { var inp = document.getElementById("cpwinp"+n); var out = document.getElementById("cpwout"+n); if (inp && out) cpwMake(out, inp.innerText, 3); } } </script> <script type="text/javascript"> <!-- var cpwPatternMap = cpwGetPatternMap(); function newScriptingDictionary() { try { return new ActiveXObject("Scripting.Dictionary"); } catch (e) {} try { return new cpwScriptingDictionary(); } catch (e) {} } function cpwScriptingDictionary() { this.map = new Map(); this.add = function(k, v) { this.map.set(k, v); } this.Exists = function(k) { return this.map.has(k); } this.Item = function(k) { return this.map.get(k); } } function cpwGetPatternMap() { var dict = newScriptingDictionary(); dict.add('b', '01'); dict.add('o', '01234567'); dict.add('d', '0123456789'); dict.add('X', '0123456789ABCDEF'); dict.add('x', '0123456789abcdef'); dict.add('A', 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'); dict.add('C', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'); dict.add('c', 'abcdefghijklmnopqrstuvwxyz'); dict.add('B', 'AEIOUaeiou'); dict.add('V', 'AEIOU'); dict.add('v', 'aeiou'); dict.add('D', 'BCDFGHJKLMNPQRSTVWXYZbcdfghjklmnpqrstvwxyz'); dict.add('Q', 'BCDFGHJKLMNPQRSTVWXYZ'); dict.add('q', 'bcdfghjklmnpqrstvwxyz'); dict.add('Y', '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'); dict.add('Z', '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'); dict.add('z', '0123456789abcdefghijklmnopqrstuvwxyz'); dict.add('W', '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_'); dict.add('L', '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_'); dict.add('l', '0123456789abcdefghijklmnopqrstuvwxyz_'); return dict; } function cpwMake(out, pattern, count) { var res = cpwGenerator(pattern, count); while (out.firstChild) out.removeChild(out.firstChild); out.appendChild(res); } function cpwStart(suffix) { var inp = document.getElementById("cpwinp" + suffix); var out = document.getElementById("cpwout" + suffix); cpwMake(out, inp.value, 10); cpwSample(); } function cpwRandom() { this.choice = function(tab) { return tab.charAt(Math.floor(Math.random() * tab.length)); } } function cpwGenCharSet(charset) { this.charset = charset; this.generate = function(rnd) { return rnd.choice(this.charset); } } function cpwGenCount(count, generator) { this.generator = generator; this.count = count; this.generate = function(rnd) { var r = ''; for (var n = 0; n < this.count; n++) r += this.generator.generate(rnd); return r; } } function cpwGenList(generators) { this.generators = generators; this.generate = function(rnd) { var r = ''; for (var n in this.generators) r += this.generators[n].generate(rnd); return r; } } function cpwPatternCharList(pattern) { var clist = new Array(); var p = ''; for (var cp = 0; cp < pattern.length; cp++) { var c = pattern.charAt(cp); if (p != '\\') { clist.push(c); p = c; } else { clist.push(clist.pop() + c); p = ''; } } return clist; } function cpwPatternIterator(pattern) { this.clist = cpwPatternCharList(pattern); this.pointer = 0; this.done = (this.pointer >= this.clist.length); this.next = function() { var c = ''; if (!this.done) { c = this.clist[this.pointer++]; this.done = (this.pointer >= this.clist.length); } return c; }; this.rewind = function() { --this.pointer; return this; } } function cpwUnescape(s) { return ((s.length > 1 && s[0] == '\\') ? s[1] : s); } function cpwParsePat(ptr, nest) { var cnt = 0; var len = -1 var c = ''; while (!ptr.done) { c = ptr.next(); if (!('0' <= c && c <= '9')) break; cnt = (cnt * 10) + parseInt(c, 10); len = cnt; } if (len < 0) len = 1; switch (c) { case '': throw undefined; case '{': return new cpwGenCount(len, cpwParseSubPat(ptr)); case '[': return new cpwGenCount(len, cpwParseSubSet(ptr)); default: break; } if (cpwPatternMap.Exists(c)) return new cpwGenCount(len, new cpwGenCharSet(cpwPatternMap.Item(c))); if (nest) { if (c.length > 1 && c[0] == '\\') return new cpwGenCharSet(cpwUnescape(c)); var cu = c.toUpperCase(); if (c != '}' && !('A' <= cu && cu <= 'Z')) return new cpwGenCharSet(c); } throw undefined; } function cpwParseSubPat(ptr) { var r = new Array(); while (!ptr.done) { var c = ptr.next(); if (c == '}') break; r.push(cpwParsePat(ptr.rewind(), true)); } return new cpwGenList(r); } function cpwParseSubSet(ptr) { var r = new Array(); var s = new Array(); while (!ptr.done) { var c = ptr.next(); if (c == ']') break; if (s.length < 2) { s.push(c); continue; } a = cpwUnescape(s[0]); if (s[1] != '-') { r.push(a); s.shift(); s.push(c); continue; } b = cpwUnescape(c); var cs = a.charCodeAt(0); var ce = b.charCodeAt(0); for (var c = cs; c <= ce; c++) r.push(String.fromCharCode(c)); s = new Array(); } p = ''; for (var n in r) p += r[n]; for (var n in s) p += s[n]; return new cpwGenCharSet(p); } function cpwParse(pattern) { var ptr = new cpwPatternIterator(pattern); var r = new Array(); while (!ptr.done) { var c = ptr.next(); if (c != '%') g = new cpwGenCharSet(c); else g = cpwParsePat(ptr, false); r.push(g); } return new cpwGenList(r); } function cpwGenerator(pattern, count) { var parent = document.createElement('div'); try { var g = cpwParse(pattern); var rnd = new cpwRandom(); for (var i = 0; i < count; i++) { var el = document.createElement('div'); el.innerText = g.generate(rnd); parent.appendChild(el); } } catch (e) { var el = document.createElement('div'); el.innerText = 'Error: invalid pattern: ' + pattern; parent.appendChild(el); } return parent; } // --> </script> </body> </html>HTML を開くと、こんな感じ。
- 投稿日：2020-03-30T18:33:26+09:00
【0円ipadプログラミングの限界に挑む】iPad mini 5だけで本格的なweb開発出来るのかやってみたwwwww
qiita初投稿です。この記事ではipad一台だけでお金かけずにweb開発できるか検証したらどうなったのかを記したものであります。
スクショ及びgif画像多めです。
結果的にはこちらチョット何言ってるの？？
もうちょっと詳しく説明すると、HTMLやCSS、JavaScript更にはJqueryを使って、フロントエンドのweb開発をするということです。Githubも使います。
7.9インチのipadで
勿論、macやwindowsなどのパソコン使用禁止
なんでmini 5なのかというと、手元にあるapple端末がそれしか無いからです。
そんなこと出来るの！？と思った方もいれば、何とは言いませんが過去によく似た記事を見た人はそういえば！と思った方もいるかもしれません。
ですがその記事で紹介されたアプリは一部お金がかかってたのでこの記事で紹介するアプリは全て0円です。検証
1 用意するもの
- iPad
- Bluetoothキーボード（これがないと辛い）
以上！！
2 githubにてRepositoryを作成する
Repositoryがある方は３にスキップ。
iPad版chromeかsafariでGitHubにログインします。
アカウントを持っていない方は「サインアップ」から作ってください。
Repositoryを作成します。
馴染みのある画面で安心しました。
Repository nameの所は必ず入れてください。僕は「ipadonly」という名前にしました。
create Repositoryを押すとRepositoryの作成が完了しました。
ただ、ここからかなり苦労したので出来るだけ詳しく説明していきます。3 working copyをインストール～Repositoryの入手（？）
appstoreからworking copyというアプリを入手します。このアプリがあるからこその検証なのです！
開くとこんな感じ
画面の青い文字のCreate（もしくは「Repositories」の右の＋）を押すと吹き出しが出てきます。
「Clone repository」を選択します。するとウィンドウが出てくるので
Sign Inをタップ。すると以下のようなウィンドウが開くので、
メアドとパスワードを入力してサインイン！
すると～？
さっき作ったRepositoryが…出てきた！！！
もうこの時点で感動してきたのは僕だけじゃないはず...
1. Repositoryをタップ
2. URLがニョキっと上に移動するのかわいいすき
3. ウィンドウ右上の「Clone」が「Clone」になるのでタップ
するとッ！！？
どうやらRepositoryを開けたようです！！！
ステップ3終わり！4 いよいよweb開発
それでは早速、コードを書きたいと思います！！その前にフォルダを作成しましょう！
1. 「+」をタップ
2. Create directoryをタップ（何でdirectoryなんすかね）
3. 任意の名前を入力。僕は「tekito」にしました。
Enterを押すとフォルダの作成が完了し、勝手にフォルダが開きます。
ここから皆さんを驚かせます！
- 作成したフォルダを開き、＋をタップ。
- 「Create text file」をタップします。
- 名前を「index」にしてみてください。 するとファイル名の隣に緑色の紙のアイコンが出てきました。画面右上が「plain text」になっているのが分かります。普通のテキストファイルですね。
それではもう一度、1と2の手順をしてファイルを作成し、 今度は名前を「index.html」にしてみてください。するとどうでしょう？
VScodeやん！！！！！！？？？
なんと！？ファイル名の横のアイコンが紙ではなく「</>」になってる！
しかも画面右上の「plain text」が「HTML」に変化したの、分かりますか！？
これは間違いなくッ！！今僕が作成したファイルはHTML形式！！！
今度こそプログラムが書けるので、index.html<html> <head> <title>あ</title> </head> <body> </body> </html>とりあえずこれだけ書いてみます。するとどうでしょう？
シンタックスハイライトが付いてるだと！！！？
待ってくださいこれ書いたっていうかコピペして張り付けただけなんすけど！？
これってもしかして...
あっ（ ＾ω＾）・・・
いえ、ただVScodeでお馴染みインテリセンスのような自動補完システムが搭載されているのではと思っただけなんです...なかった...やっぱりインテリセンスがないとVScode使ってる身としては致命的ですねー...どうすれば
そうだ！appstoreで探すんだ！！！VScodeに負けない無料エディタアプリを！！！
「editor code」で検索っと…
ん？なんだこのアプリは？評価高いやんけ・・・（インスコする音）！！！！！？！？！？？？！？
キタああああああああああああああああんあんあんあんｱ”ﾝｯ！！！！！！！
これを…これを求めてたんや！！！！！
今から全力で解説します！！！
まず、以下のアプリをインスコしてください。
開きます。
Open Koderをタップ。ちなみにその上のFollow us nowをタップすると公式のツイッターに飛びます。ツイートの頻度少な過ぎたのでフォローはしませんでした。
画面左下の「＋」をタップ。
アイコン好き…
Open Other App’s fileをタップ
ブラウズ➡︎Working copy➡︎ipadonly➡︎tekito➡︎アイコンが「HTML」と書いてある紙の方のindex
の順番にタップします。すると先程開いたindex.htmlが開くかと思います。
そしてカーソルを<diの後に持っていくだけでインテリセンスが表示されます！
いや〜これでようやく本格的なプログラミングが出来るわけですよ！
手始めに、色んなタグを使ってHello Worldの出力でもしてみましょう！！index.html<html> <head> <title>あ</title> </head> <body> <div> <h1>Hello World!</h1> <h2>Hello World!</h2> <p>Hello World!</p> </div> </body> </html>なんと自動的に保存されるのでctrl+sを押さなくていい！！
よし。じゃあクローム開いてindex.htmlをドラッグアンドドロッ
そういやプレビューってどうやるんや。。。
プレビューがないと話になりません。そんな時はworking copyを開いて下のgifの通りにします。
はい！これでプレビューが表示されました！！
え？何？クロームで表示したい！？
えっと！頑張って表示できるようにはしましたがお勧めできません。割と手間がかかりますし、バグが起きるリスクがあります（起きた）
なによりipadじゃないと無理です。
1. Koder code editorを再び開きます。
2. index.htmlは開いた状態にして、画面上部の歯車アイコンをタップ。
3. Local File Accessをタップ
4. Enable Local File AccessがONになっているか確認します。
5. 太字で「http://...」と書いてあるのが確認できます。その太字で書いてあるリンクをクロームの検索ボックスに貼り付け検索します。
この時、クロームとKoderを分割画面表示してください。
gif、見難いですがよく見るとindex.htmlの7行目が<h1>Hello!あsdhfjkl</h1>になっています。なのにクロームの方のプレビューをよく見るといまだにHello World!になっているのでやめたほうがいいです。
working copyに戻って、今度はindex.cssとindex.jsを作成します。
分割画面に対応してて偉い！
ちゃんとcssとjsのファイルになっていますねー
今度はhtmlとcssがちゃんと動くのか、index.htmlとindex.cssをいじってヘッダーを作りたいと思います。それぞれのファイルはこちらからどうぞ。（開きますかね？）
パソコンだとこんな感じ
簡単すぎたかな？
じゃあ次！ipadだとどうなるのか！？
明朝体になってて草
それ以外は特に何も変わってなさそうですね！jqueryは動くのか！？
jqueryはJavaScriptの書き方などを簡単にすることが出来ることで有名ですし、僕もjavascriptそっちのけで勉強してますw
ですが、ipadで書けるのでしょうか...？とりあえず、CDNでやってみたいと思います。
まず、index.html、.css、.jsをこちらの通りとします。
対照実験。パソコンだとjqueryでこんな感じで動いてます。
ではipadではどうんなふうに動くのか！？そもそも動くのか！！？
めっちゃ理想通りに動いてるやんけ…(´；ω；`)
いや～ここまできたらもう感無量です！無事にjquery動いてよかったです！ステップ4大成功！！5 githubで色んな動作する
commitしてみる
まずcommitをしてみます。windowsではVScodeのターミナルを開いて色々コードを書いてローカルリポジトリにcommitしてpushをしました。
ターミナルの存在しないipadはどうなの？何かあったらやばいのでipadonlyとは別にsampleというリポジトリを作成。適当にhtmlファイルを作成。
画面上部を見る、と
色んなアイコンがありますね...
それらの中で左から3番目の指紋みたいなマークをタップ。
commitをタップ。
上のテキストボックスにsummaryを、その次にdescriptionを入れる感じかな？
htmlファイルの隣のチェックボックスにチェックを入れてCommitを押せばローカルリポジトリへのcommitが完了します。pushしてみる
ではリポジトリをプッシュしまsy...
うっそだろおおおおおおおおお
どうやらリポジトリやファイルをgithubにpushする動作は有料だそうです。。。
ていうか、commit,revert,pull以外（多分）のgithubの全ての動作が有料でした。パソコンだと何気なく無料で出来るのにipadだと2440円するのはさすがにないと思いました。
ここまでか...いやまだ諦めてない...!!これはあくまでもworking copyなんや...
他のアプリで試すんや...
appstoreで探すんや...gitが使えるツールを...
これはどうかな？
アプリ開いて、サインインして、、、
真面目に説明します。（意味深）
1. サインインしたらヘッダーにNEWSとあります（なんだこれ）。左上の三本線のマークをタップ。
2. RepositoriesのOWNEDをタップ。
3. ipadonlyをタップ。
4. 一番下のSourceをタップ。
5. 編集したいファイルをタップ。（僕はsono2.mdのindex.htmlにしました。）
6. ファイルが開く。
7. 画面右上の共有マークをタップ。からのEditをタップ。
8. ファイルが編集できるようになるので適当に書く。（僕は37行目の「スマホアプリ」を「何か」に変えました。）
9. 編集し終わったら画面右上のsaveをタップ。
10. Upload...と書いてありますが、ここではプッシュのタイトルを記述します。記述し終わったらcommitをタップして完了。
さて、ホントにpushされているのか、windows版githubで確認しようかと思います。
されてたああああああああああああああああ
やっときた...ここまできたらpullもいけるやろ！
今度はpullが出来るかどうか試したいと思います。PCのVScodeでindex.htmlの22行目の「login」を「brain」にしてコードでプッシュ。そしてipadで
このアプリで開いたファイルをKoderで編集できるようにします。まず、上の5番の手順まで進めてindex.htmlが開いた状態にしておきます。
1. 画面右上の共有マークをタップ。からの「Open In」をタップ。
2. 横にスクロールして「その他」をタップ
3. Suggestionsの「Koderにコピー」をタップ
4. Koderが開く。Documentsの右下の＋マークをタップ
5. New Folderをタップするとファイルを作成できるので、任意のファイル名を入力
6. Createをタップ。作成したファイルを開き、「Done」をタップすると、
初回はそのファイルにindex.htmlをコピーしたやつがインポートされる。
2回目以降は恐らく「ファイルが既に存在しますので上書きしますか？」みたいなことが聞かれるのでyesをタップして上書き。
pushしてみる（2回目）
Koderで色々編集した後、command+Aで全選択してコピーしてCode hubでedit modeにしてまた全選択してペースト。するしか方法がないみたいです。効率悪いですね...。
この記事もめっちゃ長くなったのでここで検証を終えたいと思います。検証結果及び感想
今回紹介したアプリは3つ。
- Working copy：以下、WKと略す。git連携ツール。ここでhtmlファイルなどを作成したり、プレビューを確認できる。2440円課金すればgitの全ての動作が可能。
- Koder Code Editor：以下、Koder。ここでプログラムを書くことをお勧めする。
- Code Hub：以下、CH。ここでgitの動作を行うことを勧める。
項目(?) 使ったアプリ 可能か htmlファイルなどの作成 WK 可能 ｼﾝﾀｯｸｽﾊｲﾗｲﾄ WK、Koder、CH 可能 ｲﾝﾃﾘｾﾝｽ Koder、WK、CH Koderは可能 WKは✖ HtmlCssJsのプレビュー WK 可能 jquery WK,Koder 可能だがｼﾝﾀｯｸｽﾊｲﾗｲﾄが微妙 github commit WK,CH WK：ﾛｰｶﾙﾘﾎﾟｼﾞﾄﾘへのcommitは可能 CH:可能 push WK,CH WK：課金しないと無理 CH：なんか違う気がするが可能 pull WK,CH WK：課金しないと無理 CH：ゴリ押しでいける 正直ipadのみで、無課金でここまで出来るとは思っておりませんでした。最後にこの記事を書いた本当の目的なんですが、すべてここに書きました。文下手くそかもしれませんがお読みくだされば幸いです。
![IMG_0327[1].PNG](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F495103%2F93d1c4be-bef0-55e5-5ecb-0dd399a0d2b0.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=d9d5feb326ef88cbdf0cd9bdf0006ad3)
- 投稿日：2020-03-30T17:11:18+09:00
コードの写経したけど、動かない件
コードの写経したけど、動かねぇ...
そんなことは、初心者あるあるかと思います。
いちいち、自力で違いをチェックするのも面倒でしょう。
そんな時は、diffコマンドがおすすめ。（完成品ファイルがある時に限る。）
diffコマンドの使い方
diff [オプション] オリジナルファイル 新しいファイル
が基本です。
結果としては、例えば
1c1
< a
---
> bなどと返ります。
これは、オリジナルファイルの1行目がaから、新しいファイルの1行目がbに変わったという意味ですね。
ちなみに、変更が複数行にわたる時は、数字の部分が1,2とかなります。
コマンドの返りの意味
cは変更の意味ですが、dは削除、aは追加という意味ですね。
- 投稿日：2020-03-30T15:06:38+09:00
なるほどメモ_1
ひとつの親要素の中で子要素をそれぞれ左寄せと右寄せにするには...
親要素に対して
display: flex;
justify-content: space-between;
太字じゃなくするのは
font-weight: normal;
行の高さを指定するのは
line-height:px;
スクロールしても固定させるのは
position: fixed;
固定部分と画像が重なるときは、
z-index: 9999;
背景画像を指定するのは
background-image: url();
背景画像を領域いっぱいに広げるのは
background-size: cover;
padding:上 右 下 左;
liの中にaタグ使ってるときのテキストスタイルを変更するときはaタグに対して指定する
a{
text-decoration: none;
color:white;
}
- 投稿日：2020-03-30T10:27:21+09:00
アワード系のWebサイトで見かける、ゆったりした慣性スクロールの実装
AwwwardsやFWAに掲載されているサイトでよく見かける、ゆったりした慣性スクロール。
http://madies.mx
http://www.amandabraga.com
http://56k.studiovoila.com見覚えがある人もいると思いますが、スクロールの反応が気持ち遅れて来る、自前の慣性スクロールっぽいやつです。これのやり方の参考が少なく実装に手間取ったので、実装例をまとめました。他にも色々なアプローチがありそうですが、参考のひとつとして。
最初に断っておきますが、かなり邪悪な実装なので基本的には非推奨です。ブラウザの本来の機能を上書きする実装の多くは、ユーザーの利益にはならないので、冷静に判断してください。
デモ
https://codepen.io/nishinoshake/debug/dyowbyr採用する利点と欠点
明らかに欠点の方が多いので、利点が勝ることは稀だと思います。
採用する場合は、多くのユーザーに害があることを認めた上で、罪を背負う覚悟で。利点
- このスクロールに心地よさを感じる人がいるらしい
欠点
- 慣れていない人にとっては違和感がある
- スクロール系のライブラリと相性が悪い
- 低スペックなマシンだと見るに耐えない
- 邪悪な実装がサイトの寿命を縮める
原理
スクロールと同期して、transformで要素を滑らせる。以下、スクロールしたいエリアをコンテナと呼びます。
1. コンテナにposition:fixedを設定 2. bodyにコンテナの高さを設定 3. スクロール量をコンテナのtransformに少しづつ設定1.のfixedだけだと、bodyの高さが無くなってスクロールができなくなり、スクロールバーも表示されません。スクロールバーが無いままのサイトや、独自でカスタムしている邪悪なサイトもありますが、これ以上は罪を重ねない方が良いでしょう。
bodyにコンテナの高さを設定すると、通常のスクロールイベントを拾えるので、transformとの同期も楽になります。mousewheelやtouchmoveイベントの実装は辛いので、こちらの方がまだマシです。
前にJavaScriptのイベントをたくさん見られるサイトを作ったので、イベントに不慣れな方はぜひ。
実装例
<div id="container"> ここにコンテンツ </div>class MomentumScroll { constructor(selector) { this.container = document.querySelector(selector) this.scrollY = 0 this.translateY = 0 this.speed = 0.1 this.rafId = null this.isActive = false this.scrollHandler = this.scroll.bind(this) this.resizeHandler = this.resize.bind(this) this.run() } run() { if (this.isActive) { return } this.isActive = true this.on() this.setStyles() } destroy() { if (!this.isActive) { return } this.isActive = false this.off() this.clearStyles() if (this.rafId) { cancelAnimationFrame(this.rafId) } this.rafId = null } resize() { document.body.style.height = `${this.container.clientHeight}px` } scroll() { this.scrollY = window.scrollY || window.pageYOffset if (!this.rafId) { this.container.style.willChange = 'transform' this.rafId = requestAnimationFrame(() => this.render()) } } on() { this.resize() this.scroll() window.addEventListener('scroll', this.scrollHandler, { passive: true }) window.addEventListener('resize', this.resizeHandler) window.addEventListener('load', this.resizeHandler) } off() { window.removeEventListener('scroll', this.scrollHandler) window.removeEventListener('resize', this.resizeHandler) window.removeEventListener('load', this.resizeHandler) } setStyles() { this.container.style.position = 'fixed' this.container.style.width = '100%' this.container.style.top = 0 this.container.style.left = 0 } clearStyles() { document.body.style.height = '' this.container.style.position = '' this.container.style.width = '' this.container.style.top = '' this.container.style.left = '' this.container.style.transform = '' this.container.style.willChange = '' } render() { const nextY = this.translateY + (this.scrollY - this.translateY) * this.speed const isNear = Math.abs(this.scrollY - nextY) <= 0.1 this.translateY = isNear ? this.scrollY : nextY const roundedY = Math.round(this.translateY * 100) / 100 this.container.style.transform = `translate3d(0, -${roundedY}px, 0)` if (isNear) { this.rafId = null this.container.style.willChange = '' } else { this.rafId = requestAnimationFrame(() => this.render()) } } } document.addEventListener('DOMContentLoaded', () => { const momentumScroll = new MomentumScroll('#container') // document.body.addEventListener('click', () => { // if (momentumScroll.isActive) { // momentumScroll.destroy() // } else { // momentumScroll.run() // } // }) })Codepen
See the Pen Minimal Momentum Scroll by nishinoshake (@nishinoshake) on CodePen.
スマホを除外したい
iPhoneやAndroidで実行したくない場合は、ユーザーエージェントを確認して、PCのブラウザの時だけ実行してください。
ゆったりさせるところの抜粋
スピードをパラメータで設定して、段階的に適用していくイメージ。
// 必要なところだけ this.scrollY = 0 this.translateY = 0 this.speed = 0.1 // スクロール時に値を設定 this.scrollY = window.scrollY || window.pageYOffset // レンダリング時に少しづつ実際のスクロール値に近づける const nextY = this.translateY + (this.scrollY - this.translateY) * this.speed他に良い実装があったら知りたい
できる限りの最適化はしているつもりですが、良い実装があったら教えて下さい！
- 投稿日：2020-03-30T05:08:09+09:00
初心者によるプログラミング学習ログ 276日目
100日チャレンジの276日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
276日目は、おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 29, 2020
276日目
・xdデザインカンプからのサイト模写
・FLOU設計にあわせて、コード整理#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日：2020-03-30T02:28:35+09:00
iGarage 体験会カリキュラム
JavaScriptでおみくじを作ってみよう
今日のゴール
ボタンをクリックするとランダムで運勢が表示されるおみくじを作ってみましょう。
↓クリック↓
使用するファイル
MyOmikujiフォルダ内にある、index.html,styles.css,main.jsを編集していきます。
index.htmlでは全体の見た目styles.cssではスタイルmain.jsではアニメーションを主に作ります。
見た目の実装
まずは
index.htmlで全体の見た目を作っていきます。テキストエディタで
index.htmlを開いて、以下を貼り付けましょう。index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>おみくじ</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <script src="js/main.js"></script> </body> </html>これはHTMLを書く際の決まりのようなものです。
次にボタンとなる要素を作ります。
<body>の下の行に、index.html<div id="btn">?</div>を入れましょう。
最初ボタンに表示される?を入れておきました。
また、id="btn"と入れておくと、後でJavaScriptから扱いやすくなります。ここまで出来ているか、
index.htmlをブラウザで開いて確認してみましょう。
?が表示されていればOKです。ボタンのスタイルを作ろう
次に、
styles.cssを編集してボタンのスタイルを作っていきましょう。先程、
id="btn"として?を表示した部分をボタンの形にしましょう。
styles.cssを開いて、styles.css#btn { width: 200px; /* 幅: 200px */ height: 200px; /* 高さ: 200px */ background: #ef454a; /* 背景色: #ef454a */ border-radius: 50%; /* ボタンを円形に */ margin: 30px auto; /* ボタンの位置を上から30px,左右の余白を均等に */ }一度、ブラウザを更新して確認してみましょう。
?の位置がずれてしまっているので、直してみましょう。
margin: 30px auto;の下の行を追加します。styles.css#btn { width: 200px; /* 幅: 200px */ height: 200px; /* 高さ: 200px */ background: #ef454a; /* 背景色: #ef454a */ border-radius: 50%; /* ボタンを円形に */ margin: 30px auto; /* ボタンの位置を上から30px,左右の余白を均等に */ /* ここから */ text-align: center; /* 左右中央揃え */ line-height: 200px; /* 高さ調整 */ color: #fff; /* 文字の色: 白 */ font-weight: bold; /* 太字 */ font-size: 42px; /* 文字の大きさ: 42px */ /* ここまで */ }ブラウザを更新して確認してみましょう。
ボタンをクリックした操作を作ろう
ボタンをクリックできるようにして、クリックした時の処理を書いていきましょう。
main.jsを開いて、main.js'use strict';を入れましょう。これによって厳密なエラーチェックをするようにします。
その下の行に、main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { btn.textContent = 'hit!'; }); }を入れましょう。
ブラウザを更新して変化を見てみましょう。
ボタンをクリックするとhit!と表示されるようになりました。
ここで、ボタンがクリックできることがわかるようにスタイルを追加し、さらに、ボタンの形を整えていきましょう。
styles.cssを開いて、
font-size: 42px;の下の行を追加します。styles.css#btn { width: 200px; /* 幅: 200px */ height: 200px; /* 高さ: 200px */ background: #ef454a; /* 背景色: #ef454a */ border-radius: 50%; /* ボタンを円形に */ margin: 30px auto; /* ボタンの位置を上から30px,左右の余白を均等に */ text-align: center; /* 左右中央揃え */ line-height: 200px; /* 高さ調整 */ color: #fff; /* 文字の色: 白 */ font-weight: bold; /* 太字 */ font-size: 42px; /* 文字の大きさ: 42px */ /* ここから */ cursor: pointer; /* カーソルをポインターに */ box-shadow: 0 10px 0 #d1483e; /* ボタンの下に影をつける */ user-select: none; /* 中のテキストを選択不可に */ /* ここまで */ }一番下の行に、
styles.css#btn:hover { opacity: 0.9; /* ホバーした時に色を薄く */ } /* クリックするとボタンが押し込まれたように */ #btn:active { box-shadow: 0 5px 0 #d1483e; margin-top: 35px; }を追加します。
ブラウザを更新して確認してみましょう。
乱数を表示してみよう
最終的にはランダムで運勢が表示されるようにします。
そのために、乱数を使ってランダムな数値を作ってみましょう。JavaScriptでは、
Math.random()という命令を使うことで０以上１未満のランダムな数値を生成出来ます。
main.jsの'hit!'の部分をMath.random()に変えます。main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { btn.textContent = Math.random(); }); }このようになります。
ブラウザを更新して確認してみましょう。
０以上１未満のランダムな値が生成されるかと思います。
条件分岐で運勢を表示しよう
条件分岐にはif文を使います。
まずは、先程の
main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { btn.textContent = Math.random(); }); }を消して、
main.js{ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const n = Math.random(); }); }とします。
これでnをランダムな数値としています。この
nはMath.random()によって、０以上１未満の乱数となるので、
例えば、大吉を22％の確率で表示したい場合は、main.jsif (n < 0.22) { btn.textContent = '大吉' }をこの行:
main.jsconst n = Math.random();の下の行に入れてあげれば良いでしょう。
また、大吉以外の場合も書いてあげましょう。
main.jsif (n < 0.22) { btn.textContent = '大吉' } else if (条件２) { btn.textContent = '中吉' } else if (条件３) { btn.textContent = '小吉' } else { btn.textContent = '凶' }といったように書いてあげます。
22%の確率で大吉、8%の確率で中吉、13%の確率で小吉、それ以外の場合は凶と表示させるとしたら、
この条件２と条件３をどうすれば良いか考えてみましょう。書けたら、コーチに見てもらいましょう。
最後に、他の運勢を追加したり確率を変えたりして、オリジナルのおみくじを完成させましょう。
体験会カリキュラムはこれで以上になります。
Web開発では、このような全体の見た目、スタイル、アニメーションなどを取り入れながら作っていきます。
体験会カリキュラムを通して、自分オリジナルのWebサイトのアイデアがふくらんだのではないでしょうか。また、見た目だけでなく、サイトそのものの構造も自分で作って行くことになります。
詳しい内容はコーチに聞いてみてください。iGarageでこれらをさらに深く学び、自分だけのWebサイトを作っていきましょう。
- 投稿日：2020-03-30T01:28:47+09:00
qiitaの記事一覧を自分用にわかりやすく
qiitaの記事一覧がページネーションされてしまっていてタイトルを探しづらいので、
qiitaのAPIを利用して超簡易的に自分用に一覧を作りました。
{APIトークン} と {自分のユーザ名} の部分だけは書き換えてください。<? $res = exec('curl -H "Authorization: Bearer {APIトークン}" "https://qiita.com/api/v2/items?per_page=100&query=user:{自分のユーザ名}'); $json = json_decode($res); foreach($json as $a){ $tags = []; foreach($a->{"tags"} as $t){ $tags[] = "[".$t->{"name"}."]"; } ?> <a href="<?= $a->{"url"} ?>" target="_blank"><?= $a->{"title"} ?></a> <?= implode(" ", $tags) ?><br> <? } ?>これで自分の一覧がページネーションなしで表示されます。
スタイルも特に何も当てていないので適当に当ててください。
- 投稿日：2020-03-30T01:28:47+09:00
qiitaの限定公開一覧をわかりやすく
qiitaの限定公開一覧がページネーションされてしまっていてタイトルを探しづらいので、
qiitaのAPIを利用して超簡易的に自分用に一覧を作りました。
{APIトークン} と {自分のユーザ名} の部分だけは書き換えてください。<? $res = exec('curl -H "Authorization: Bearer {APIトークン}" "https://qiita.com/api/v2/items?per_page=100&query=user:{自分のユーザ名}'); $json = json_decode($res); foreach($json as $a){ $tags = []; foreach($a->{"tags"} as $t){ $tags[] = "[".$t->{"name"}."]"; } ?> <a href="<?= $a->{"url"} ?>" target="_blank"><?= $a->{"title"} ?></a> <?= implode(" ", $tags) ?><br> <? } ?>これで自分の一覧がページネーションなしで表示されます。
スタイルも特に何も当てていないので適当に当ててください。