Wikipedia

ソース
プログラム

//カバー画像　Wikimedia Foundation - Wikimedia Foundation, CC 表示-継承 3.0, https://commons.wikimedia.org/w/index.php?curid=10310282による


// 1. 画面に入力エリア（エディタ）とボタンを作成
「---------------------------------------------------------------------------------------------------------------」のラベル作成。

改行作成。

「検索キーワード:」のラベル作成。
それの「文字サイズ」に「18px」をDOMスタイル設定。
改行作成。

入力欄＝空のエディタ作成。
それの「幅」に「350px」をDOMスタイル設定。
それの「高さ」に「27px」をDOMスタイル設定。
それの「placeholder」に「ここに検索したい言葉を入力...」をDOM属性設定。
それの「文字サイズ」に「17.4px」をDOMスタイル設定。

検索ボタン＝「検索」のボタン作成。
それの「高さ」に「40px」をDOMスタイル設定。
それの「幅」に「50px」をDOMスタイル設定。
それの「文字サイズ」に「16px」をDOMスタイル設定。

改行作成。

「---------------------------------------------------------------------------------------------------------------」のラベル作成。

// カードを描画するための親エリアを作成し、画面に追加
カード表示エリア＝「div」をDOM要素作成。
DOM親要素へカード表示エリアをDOM子要素追加。

// =========================================================
// Wikipedia全文カードを作成・描画する関数
// =========================================================
●（タイトル, 全文章テキスト, ページURLで）Wikipedia全文カード作成
    CARD ＝「div」をDOM要素作成。
    カードスタイル ＝「max-width: 600px; margin: 16px 0; padding: 10px; background-color: #F9F5F0; border: 2.5px solid #4a90e2; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); font-family: sans-serif; line-height: 1.6;」
    CARDの「style」にカードスタイルをDOM属性設定。

    TITLE_LINE ＝「div」をDOM要素作成。
    TITLE_LINEの「style」に「font-size: 20px; font-weight: bold; color: #1a365d; border-bottom: 2px solid #4a90e2; padding-bottom: 4px; margin-bottom: 10px;」をDOM属性設定。
    TITLE_LINEに「{タイトル}」をテキスト設定。
    CARDへTITLE_LINEをDOM子要素追加。

    // ★本文中のURL文字列を自動的に別タブで開くリンクに変換する
    リンク付き本文は全文章テキストの『(https?://[^\s]+)』を『<a href="$1" target="_blank" rel="noopener noreferrer" style="color: #3182ce; text-decoration: underline;" onclick="window.open('$1', '_blank'); return false;">$1</a>』に正規表現置換

    // 2. 記事の全文章を表示するエリア（HTMLとして設定してリンクを有効化）
    FULLTEXT_BOX ＝「div」をDOM要素作成。
    FULLTEXT_BOX[「innerHTML」] ＝ リンク付き本文
    FULLTEXT_BOXの「style」に「font-size: 17px; color: #2d3748; background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: 10px; max-height: 480px; overflow-y: auto; white-space: pre-wrap; line-height: 1.7; margin-bottom: 16px; word-break: break-all;」をDOM属性設定。
    CARDへFULLTEXT_BOXをDOM子要素追加。

    もし、ページURL≠未定義かつページURL≠「」ならば
        PAGE_LINE ＝「div」をDOM要素作成。
        PAGE_LINEの「style」に「font-size: 14px; border-top: 1px solid #e2e8f0; padding-top: 10px; text-align: right;」をDOM属性設定。
        
        PAGE_LINK ＝「a」をDOM要素作成。
        PAGE_LINKに「 Wikipediaで元のページを開く ➔」をテキスト設定。
        PAGE_LINKの「href」にページURLをDOM属性設定。
        PAGE_LINKの「target」に「_blank」をDOM属性設定。
        PAGE_LINKの「rel」に「noopener noreferrer」をDOM属性設定。
        PAGE_LINKの「onclick」に「window.open('{ページURL}', '_blank'); return false;」をDOM属性設定。
        PAGE_LINKの「style」に「color: #3182ce; font-weight: bold; text-decoration: none; cursor: pointer;」をDOM属性設定。
        
        PAGE_LINEへPAGE_LINKをDOM子要素追加。
        CARDへPAGE_LINEをDOM子要素追加。
    ここまで

    カード表示エリアへCARDをDOM子要素追加。
    CARDで戻る。
ここまで。

// =========================================================
// 2. ボタンがクリックされた時の検索処理
// =========================================================
検索ボタンをクリックした時には
    検索語＝入力欄のテキスト取得
    もし、検索語が「」ならば、終わる。
    
    カード表示エリアに「『{検索語}』Wikipediaから取得中...」をテキスト設定。
    
    エンコード語＝検索語をURLエンコード
    
    // Wikipediaサーバーでプレーンテキストに変換してもらうAPI
    URL＝「https://ja.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&explaintext=1&titles={エンコード語}&formatversion=2&origin=*」
    
    URLにAJAX送信。
    データ＝それをJSONデコード。
    
    カード表示エリアに「」をテキスト設定。
    
    // データの抽出
    もし、データ[「query」]≠未定義ならば
        ページリスト＝データ[「query」][「pages」]
        
        もし、要素数(ページリスト) ＞ 0 ならば
            ページ情報＝ページリスト[0]
            
            // 記事が存在しない場合（missingフラグがある場合）
            もし、ページ情報[「missing」]≠未定義ならば
                カード表示エリアに「該当するWikipedia記事が見つかりませんでした。」をテキスト設定。
            違えば
                タイトル＝ページ情報[「title」]
                全文章テキスト＝ページ情報[「extract」]
                ページURL＝「https://ja.wikipedia.org/wiki/{エンコード語}」
                
                Wikipedia全文カード作成(タイトル, 全文章テキスト, ページURL)
            ここまで
        ここまで
    違えば
        カード表示エリアに「データの取得に失敗しました。」をテキスト設定。
    ここまで
ここまで


●(txtでURLの)リンク作成
　　ELとは変数＝「a」のDOM要素作成。
　　ELの「href」にURLをDOM属性設定。
　　ELの「target」に「_blank」をDOM属性設定。
　　ELにtxtをテキスト設定。
　　DOM親要素へELをDOM子要素追加。
　　ELで戻る。
ここまで。
「Wikipedia日本語版」で「https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8」のリンク作成。
作品について
作品情報

作品を編集
Aris 作
ライセンス: BSD（改変可/著作権表示）
形式: wnako
タグ: Wikipedia
利用バージョン: 3.7.22
アクセス数(累計): 29
アクセス数(今月): 31
更新日時: 2026/08/19 12:30 編集: 2026/08/19 14:15
作品公開情報
交流
Wikipedia

プログラム

作品情報

コメント
