林檎の木の下で

iPhoneアプリやwebサービスの紹介など。いつもどうしたら毎日を効率良く過ごせるか考えてます。

【ノンプログラマーが作るTextwellアクション】その9 文章の編集に必要なアクションを選択できるアクション

   

【ノンプログラマーが作るTextwellアクション】その9 文章の編集に必要なアクションを選択できるアクションfinger-769298_640

こんにちは、sakurako(@0518sakurako)です。

なんだかおかしなタイトルになってますが(^_^;)これでも悩んだんです。

デフォルトのアクションにChangeCaseというアクションがあります。

大文字と小文字を入れ替えたりするアクション数種類がセットになったもので、アクションを起動するとボタンが現れて数種類のアクションから動かしたいアクションを選択できるというものです。

このアクションをもとにして編集に必要なアクション集を作ってみました。

スポンサーリンク

Textwell

360円
(2015.07.07時点)
posted with ポチレバ

ChangeCaseのコード解析

めちゃくちゃ長いコードなのでいらない人は無視して次へどうぞ。

コードへジャンプ

まずはChangeCaseのソースです。

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<meta id=”viewport” name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ />

<title>Change Case</title>

<style>
* {
-webkit-box-sizing: border-box;
}
html {
-webkit-text-size-adjust: none;
}
body {
margin: 0;
padding: 0;
background-color: #eee;
font-size: 18px;
font-family: sans-serif;
}
.menu {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 10px 20px;
}
.menu li {
margin: 10px 0;
padding: 0;
}
.menuitem {
display: block;
margin: 0;
height: 44px;
border: 1px solid #ccc;
line-height: 44px;
text-decoration: none;
text-align: center;
color: black;
border-radius: 4px;
background-color: white;
}
.menuitem:active {
background-color: #ccc;
}
</style>

</head>

<body>

<div class=”menu”>
<ul>
<li><a id=”menuitem-uppercase” class=”menuitem” href=”javascript:void(0)”>UPPER CASE</a></li>
<li><a id=”menuitem-lowercase” class=”menuitem” href=”javascript:void(0)”>lower case</a></li>
<li><a id=”menuitem-sentencecase” class=”menuitem” href=”javascript:void(0)”>Sentence case</a></li>
<li><a id=”menuitem-wordcase” class=”menuitem” href=”javascript:void(0)”>Word Case</a></li>
<li><a id=”menuitem-titlecase” class=”menuitem” href=”javascript:void(0)”>Title Case</a></li>
</ul>
</div>

<script>

function upperCase( text ) {
var modifiedText = text.toUpperCase();
return modifiedText;
};

function lowerCase( text ) {
var modifiedText = text.toLowerCase();
return modifiedText;
};

function sentenceCase( text ) {
// Don’t lowercase the existing uppercases.
var modifiedText = text.replace(/(^\s*\w|[\.\!\?]\s*\w)/g,function(c){return c.toUpperCase()});
return modifiedText;
};

function wordCase( text ) {
var modifiedText = text.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
return modifiedText;
};

function titleCase( text ) {
// Code from “http://ejohn.org/blog/title-capitalization-in-javascript/”
var t=/^(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|vs?\.?|via)$/i;
var modifiedText = text.replace(/([^\W_]+[^\s-]*) */g,function(text,n,r,i){return r>0&&r+n.length!==i.length&&n.search(t)>-1&&i.charAt(r-2)!==”:”&&i.charAt(r-1).search(/[^\s-]/)<0?text.toLowerCase():n.substr(1).search(/[A-Z]|\../)>-1?text:text.charAt(0).toUpperCase()+text.substr(1)});
modifiedText = sentenceCase( modifiedText );
return modifiedText;
};

function init() {

var text = T.whole;

var menuItemUpperCase = document.getElementById( ‘menuitem-uppercase’ );
var menuItemLowerCase = document.getElementById( ‘menuitem-lowercase’ );
var menuItemSentenceCase = document.getElementById( ‘menuitem-sentencecase’ );
var menuItemWordCase = document.getElementById( ‘menuitem-wordcase’ );
var menuItemTitleCase = document.getElementById( ‘menuitem-titlecase’ );

menuItemUpperCase.addEventListener( ‘click’, function() {
T( ‘replaceWhole’, {
text: upperCase( text )
} );
}, false );

menuItemLowerCase.addEventListener( ‘click’, function() {
T( ‘replaceWhole’, {
text: lowerCase( text )
} );
}, false );

menuItemSentenceCase.addEventListener( ‘click’, function() {
debugger;
sentenceCase( text )
T( ‘replaceWhole’, {
text: sentenceCase( text )
} );
}, false );

menuItemWordCase.addEventListener( ‘click’, function() {
T( ‘replaceWhole’, {
text: wordCase( text )
} );
}, false );

menuItemTitleCase.addEventListener( ‘click’, function() {
T( ‘replaceWhole’, {
text: titleCase( text )
} );
}, false );

};

init();

</script>

</body>

</html>

まずこのソースはHTMLで書かれています。Textwellで内蔵ブラウザを立ち上げる時にはその内臓ブラウザで表示するコードをHTMLで書く必要があるということなんだと思います。

