日常的な、余りに日常的な: Javascript

ラベル Javascript の投稿を表示しています。すべての投稿を表示

2019/07/18

フロントエンドフレームワーク

Web界隈におけるメインストリームの流行。
特にフロントエンド/Javascript系。
やっぱ或程度は乗っかっておかねばらない。

まあ別に乗らなくても理解してりゃいいんだけれど、乗った方が理解が早い。

つうか私は雑魚なので使わないと理解できない。

できれば流行り切る前に乗っておきたい。

多くの場合、流行の技術には人も集まるし、利用の幅が広がったり熟れてくるのが早くなる傾向がある。

できるだけ少ない労力でモノを作るには、流行り物に乗っかるのが一番だ。

また同じ技術を長く使うことができれば、学習に割かねばならない労力も減るってモノだ。

私には自分で一から何かを作る能力も気力も無いので、在りモノを繋げてでっち上げる他ないのだ。

私は楽がしたいのだ。兎に角楽がしたいのだ。

ちょい前まで結構長い間、Web系から離れていたのだけれど、最近またちょいちょい触っている。
Javascriptのletとconstは、もうそろそろ、殆どの場面で使っていっていい気がする。
Bootstrap4にはやっと慣れてきた。
jQueryは息が長くて素晴らしいね。
w2uiはイットキめっちゃ使ったけど、ここ数年更新が無い・・・。
prototype.jsとかどうやって使ってたのかさえ覚えていない。

で、よ。
一寸複雑なことしようとすると、あると便利なフロントエンドフレームワーク。
ReactかVue.jsか、どっちに乗っかろうかという話。
jQueryかprototype.jsか、の時代を彷彿とさせる。
どっちが今後息が長く流行り続けるのか。
或はどちらかはどちらかに駆逐されたりするのか、それとも共存するのか。
現状ではReactなんだろうけれど、Vue.jsも自由な感じでどっかでパッと飛び出しそうな感じはある。
或は結局両方流行り切らず、jQuery+αでええやん、という話になってきたりするのか。
お気に入りのJSライブラリとかがjQuery依存だったりして、結局jQueryは使い続けなければならなかったりすることも多いだろうし・・・。
或はAngularとか？
息の長さから言えば、Angularが強そうではあるけれど・・・。

2016/03/19

Web系言語

Web系言語をとても久し振りに触ってみたり。

JSONファイルをUTF-8のBOMアリで返していることに気付かず、頭の3byteの所為でjQueryでパースできずに半日悩んだり。
ハッシュのキーの綴り間違いに気付かず丸一日悩んだりとか。
久し振りのWeb系だからと言って言い訳にならない感じで躓いている。

Ajaxとかで普段よりも非同期処理が多くなるので、処理実行のタイミングとかに気を付けつつ、処理やソースが猥雑にならないように気を遣いつつ、Collback地獄にも陥らないように。
普通の関数のネストとかあんまり気にならないのだけれど、何故かCollbackのネストは厭なんだな。
なんか書き方を工夫すればCollbackも見易くなったりするのかね。
あとTimerもあんま好きじゃないんよな・・・。

そういや最近prototype.jsを見かけないなあ。
私がjQuery系ばっかなので、単に情報を見落としているだけかも知れないけれど。
私も昔はprototype.jsを使っていたのだけれど、結構早い段階で特にコレといった理由も無くjQueryに移行したように記憶している。

まあそんな感じで。

2013/10/25

iGoogleが終わる

