

Monacaでメモ帳アプリを開発している者です。

以下のような記述のメモ帳アプリを作っているのですが、保存したメモの内容を Twitter やFacebook でシェアできる機能を加えたいと思っています。

Detail Page 内への記述だと思うのですが、どのように書いたらよいでしょうか。  
ご教授の程、どうぞよろしくお願い致します。

_～～～index.html～～～_

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    
        <!-- TOP Page -->
        <div data-role="page" id="TopPage">
            <header data-role="header" data-position="fixed" data-theme="c">
                <h1>メモ帳</h1>
                <a href="#AddPage" data-icon="plus" class="ui-btn-right">メモを追加</a>
            </header>
            <section data-role="content">
                <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">       
                </ul>
            </section>
        </div>
    
        <!-- Add Memo Page -->
        <div data-role="page" id="AddPage">
            <header data-role="header" data-position="fixed" data-theme="c">
                <a data-role="button" data-rel="back" data-icon="back">戻る</a>
                <h1>新しいメモ</h1>
            </header>
            <section data-role="content">
                <label for="Memo"></label>
                <textarea id="Memo"></textarea>
                <a data-role="button" data-icon="check" id="SaveBtn">保存</a>
            </section>
        </div>
    
        <!-- Detail Page -->
        <div data-role="page" id="ShowPage">
            <header data-role="header" data-position="fixed" data-theme="c">
                <a data-role="button" data-rel="back" data-icon="back">戻る</a>
                <a href="#EditPage" data-theme="b" class="ui-btn-right" id="EditBtn">編集</a>
                <h1></h1>
            </header>
            <section data-role="content">
                <p></p>
            </section>
        </div>
    
        <!-- Edit Memo Page -->
        <div data-role="page" id="EditPage">
            <header data-role="header" data-position="fixed">
                <a data-role="button" data-rel="back" data-icon="back">戻る</a>
                <h1>メモを編集</h1>
            </header> 
            <section data-role="context">
                <input id="edit" type="text">
    
                <button onclick="saveEditedMemo()">上書き保存</button>
            </section>
        </div>
    
    <script src="components/loader.js"></script>
    <script src="js/memo.js"></script>
    <script src="js/app.js"></script>
    <script src="js/cssua.min.js"></script>
    </body>
    </html>
    
[/code]

_～～～app.js～～～_

[code]

    ///// Save memo and return to top page
    function onSaveBtn() {
        var text = $("#Memo").val();
        if (text != '') {
            // Save to local storage
            addMemo(text);
            // Clear form
            $("#Memo").val("");
            // Initialize top page
            initTopPage();
        }
        $.mobile.changePage("#TopPage", { reverse: true });
    }
    
    ///// Initialize top page
    function initTopPage() {
        $("#TopListView").empty();
    
        var list = getMemoList();
        for (var i in list) {
            var memo = list[i];
            var d = new Date(memo.time);
            var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
    
            $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
            $li.data("id", memo.id);
            $li.find("h3").text(date);
            $li.find("p").text(memo.text);
            $("#TopListView").prepend($li);
        }
        if (list.length == 0) {
            $li = $("<li>メモがありません</li>");
            $("#TopListView").prepend($li);
        }
        $("#TopListView").listview("refresh");  // Call refresh after manipulating list
    }
    
    ///// Move to detail page
    function onShowLink() {
        var $li = $(this).parent();
        selectedMemoId = $(this).parents('li').data("id");    
        var memoTitle = $li.find("h3").text();
        var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");
    
        $("#ShowPage h1").text(memoTitle);
        $("#ShowPage p").html(memoHtml);
        $.mobile.changePage("#ShowPage");
    }
    
    ///// Delete memo
    function onDeleteLink() {
        if (!confirm("このメモを削除しますか？")) {
          return;
        }
        var $li = $(this).parent();
        var id = $li.data("id");
        deleteMemo(id);
    
        initTopPage();
    
        // Return to top
        $.mobile.changePage("#TopPage", { reverse: true });
    }
    
    ///// Called when app launch
    function onReady() {
        initTopPage();
        $("#SaveBtn").click(onSaveBtn);
        $("#TopListView").on("click", "a.show", onShowLink);
        $("#TopListView").on("click", "a.delete", onDeleteLink);
    }
    
    ///// Edit memo
    function saveEditedMemo() {
    
        var editedText = $("#EditPage input#edit").val();
    
        if (editedText != '') {
    
            deleteMemo(selectedMemoId);
    
            addMemo(editedText);
            // Clear form
            $("#Memo").val("");
            // Initialize top page
            initTopPage();
        }
        $.mobile.changePage("#TopPage", { reverse: true });
    }
    
    $(onReady); // on DOMContentLoaded
    
[/code]


CC BY-SA 3.0
2015-02-25T22:08:53.920
7099
2015-07-27T07:19:06.473
2015-02-26T23:28:43.217
3516
8373
question
javascript monaca html
自作メモ帳アプリの内容を、 Twitter やFacebook でシェアする方法


こちらの質問が参考になるのではないかと思います。  
[monacaにLINE、FB、Twitterの紹介機能を実装したい](https://ja.stackoverflow.com/questions/6724)

あとは公式のドキュメントとか。  
[Twitter クライアント](http://docs.monaca.mobi/cur/ja/sampleapp/samples/twitter/)  
[Facebook クライアント](http://docs.monaca.mobi/cur/ja/sampleapp/samples/facebook/)

ツイートだけならもっと簡単にできるといった内容のブログもありました。  
※Twitterサイトを開くやり方のようです。  
[Monaca開発（結果をつぶやくTwitterボタン）](http://easyapp.blog.fc2.com/blog-entry-24.html)

----- コメントに対する追記 -----

JavaScript（今回はjQuery）で動的に設定できます。  
[jQueryで、ハイパーリンクのhref書き換え](http://kobarin.hateblo.jp/entry/20110422/1303445913)  
参考ページだとhtmlに追加していますが、今回の場合は`Detail Page`の表示データを設定しているところで一緒にやれば良いと思います。


CC BY-SA 3.0
2015-02-26T06:49:52.630
7126
2015-02-27T01:58:21.253
2017-04-13T12:52:39.113
-1
3516
7099
answer