シド・ブックマーカー

少しユニーク（マニアック？）な仕事のコツを発信中。ちょっとしたツールを作ってあげるだけ…

シド・ブックマーカー

少しユニーク（マニアック？）な仕事のコツを発信中。ちょっとしたツールを作ってあげるだけで周りの人が😀‼️な顔をしてくれるのが好きです🐶

  • ブックマークレットで始める業務改善

    皆さんのお仕事をグッと楽にできるかもしれない、ブックマークレットという技術を紹介します。お手元のパソコンですぐ試せます。プログラミング初体験の方でも分かるように解説していきます。最初の記事でどんなことができるのかをまとめていますので、まずはそちらを見てピンとくるかどうかご確認ください。

ブックマークレットで始める業務改善＜中級編＞③ Excelへのコピペを一発で！

前回はこちら。 Webの情報をExcelに転記するルーチンワークはありますか？ 意外と面倒なこの手の作業もブックマークレットで一発です！ 今回のお題： Webページの情報を整形してユーザーに渡す練習用のページを用意しました。 以下のように商品が並んでいます。 この表から、商品番号と価格を抜き出して、以下のようなExcelシートを作りたい、というのが今回のお題です。 皆さんならどうしますか？ ひとつずつコピペしていく手もありますし、webページを全選択 → コピー →

