超メモ帳（Web式）＠復活

小説書いたり、絵を描いたり、プログラムやったりするブログ。統失プログラマ。

'); } });

SPONSORED LINK

トップ > 技術的な話題 > 今日のお題「ディベロッパーツール」。

今日のお題「ディベロッパーツール」。

技術的な話題 技術的な話題-JavaScript 技術的な話題-jQuery

SPONSORED LINK

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>'); var adsenseCode2 = (function () {/*

SPONSORED LINK

'); if($target_post.parents("div.hatena-asin-detail").is("*")) { $target.eq(adInsertPosition.position -1).before(adContainer); } else { $target_post.before(adContainer); } } }); window.addEventListener("load", function() { adInsertPositions.forEach(function(adInsertPosition) { if(adInsertPosition.condition === undefined || adInsertPosition.condition) { $('.' + adInsertPosition.containerClass).html(adInsertPosition.adCode); } }); }, false); });

f:id:yuki_2021:20201109152247j:plain

今日のお題「ディベロッパーツール」。


今日は新潟旅情篇情熱派の第3日。嫁氏より頂いたブログのお題で適当に２０００文字書きぬく企画第３弾である。今頃僕らは何をやってるのだろうか？　今回の里帰りは嫁さんは友達とかの所に遊びに帰る予定でやってきたのだけど、ひとまず観光もする予定である。棚田を見に連れて行ってくれるという話なので、写真をパシャパシャとってきて帰った後で、旅の感想ブログでも書いてしまうとしよう。


思えば嫁さんと僕は遠距離恋愛で色々な所に行ってきて、このブログでも旅の記録の記事が色々と掲載されている。僕のブログは書きっぱなしで後から自分でもどんな記事があるのか忘れてしまうので、ちょっと整理もせにゃならんなと思う所である。ほんとね、自分でもいつどんな事を書いているのか忘れている事が多いんですよ。twitterでは過去記事の振り返りbotを動作させているので、あれでツイートされた記事を読み返してみて自分でも懐かしい気持ちになったりするのですね。twitterもぼちぼちアクセス数には貢献したりしてくれるけど、あのbotに関しては自分が過去の記事を読み返すために動かしている。


ちょっとブログの方もカスタムして、ランダムアクセスするボタンなんか作れないかな？と思っていたりする。記事の一番下にでもボタンを設置しておいて、そのボタンをクリックすると今までのこのブログの記事からランダムに選び出して表示するような機能などはあっても良い気がする。既に自分でも過去記事全部を読み返すことが不可能な状態にまで陥ってるので、他人が労力をかけてまで過去記事を掘り返そうというエネルギーのある人は少ないであろう。なんか、過去記事を生かせるような仕組みは欲しいよね。


こういう記事があったけど、今でも動くかは未知数だな。自分でjQueryを使って実装した方が早いかもしれないな。


https://www.du-soleil.com/entry/sitemap-random-jquerywww.du-soleil.com


最近のはてなブログはsitemapは個別記事を表示してはくれないし、さっさと自前で自分のブログをクロールするクローラなりを作ってしまってAPIにしてそれを叩く処理でも作りましょうかね。全部、ブログパーツなのにデータ取得もJavascriptで動かす処理というのも表示速度が遅くなってしまうしあんまり好みじゃない。僕はやれと言われたらバックエンドもフロントエンドも関係なくやってしまうけど、元々単なるサーバサイドのPHPerである。勉強がてらでWebAPIはnode.jsで作ってしまうというのも手だけど、準備してるレンタルサーバがさくらインターネットのスタンダードコースなので、nodejsをインストールするのもプロセス動かすのも無理そうだ。わざわざAWSまで使ってやるような事でもなさそうだし、Google Apps Scriptで完結させてしまうのも手か。


さて、前置きが長くなったが今日のお題は「ディベロッパーツール」である。なんでまぁ、技術的な話題などを色々と考えていたのだけど、別段、ディベロッパーツールの凄い裏技的なものは僕はあんまり知らないよな。前述したように、僕の専門はどっちかというとサーバサイドであるし、フロントエンドは無理やりjQueryをググりながら弄繰り回す程度の知識しかない。


とはいえ、まぁ、僕もwebプログラマの端くれでありますし、ディベロッパーツールの使い方ぐらいは知っている。ちょっとEvernoteの中でも漁ってみよう。


基本的に使うとしたらこんな所じゃないの？みたいなものを紹介しているのはこのページであろう。


www.buildinsider.net


CSSの修正なんかをする時によくディベロッパーツールを使うのだけど、表示しているWebのHTMLやCSSを直接編集できるので、リアルタイムで表示の編集などをすることが出来る。これはweb開発の現場では基本的なものとしてよく使う。後は、networkでの反応速度なんかを調べて表示速度のボトルネックを探したりだとか、javascriptのデバッグ機能を使ってバグを洗い出したりだとかはよく使う。


まぁ、この辺りはweb開発とかでは基本的な所。最近はJavascriptのフレームワークが複雑になっているのであり、ディベロッパーツールでも使い方が分からないような裏技的なものが沢山ある。こっちの記事などは今からでも解読して理解しておかないといけないかもしれない。


qiita.com


なんというか、フロントエンドも色々と勉強せんとならんよなーとは常々思っている。最近興味があるのは、Vue.jsとかReactとかは勉強しておけば色々と役立ちそうだよなーというのは分かる。情報は調べておいて知識は身に付けないとならないですなぁ。

あわせてよみたい


www.ituki-yu2.net
www.ituki-yu2.net
www.ituki-yu2.net