私がブラウザ（Chrome）のスタートページに設定していることでお馴染みのiGoogleが、あと一週間ぐらいで終了する。
代替サービスを探してたんだけど、どれもイマイチしっくりこないんだよな。
巷ではNetvibesがイカすとかいう話なんだけど、自由なHTMLをぶっ込める機能が無くなってしまったみたいだし、どうも痒い所に手が届かなかったりするんで断念する。
Chromeの新しいタブが最近の仕様変更で狂ったことになってることもあって、Chromeのスタートページを新しいブランクタブにして、新しいタブにまつわるChrome拡張機能を入れたりしてどうにかしようかとも考えたけど、Chrome拡張もあんまいい感じのが無いんだよな。
因みに新しいタブの問題はchrome://flagsを弄って仕様変更前に戻した。
てことで、今一番有り得そうな案は、ローカルにHTMLファイルを置いて、それをブラウザスタート時に読み込む感じにしようかと。
ほいでRSSのXMLを取ってきてjavascriptでパース＆表示とかそういう感じ。
これなら自分で好きなようにできそうな気がする。
でも作んのちょー面倒臭い・・・。
どっかでローカル用javascript製RSSリーダとか転がってないかね。
あー、慥かGoogle謹製の何かがあったような気がするんだけど、何だっけなあ。

2013/04/05

夕桜

蟻と夕桜 posted by (C)Ludwig D. Omen
桜の季節。
もう散るけどな。

-----
IE8無視って書いたJavascript（jQuery）をIE8に対応させるのがすげー面倒臭い。
jQueryのオプションを列挙したりするときの最後のオプションの後にカンマが付いてたらそれだけで全体が動かんし。
jQuery UIとか結構多くの部分がまともに動かんし。
てかCSSも全然思ったようにレンダリングされない。
標準化が進んでブラウザ間の解釈の相違なんて過去の問題かと思っていたけれど。
否、そう思いたかったけれど。

くそー、クソめんどくせー、マジうんこめんどくさらしょす、と思ってググったら素敵な呪文があるそうで。
HTMLのヘッダに
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
と書くだけ。
IEの互換モードを最新の互換モードに強制するおまじない。
これだけでちゃんと動くようになった。
一つ賢くなりました。

2013/02/14

jQuery UIのアコーディオンでハマる話

C++ばっかやってて久々にjavascriptとか触ると、すげーおっかなびっくりになる。
例えばC++に比べてjavascriptは型がユルいんで、「これ渡してちゃんと受け取ってくれるんやろか」とか不安になったりする、とか。そういうの。
言語の考え方が違うんで、その切り替えに一寸時間が掛かったりする。

jQuery UI。
因みに1.10.0。
一旦.accordion()で設定した後で要素を追加しても、そのままでは追加された要素のとこはaccordionにならないっぽい。
色々テストコード書いてみたりしたけど、うまくいかず、ビミョウにハマる。
うーん。どうしたものか。

他のjQueryパーツを寄せ集めて自分で組み立てた方が早いか・・・。
と思いつつ一寸調べてみたら、どうもイッペンdestroyしてから.accordion()で設定し直さなければならないっぽい。
てかちゃんとAPI Document読めっつー話。
オウケイ。

ほいじゃあつって、テストコードの頭に.accordion("destroy")をくっつけてみたんだけど、うまくいかない。
どうも.accordion()で設定されてない状態でdestroyするとイカンっぽい。
なので最初に一回.accordion()で設定してから、要素が追加される度にdestroyして再度設定し直す感じで。
これでOK。

解ってみれば簡単な話なんだけど、解るまでが疑心暗鬼な感じ。
まあこの辺がセンスの無さですな、という話。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
//<h3>に番号振る用
var sum=0;
$(function(){
 //取り敢えずイッペンaccordion作っとく
 $("#chau").accordion();
 
 //ボタンクリックで要素追加、その後accordionの設定
 $("#button").bind("click", function(){
  var chau = "<h3>chau"+sum+"</h3>"
   +"<div>chau chau chau? chau chau,"
   +" chau chau chaun chau?</div>";
  $("#chau").append(chau);
  sum++;
  
  setAccordion();
 });
});

//アコーディオンの設定
//イッペンdestroyしてから設定する
function setAccordion(){
 $("#chau").accordion("destroy");
 $("#chau").accordion({
  header: "h3",
 });
}
</script>

</head>
<body>
 <button id="button">add</button>
 <div id="chau"></div>
</body>
</html>

こんな感じ。
何故かsyntaxhighlighterで<br />が使えない・・・。