シド・ブックマーカー

    • ブックマークレットで始める業務改善① どんなことができるのか

      このシリーズでは、皆さんのお仕事をグッと楽にできるかもしれない、ブックマークレットという技術を紹介します。 まずは、どのようなことが可能になるのかを画像でザッと見てみましょう！ ブックマークレットは一言でいうと、既存のwebページを無理やり書き換えたり好き勝手やってしまう技術です。プログラミングに詳しくない方でも、初歩のJavaScriptさえ学べば作れます。 以下、ブックマークレットでの業務改善例をお見せします。皆様のまわりに、こんな業務はありますでしょうか？ We

      シド・ブックマーカー

      • ブックマークレットで始める業務改善＜中級編＞② 勝手にリンクを付ける！

        前回はこちら。 初級編では各種フォームの入力を楽にするテクニックを学習しました。 中級編ではもっとアグレッシブに、既存のwebページを好き勝手に書き換えてしまいます。ブックマークレットの真価に触れていただければ！ 表にリンクを後付けする何かのリストがあり、そこから各データの明細ページに飛べれば便利なのに、そうなっていない意地悪なwebシステムはありませんか？ そういうときは、自分でリンクを後付けしましょう！ サンプルのwebページを用意しました。 このwebページに

        シド・ブックマーカー

        • ブックマークレットで始める業務改善＜中級編＞① iframeの中へ！

          前回はこちら。 今回から中級編です。今回は<iframe>タグへの対応です。いきなりマニアックですが、知っていないとはまってしまって進めなくなるポイントですので最初に解説しておきます。 ざっと流し読みして、思い当たる問題に直面したときに見返してください。 <iframe>タグについて<iframe>タグは、webページ上の枠の中に、別のwebページを表示させる（埋め込む）仕組みです。 似たタグに<frame>もありますが、この記事では代表として<iframe>を使って

          シド・ブックマーカー

        ブックマークレットで始める業務改善＜中級編＞③ Excelへのコピペを一発で！

        シド・ブックマーカー

        マガジン

        • ブックマークレットで始める業務改善
          16本

        記事

          ブックマークレットで始める業務改善⑬ 作ったものの配り方

          前回はこちら。 今回で初級編は終わりです。ここまでたどり着いた方は何名いらっしゃるのか🐶 ぜひスキやコメントで存在をお知らせください。 作成したブックマークレットは、それを必要とする人へ配って、チーム全体の生産性を高めていきましょう。 ファイルで配る（非推奨）ブックマークレットを保存している .js ファイルそのものを配って、各自ブックマークレットを登録してもらうのもひとつの手です。しかしこれは煩雑ですので、できるだけ下のWebページを使った方法で配ることをお勧めします

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑬ 作ったものの配り方

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑫ ここまでの総復習

          前回はこちら。 これまで学習したことを活用して、問題を解いてみましょう！✏️ まとめ記事： ⑦ CSSセレクターを使いこなそう ⑨ JavaScriptで要素を絞り込もう ⑩ JavaScriptで要素を操作しよう 総復習の問題以下の「お客様問い合わせ登録フォーム」で、以下の処理を行うブックマークレットを作ってください。 「お問い合わせ日」に、今日の日付を入れる。以下のプログラムで今日の日付を取得できます。 const date = new Date().toLoca

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑫ ここまでの総復習

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑪ JavaScriptで要素を操作しよう

          前回はこちら。 ここまで付いてこれたあなたはすごい！👏 ぜひ自分へのご褒美を買ってあげてください🍨 このシリーズはJavaScriptの入門にもなるように作ってあります。プログラミングの面白さを少しでも感じてもらえると嬉しいです。 ブックマークレットのプログラムの基本は、 Webページ上の操作したい要素（入力フォームなど）を捕まえて、 その要素に対してやりたいことをやる！ です。前回までで、1.に関連する様々なテクニックを学びました。今回は2.に関して、捕まえてき

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑪ JavaScriptで要素を操作しよう

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑩ JavaScriptで要素を絞り込もう

          前回はこちら。 CSSセレクターでは手が届かない「かゆいところ」をカバーする、JavaScriptの関数などを解説します。これであなたもJavaScriptプログラマー！ 前回までで、CSSセレクターについて詳しく学びました。しかし、CSSセレクターだけではうまく要素を捕まえられないことも多々あります。 そんなときは、JavaScriptの機能を使ってアプローチします。大きくは以下の2つの流れで、必要な要素を捕まえにいきます。 CSSセレクターで簡単に取れる要素を起点

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑩ JavaScriptで要素を絞り込もう

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑨ CSSセレクターの練習問題

          前回はこちら。 前回学習したCSSセレクターを使って、練習問題を解いてみましょう。なるべく簡潔で分かりやすいプログラムになるように工夫してみてください。 CSSセレクターの練習問題問題① 以下の検索フォームで、以下のようにチェックを入れるブックマークレットを作ってください。 ステータスは、3つのすべてにチェックを入れる。 都道府県は、近畿の6府県（滋賀、京都、大阪、兵庫、奈良、和歌山）にチェックを入れる。 解答は椅子の下です。 解答例： javascript:

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑨ CSSセレクターの練習問題

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑧ CSSセレクターを使いこなそう

          前回はこちら。 操作したい要素を捕まえるためには、適切にCSSセレクターを書かなければなりません。いろんな方法が用意されているので、それをうまく組み合わせて目的を達成しましょう。 今回は詰め込み学習です。がんばってください！🐶 ブックマークレットを作成する際によく使われるCSSセレクターについて解説します。ただしその前に、HTMLについてざっくり解説します。 HTMLのざっくり解説WebページはHTMLという言語で書かれています。<body>, <input>のような

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑧ CSSセレクターを使いこなそう

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑦ 検索フォームの自動化（まとめて操作）

          前回はこちらです。 以前お伝えした通り、ブックマークレットのプログラムの基本は Webページ上の操作したい要素（入力フォームなど）を捕まえて、 その要素に対してやりたいことをやる！ です。今回は、これを複数の要素に対してまとめて行う方法を解説します。 だんだんと、プログラムっぽくなっていきますよ😎 落ち着いてゆっくり進めましょう。 複数の要素を取得するプログラム前回の練習問題で、エリアの8個のチェックボックスをひとつずつ操作しました。ちょっと面倒でしたね。 フォ

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑦ 検索フォームの自動化（まとめて操作）

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑥ 検索フォームの自動化

          前回はこちらです。 特定の条件を満たす受注データをシステムからダウンロードするために、毎回同じ条件をちまちまと設定しなければならない、といった業務は多いのではないでしょうか。ブックマークレットで自動化しましょう！ 下の画像は、価格.comで冷蔵庫を選ぶときの絞り込み画面です（スクロールするとこの5倍くらいの長さがあります）。 このようにたくさんの設定項目がある検索画面で、毎回ちまちまと同じ条件を設定して検索する、という業務は皆さんの周りにありませんか？ ブックマークレッ

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑥ 検索フォームの自動化

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑤ ログインフォームの自動化（複数の入力欄）

          前回はこちらです。 今回は、複数の入力欄にまとめて文字を入れる練習をします。 デベロッパーツールのコンソールの使い方も説明します。 今回は、ユーザーID欄が3つに分かれているログインフォームにチャレンジします。 こういうログインフォーム、たまーに見かけますが、コピペが面倒だし、ブラウザーの自動入力機能もうまく働かなくなってしまうし、かなり不親切ですよね。こういうときこそブックマークレットを使いましょう！ 複数の処理を並べて書く今回も練習用のフォームを用意しています。

          シド・ブックマーカー

          ブックマークレットで始める業務改善⑤ ログインフォームの自動化（複数の入力欄）

          シド・ブックマーカー

          ブックマークレットで始める業務改善④ ログインフォームの自動化

          前回はこちらです。 今回は、ログインフォームにユーザーIDを入力するブックマークレットを作ります。文字を書き込む操作はログイン以外でもたくさんありますので、いろんなところで応用できますよ。 ブックマークレットのプログラムの基本は、 Webページ上の操作したい要素（入力フォームなど）を捕まえて、 その要素に対してやりたいことをやる！ の2つです。この2つをこれからひたすら繰り返していきます。 さっそく作ってみよう今日のテーマはログインフォームへの自動入力です。練習用

          シド・ブックマーカー

          ブックマークレットで始める業務改善④ ログインフォームの自動化

          シド・ブックマーカー

          ブックマークレットで始める業務改善③ 初めてのブックマークレット

          前回はこちらです。 いよいよ本シリーズの主人公、ブックマークレットの登場です。「『こんにちは！』と表示して何が楽しいんだ」と思うかもしれませんが、それは今後のお楽しみということで🫠 前回、メッセージを表示させるJavaScriptのプログラムを作りました。今回はそれをブックマークレットにして、ワンクリックで起動できるようにしましょう。Google ChromeでもMicrosoft EdgeでもFirefoxでもOKです。 初めてのブックマークレットまずはブックマークレ

          シド・ブックマーカー

          ブックマークレットで始める業務改善③ 初めてのブックマークレット

          シド・ブックマーカー

          ブックマークレットで始める業務改善② まずやってみよう

          前回はブックマークレットでどんなことができるのかを紹介しました。 今回から実際に作り方を学んでいきます。プログラミング初体験の方でも分かるように解説していきます。 大事なのは、目の前の作業をなんとか効率化したい！というモチベーション！ がんばりましょう！ 皆さんは仕事でどんなソフトウェアを使っていますか？ パソコンにインストールして使うソフトもあれば、ブラウザー（EdgeやChromeなど）からアクセスして使うWebシステムもあるでしょう。営業管理システム、勤怠管理シス

          シド・ブックマーカー

          ブックマークレットで始める業務改善② まずやってみよう

          シド・ブックマーカー