jsFiddle

 jsFiddleは、簡単にHTML、CSS、JavaScriptのコードを実装できて、その動作を確認できるWebサービスです。会員登録も不要で、無料で使うことができます。具体的に、jsFiddleでは以下のことができます:

  1. HTML/CSS/JavaScriptの動作チェック:
    • 通常、テキストエディタにコードを記述し、ブラウザで開いて確認するのが一般的ですが、jsFiddleでは必要な部分だけのコードを記述してシェアすることが簡単です。
  2. 書いたコードの保存・共有:
    • jsFiddleを使ってコードを実装した結果を共有できます。

具体的な使い方を説明します:

  1. 画面の見方:

    • こちらからjsFiddleを開いてみましょう。
    • 画面は以下のようになります:
      • HTML: HTMLを記述する欄。
      • CSS: CSSを記述する欄。
      • JavaScript: JavaScriptを記述する欄。
      • Result: HTML/CSS/JavaScriptの結果が表示される部分。
    • 右上の「Settings」から画面の見え方をカスタマイズできます。

  2. HTMLの記述:

    • jsFiddleでは、headタグやbodyタグを記述せず、bodyの中身から直接記述します。
    • 「HTML▼」をクリックして、ドックタイプやbodyタグのクラスを指定できます。

  3. CSSの記述:

    • 「CSS▼」をクリックして、SASSで記述するかなどを設定できます。

  4. JavaScriptの記述:

    • 「JavaScript▼」をクリックして、ライブラリやフレームワークを使用したい場合は、「FRAMEWORKS & EXTENSIONS」から選択できます。

  5. コードの結果を反映:

    • 左上の「Run」をクリックすると、Resultにコードの結果が表示されます。
    • 「Save」をクリックしてコードを保存できます。

コメント

コメントを投稿

このブログの人気の投稿

HTA+JScriptでウインドウのサイズ変更するプログラム

