newmonicアプリのエクスポート機能がない？JavaScriptで解決する方法

ぴちぴちまちこちゃん


はじめに

newmonicアプリで作成したマイデッキ、とても便利ですよね。でも、いざ他の場所で活用したい時に、エクスポート機能がないことに困っていませんか？
特に”解説部分”はウェブサイト上では格納されているため、1個ずつクリックして展開していく･･･途方もない作業になってしまいます。
この記事では、そんな悩みを解決する”一括展開”JavaScriptコードをご紹介します。Javascriptがわからない初心者でもこのコードを使えば、自動化で表示することができます。全表示が終われば、全範囲選択CTRL+AからコピーCTRL+C→Googleスプレッドシートに貼り付けなどにより効率的に保存、バックアップ作業やデータ編集を進めることができます。


newmonicのエクスポート機能がない問題

newmonicは、非常に便利なフラッシュカード作成ツールですが、一つだけ大きな欠点があります。それは、作成したデッキを他の形式にエクスポートする機能がないことです。そのため、一度作成したデッキを別のツールで利用したい場合、手動でカード情報を書き出す必要があり、非常に手間がかかってしまいます。

JavaScriptで解決！解説表示を自動展開

この記事で紹介するJavaScriptコードは、newmonicのウェブサイト上で、解説を表示するボタンを自動的にクリックするものです。これにより、毎回手動でクリックする手間を省き、全ての解説を一度に表示させることができます。

JavaScript

// すべてのボタン要素を取得
const buttons = document.querySelectorAll('.css-lalxcv');

// 各ボタンに対してクリックイベントを開始させる
buttons.forEach(button => {
  button.click();
});

このコードでは、まず、解説を表示するボタンのクラス名（ここでは'.css-lalxcv'）を指定して、全てのボタン要素を取得します。次に、取得したボタン要素に対して、forEachメソッドを使って一つずつクリックイベントを開始させます。これにより、全ての解説が展開されるというわけです。

このコードを使う上での注意点

  • クラス名: このコードは、解説を表示するボタンのクラス名が'.css-lalxcv'であることを前提としています。newmonicのアップデートなどで、このクラス名が変更されている場合は、コードを修正する必要があります。

  • ウェブサイトの構造: このコードは、newmonicのウェブサイトの構造が変更されると、正常に動作しなくなる可能性があります。

  • JavaScriptの知識: このコードを実際に利用するためには、JavaScriptの基礎的な知識が必要です。

コードの実行方法


  1. ブラウザの開発者ツールを開く:

    • Google Chromeであれば、F12キーを押すか、右クリックから「検証」を選択します。

  2. コンソールタブを開く: 開発者ツールのタブの中から「コンソール」を選択します。

  3. コードを貼り付ける: 上記のJavaScriptコードをコンソールに貼り付けて、Enterキーを押します。

コードを張り付けて、エンターキーで実行すると、一括展開が完了します！

これでページ内を全選択コピーできる状態になりました。

次に続きます！



免責事項

・この記事に記載されている情報は、あくまでも個人的な見解であり、newmonicの公式な情報ではありません。
・このコードを利用することによって生じたいかなる損害についても、筆者は一切の責任を負いません。
・情報提供の目的について、あくまで個人的な学習目的で用いて下さい。
・情報の正確性や完全性を保証するものではありません。
・万が一問題が生じた場合は、(当公開ページ削除を含め)速やかに対応します。


いいなと思ったら応援しよう！