head内はmetaタグなどとstyleタグで見た目の設定をしています。

次にbody内。

最初にリストを作成しています。id、classの指定が行われ、href後のjavascript:void(0)はボタンが押されなかった時は何もしないよという意味でつけられています。

で次にscriptタグがきます。

function~が並んでいるところでそれぞれのボタンが押された時に行われるイベントのJavascriptが書かれています。

で関数を動かすよという意味のfunction init()がきて、この後のtextはテキスト全体もしくは選択範囲を意味するT.wholeを取りますよという宣言がなされています。

で、getElementByIdを使ってvar以降で示された引数は指定したid属性の値が入りますよと宣言がされています。

その下はそれぞれのボタンが押された後のアクションを指定しています。addEventListenerは1つのイベントに対して複数のイベントハンドラを設定するメソッドです。

最後にタグを閉じて終わっています。

ChangeCaseをもとにアクションを作る。

このコードを元にしてアクションを作ってみます。
Javascript組めないのでアクション集にあるClearAll、ClearCurrent、CopyWhole、CopyCurrent、CutWhole、CutCurrentを一覧にしてみました。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<title>Editor Set</title>

<style>
* {
    -webkit-box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: none;
}
body {
    margin: 0;
    padding: 0;
    background-color: #eee;
    font-size: 18px;
    font-family: sans-serif;
}
.menu {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 10px 20px;
}
.menu li {
    margin: 10px 0;
    padding: 0;
}
.menuitem {
    display: block;
    margin: 0;
    height: 44px;
    border: 1px solid #ccc;
    line-height: 44px;
    text-decoration: none;
    text-align: center;
    color: black;
    border-radius: 4px;
    background-color: white;
}
.menuitem:active {
    background-color: #ccc;
}
</style>

</head>

<body>

<div class="menu">
    <ul>
        <li><a id="menuitem-clearall" class="menuitem" href="javascript:void(0)">ClearAll</a></li>
        <li><a id="menuitem-clearcurrent" class="menuitem" href="javascript:void(0)">ClearCurrent</a></li>
        <li><a id="menuitem-copywhole" class="menuitem" href="javascript:void(0)">CopyWhole</a></li>
        <li><a id="menuitem-copycurrent" class="menuitem" href="javascript:void(0)">CopyCurrent</a></li>
        <li><a id="menuitem-cutwhole" class="menuitem" href="javascript:void(0)">CutWhole</a></li>
<li><a id="menuitem-cutcurrent" class="menuitem" href="javascript:void(0)">CutCurrent</a></li>
    </ul>
</div>

<script>
function init(){    

    var menuItemClearAll = document.getElementById( 'menuitem-clearall' );
    var menuItemClearCurrent = document.getElementById( 'menuitem-clearcurrent' );
    var menuItemCopyWhole = document.getElementById( 'menuitem-copywhole' );
    var menuItemCopyCurrent = document.getElementById( 'menuitem-copycurrent' );
    var menuItemCutWhole = document.getElementById( 'menuitem-cutwhole' );
    var menuItemCutCurrent = document.getElementById( 'menuitem-cutcurrent' );
    menuItemClearAll.addEventListener( 'click', function() {
T( 'done', {
  option: 'clearAll'
} );
    }, false );
    
    menuItemClearCurrent.addEventListener( 'click', function() {
T( 'done', {
  option: 'clearCurrent'
} );
    }, false );
    
    menuItemCopyWhole.addEventListener( 'click', function() {
T( 'done', {
  option: 'copyWhole'
} );
    }, false );

    menuItemCopyCurrent.addEventListener( 'click', function() {
T( 'done', {
  option: 'copyCurrent'
} );
    }, false );

    menuItemCutWhole.addEventListener( 'click', function() {
T( 'done', {
  option: 'cutWhole'
} );
    }, false );

menuItemCutCurrent.addEventListener( 'click', function() {
T( 'done', {
  option: 'cutCurrent'
} );
    }, false );

};

init();
</script>

</body>

</html>

 

トランスルーセントはオフにしています。このアクションをTextwellで選択すると下のようなボタンが出てきます。

Textwell

ボタンを押すと選択したアクションが起きます。

変えたのはid名と最後のアクションの部分です。function()部分は消しています。

このようにfunction()部分を書かなくても動くのでEvernoteやDropboxへの共有などをボタンで選択形式にするなどもできるのかなと思っています。

まとめ

ボタンで選択形式にするのであればこのアクションの前半部分はそのまま使うことができます。

また内蔵ブラウザの使い方がちょっとわかったので、うまく使えば文章の編集とかしやすくなるのかなと思います。

この間の記事で書いたT.request()はAPIが公開されているアプリとかサービスを利用したら使えそうだなくらいまではわかってんですが、APIの利用自体をしたことがないのでまだ研究中(-_-;)でも使えるようになったらToodledoにタスクを複数追加したりGoogleMapsの情報を埋め込んだりできるのかな~なんて夢見てます(笑)

 - iPhoneアプリ ,

   

スポンサードリンク

スポンサードリンク

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事