2012/04/03

seesaa2movabletype

ほいできました。
seesaaからエクスポートした記事データファイルの日付形式をMovable Type形式に変換するだけのヤッツケスクリプト。
seesaa2movabletype
あはは、コードめっさ汚い。
所々Javascriptの標準的な書き方から外れてるし、Javascript書きから見たらすげー気持ち悪いコードなんだろうなあ。

zipファイルを解凍してできたフォルダの中のindex.htmlをFirefoxかChromeで開く。
ボタンをクリックでファイルダイアログが出てくるので、エクスポートしたファイルを選択（複数選択可）して「開く」。
複数ファイルの場合はその合計サイズが1MBより小さくなるように。
読み込めれば「Run」ボタンが有効になるのでクリック。
読み込んだファイルの数だけ「File: hogehoge.log ...Done」みたいなメッセージが出て、その後downloadのリンクが出るのでそいつをクリック。
Chromeだとそのままダウンロードできるみたいだけど、Firefoxだと新しいタブに開く。
この場合はそのタブへ行って右クリックで「名前を付けてページを保存」。
複数ファイルを読み込んだらここで一つにまとまってる筈。
こいつをMovableType2Bloggerで変換すると、日付がおかしくならずにBloggerインポート用のxmlファイルが出力される筈。
で、できたxmlファイルをBloggerにインポートすればOK。
今日の時点ではね。
いつMovableType2Bloggerが無くなるか分からないし、いつSeesaaがエクスポートファイルの仕様を変更するか分からないし。

多分Firefoxのがイイね。
Chromeはなんか設定せんといかんっぽいけど、その仕方が判らない。
起動時引数を与えたらいいとかいう話を読んだけど、現バージョンのChrome18だとそれではダメっぽい。
レジストリいじるのもいややしなあ。
ってことで、Firefoxのがいいんじゃないかね。多分何もしなくていけると思う。
フォルダの中の他のは、script.jsが私の書いた汚えコードで、moment.jsとjquery.jsがMIT Licenseのjsライブラリ、style.cssがスタイルシートですな。
一応決めとくと、script.jsはパブリックドメインで。

使うときは自分でちゃんと確かめて使ってください。
解らなかったら手を出さないが正解。
まあ誰がつかうねんっちゅう話でもあるだけど。
あと私もうメンテとかしないので。

ヤッツケるのにめっさ時間掛かった。
流石に泣きそうになったね。
コアの部分はMoment.js使ったら一瞬でできたんだけど。
Moment.jsを使えば何も考えずに日付や時間をいじれる。ちょー楽。
一箇所でしか使ってないけど、これを標準のDateでやろうとすると、10行ぐらい要りそう。
10行ぐらい書けって？だが断る。
Rubyとかなら標準ライブラリで同じようなことができるんだけど、Javascriptは標準のDateがイマイチ使い勝手悪いんだよな。
あとjQueryはdocument.getElementByID("hoge")とか書くのが面倒臭いから使ってる感じだけど、あると何かと便利。

一番の問題はファイル入出力。
完全に見立てが甘かった。
File APIのW3Cの説明見てもあんましよく解らないし。
ファイル読み込みが非同期なので、いつ読み込み+後処理が終わったのか判らないってのも苦戦した。
せめてJavascriptにwait()とかsleep()とかがあればもう少し楽だったんだけど。
取り敢えず500msあれば読み終わるだろうってんで、setTimeout()で処理ファイルのインデックス番号*500ms、というなんかすげー気持ち悪い処理をしている。
今落ち着いて考えればもう少し他の仕方があったけど・・・。
まあ書き直すのメンドい。
ファイル書き込みも取り敢えずこういうことだろうってので書いてるけど、私この部分ちゃんとは理解してない。
File API: Writeをパッと見た感じ、なんかもう一寸うまい方法がありそうだけど。
メンドい。

Seesaaがまたメンテで書き込めない。
マジで心が折れる。
てことで、Bloggerで記事を書くのはこれが最初。

登録: 投稿 (Atom)