HTAとJScriptを使って、ウインドウのサイズを変更する、基本的なコード例を紹介します。 <html> <head> <title>ウインドウサイズ変更</title> <script> function resizeWindow() { // ウインドウの幅と高さを設定 window.resizeTo(640, 480); } </script> </head> <body> <input type="button" value="ウインドウサイズ変更" onclick="resizeWindow()"> </body> </html> このコードを実行すると、ボタンをクリックするとウインドウのサイズが640x480ピクセルに変更されます。
Read more »

右翼・左翼とは？教えてGemini先生

  ご質問ありがとうございます、Gemini先生ですね！右翼と左翼について、わかりやすくご説明しますね。 右翼と左翼は、政治的な立場や思想を大まかに分類するための言葉です。フランス革命の時代、議会で国王を支持する人々が右側に、改革を求める人々が左側に座っていたことに由来すると言われています。 現代においては、その意味合いは時代や国によって異なりますが、一般的には以下のような傾向があります。 右翼 保守的: 伝統的な価値観や社会の仕組みを重視し、急激な変化を避けようとする傾向があります。 国家主義的: 自国や民族の独自性、文化、歴史を誇りとし、国家の利益を優先する考え方が強いことがあります。 権威主義的: 強いリーダーシップや秩序を重視し、政府の権限強化を支持する場合があります。 自由市場経済: 規制緩和や小さな政府を志向し、自由な経済活動を重視する立場をとることがあります。 外交・安全保障: 国防力の強化や、伝統的な同盟関係を重視する傾向があります。 左翼 革新的: 現状の社会の不平等や矛盾を批判的に捉え、より平等で公正な社会を目指して改革を推進しようとする傾向があります。 社会主義的・平等主義的: 貧富の差の是正や社会保障の充実を重視し、政府による所得再分配や社会福祉の拡充を求めることがあります。 人権重視: 個人の自由や権利、マイノリティの権利などを重視し、差別や偏見の解消を目指します。 大きな政府: 政府が積極的に経済や社会に関与し、公共サービスの提供や格差是正を行うべきだと考えることがあります。 平和主義的・国際協調: 軍事的な解決よりも外交交渉を重視し、国際的な協力関係を推進する傾向があります。 注意点 これらの特徴はあくまで一般的な傾向であり、全ての人に当てはまるわけではありません。 右翼・左翼の分類は非常に大まかなものであり、実際には様々な立場や考え方を持つ人が存在します。 同じテーマに関しても、右翼と左翼の間で多様な意見が存在します。 時代や国によって、右翼・左翼の指す内容や重要視する点が異なることがあります。 日本においても、右翼・左翼という言葉は使われますが、その具体的な意味合いは文脈によって異なります。歴史的な背景や社会状況を踏まえて理解することが重要です。 何かさらに知りたいことや...
Read more »

PortProtonとは

  PortProtonは、Linux上でWindowsのゲームやソフトウェアを簡単に実行するためのツールです。 Valveが開発した「Proton」という互換レイヤーをベースにしていますが、PortProtonはSteamクライアントに統合されているProtonとは異なり、SteamがなくてもWindowsアプリケーションを実行できるのが特徴です。 主な機能や特徴は以下の通りです。 簡単な実行 : 数クリックでWindowsのゲームやソフトウェアをLinux上で起動できます。 Protonの利用 : ValveのProton技術を利用しており、Windowsアプリケーションの互換性を高めます。 Steam不要 : SteamクライアントなしでWindowsアプリケーションを実行できるため、より汎用的に使えます。 依存関係の管理 : 必要なライブラリや依存関係を自動的に管理し、ユーザーの手間を省きます。 細かい設定 : ゲームごとに互換レイヤー、シェーダー、グラフィック設定などを細かく制御できます。 LinuxでWindowsのゲームをプレイしたい場合や、特定のWindowsソフトウェアをLinux環境で動かしたい場合に便利なツールと言えるでしょう。
Read more »

HTA+VBScriptでフォルダ選択ダイアログボックスを表示する方法

HTA（HTML Application）と VBScript を組み合わせてフォルダ選択ダイアログボックスを表示する方法はいくつかありますが、一般的なのは Shell.Application オブジェクトの BrowseForFolder メソッドを使用する方法です。 以下に基本的なコード例を示します。 HTML <!DOCTYPE html > < html > < head > < title > フォルダ選択 </ title > < hta:application applicationname = "FolderSelect" border = "thin" caption = "yes" icon = "" maximizebutton = "no" minimizebutton = "yes" scroll = "no" showintaskbar = "yes" singleinstance = "yes" sysmenu = "yes" windowstate = "normal" > < script language = "VBScript" > Sub SelectFolder() Dim objShell, objFolder, strFolderPath ' Shell.Application オブジェクトを作成 Set objShell = CreateObject("Shell.Application") ' フォルダ選択ダイアログを表示 ' 引数の説明: ' 0: 親ウィンドウのハンドル (通常は 0) ' "フォルダを選択してください": ダイ...
Read more »

HTAウインドウの表示倍率を変更する方法

1. document.body.style.zoomプロパティを使用する ' 表示倍率を150%に設定 document.body.style.zoom = 1.5 ' 表示倍率を200%に設定 document.body.style.zoom = 2 2. window.external.msIsSiteModeプロパティを使用する ' サイトモードを有効にする window.external.msIsSiteMode = True ' 表示倍率を150%に設定 document.body.style.zoom = 1.5 ' サイトモードを無効にする window.external.msIsSiteMode = False この方法は、Internet Explorer 8以降でのみ使用できます。以下のコード例のように、window.external.msIsSiteModeプロパティにtrueを設定し、document.body.style.zoomプロパティに数値を指定することで、表示倍率を変更できます。
Read more »

【VBScript】文字列の置換

VBScriptで文字列の置換を行うには、Replace関数を使用する。 この関数は、指定した文字列内の特定の部分文字列を別の文字列に置き換える。 構文 Replace(expression, find, replacewith[, start[, count[, compare]]]) expression: 対象となる文字列。 find: 置換したい文字列。 replacewith: 置換後の文字列。 start (省略可能): 置換を開始する位置（デフォルトは1）。 count (省略可能): 置換する回数（デフォルトはすべて）。 compare (省略可能): 比較方法（vbBinaryCompareまたはvbTextCompare）。 Dim STR : STR = "Hello World" WScript.Echo "[" & STR & "]" STR = Replace(STR, "World", "VBScript") WScript.Echo "[" & STR & "]" 実行結果 C:\temp>cscript C:\temp\test.vbs Microsoft (R) Windows Script Host Version 5.812 Copyright (C) Microsoft Corporation. All rights reserved. [Hello World] [Hello VBScript]
Read more »

JScriptでフォルダ操作

新規ディレクトリの作成 : // FileSystemObject オブジェクトを生成する var oFS = WScript . CreateObject ( "Scripting.FileSystemObject" ); // ディレクトリを新規作成する oFS. CreateFolder ( "c:\\sample01" ); この例では、Cドライブ直下に sample01 というディレクトリを作成しています。 ディレクトリのコピー : // FileSystemObject オブジェクトを生成する var oFS = WScript . CreateObject ( "Scripting.FileSystemObject" ); // ディレクトリをコピーする // コピーではなく移動させたい場合は MoveFolder メソッドを利用する oFS. CopyFolder ( "c:\\sample01" , "c:\\sample02" ); この例では、作成した sample01 ディレクトリを sample02 という名前でコピーしています。 ディレクトリの削除 : // FileSystemObject オブジェクトを生成する var oFS = WScript . CreateObject ( "Scripting.FileSystemObject" ); // 既存ディレクトリを削除する oFS. DeleteFolder ( "c:\\sample01" ); この例では、 sample01 ディレクトリを削除しています。 ディレクトリ名の変更 : // FileSystemObject オブジェクトを生成する var oFS = WScript . CreateObject ( "Scripting.FileSystemObject" ); // 名前を変更したいディレクトリをオブジェクト化する var oDir = oFS. GetFolder ( "c:\\sample02" ); // ディレクトリ名を変更する oDir. Nam...
Read more »

【VBScript】文字列の前後の空白を削除

VBScriptで文字列の前後の空白を削除するには、Trim関数を使用する。 Dim STR : STR = " ABCDEFG " WScript.Echo "[" & STR & "]" '前後の空白を削除 STR = Trim(STR ) WScript.Echo "[" & STR & "]" 実行結果 C:\temp>cscript C:\temp\test.vbs Microsoft (R) Windows Script Host Version 5.812 Copyright (C) Microsoft Corporation. All rights reserved. [ ABCDEFG ] [ABCDEFG] 補足 前の空白のみ削除は、LTrim関数を使用する。 後の空白のみ削除は、RTrim関数を使用する。
Read more »

PDFって編集できないからビジネスで使われてたと思うんだけど、それを編集できるようにするって・・・

  そうですね、 PDFがビジネスで広く使われてきた理由の一つは、その「編集が難しい」という特性でした。 誰がどの環境で見てもレイアウトが崩れず、内容が勝手に変更されるリスクが低いという点が、文書の信頼性やセキュリティの面で重要視されてきたからです。 しかし、近年ではPDFの編集機能が進化し、多くのPDFソフトウェアでテキストの修正、画像の追加・削除、ページの並べ替えなどが容易にできるようになりました。これは、ビジネス環境の変化に対応するため、という側面もあります。 なぜPDF編集が可能になったのか？ PDF編集機能が発展した背景には、いくつかの要因があります。 業務効率化のニーズ: いちいち元データに戻って修正し、再度PDF化する手間を省きたいというニーズが高まりました。簡単な修正であればPDF上で直接行いたいという声が多く、ソフトウェアベンダーもそれに応える形で機能を追加していきました。 共同作業の増加: クラウドサービスやオンラインでの共同作業が増えるにつれて、PDFを共有しながらコメントを付けたり、修正指示をしたりする場面が増えました。その流れで、より直接的な編集機能も求められるようになりました。 技術の進化: PDFの内部構造を解析し、より効率的に編集する技術が向上したことも、機能向上の大きな要因です。 PDF編集のメリットとデメリット PDF編集が可能になったことで、以下のようなメリットとデメリットが考えられます。 メリット 迅速な修正: 誤字脱字や軽微なレイアウト調整など、緊急性の高い修正を迅速に行えます。 作業の効率化: 元データを探す手間や、別のソフトウェアを立ち上げる手間が省け、全体の作業フローがスムーズになります。 ペーパーレス化の促進: 印刷せずにPDF上で完結できるため、環境負荷の低減にもつながります。 デメリット セキュリティリスク: 編集が容易になることで、意図しない改ざんや情報漏洩のリスクが高まる可能性があります。特に、機密情報を含むPDFを扱う際は注意が必要です。 版管理の複雑化: 誰が、いつ、どこを修正したのかが不明確になり、最終版がどれなのか分からなくなる「版管理」の課題が生じる場合があります。 オリジナルデータの喪失: PDFを直接編集することで、オリジナルのデータが失われたり...
Read more »

ダークウェブってなに？教えてGemini先生！

  Gemini先生がお答えしますね！ ダークウェブとは、一言でいうと「通常のインターネットからはアクセスできない、匿名性の高いウェブ空間」のことです。 インターネットは、大きく分けて以下の3つの階層に分けられます。 サーフェスウェブ (Surface Web)： 私たちが普段Googleなどの検索エンジンで検索してアクセスする、一般的なウェブサイトのことです。 全体の約4%程度と言われています。 ディープウェブ (Deep Web)： 検索エンジンでは見つけられないけれど、通常のブラウザでアクセスできるウェブサイトのことです。 例えば、メールの受信箱、オンラインバンキングのログイン後のページ、会員専用のデータベースなどがこれにあたります。 インターネット全体の9割以上を占めると言われています。ディープウェブ自体は違法なものではなく、私たちの日常生活に欠かせないものです。 ダークウェブ (Dark Web)： ディープウェブのさらに深い部分に位置し、特殊なブラウザ（「Torブラウザ」などが有名）を使わないとアクセスできないウェブサイトの総称です。 非常に匿名性が高く、誰がアクセスしているのか、どこからアクセスしているのかを追跡することが極めて困難なため、さまざまな目的で利用されています。 ダークウェブの主な特徴と利用目的 匿名性の高さ: 通信経路を暗号化・匿名化する技術（Torなど）によって、利用者の身元が特定されにくくなっています。 非公開性: 一般的な検索エンジンにはインデックスされておらず、特定のURLを知っているか、専門的な方法を使わないとアクセスできません。 この匿名性の高さから、ダークウェブは以下の両方の目的で利用されています。 合法的な利用: 政府による監視や検閲が厳しい国で、報道関係者や内部告発者、政治活動家などが匿名で情報交換を行う場。 プライバシーを重視する人々のコミュニケーション。 違法な利用（問題視される主な点）: 違法な商品やサービスの取引（麻薬、銃器、偽造品、盗品など）。 ハッキングサービスやマルウェアの販売。 不正に流出した個人情報（クレジットカード情報、ID・パスワードなど）の売買。 児童ポルノなどの違法コンテンツの配布。 ダークウェブの...
Read more »