新規ファイルはフッターメニューの「+」アイコンを押すと作成できます。name」を入力し、「Template」を「HTML5」を選択すると...なんということでしょう!最初から必須タグが入っています。ページタイトルを入力。先程伏せ字だらけになったコードをbodyタグの中にペースト。日本語部分を打ち直す。これを全選択してcodepenにペースト。ほっ、伏せ字が消えました。次はCSSを作成しましょう。新規ファイルを作成してください。「Template」は選択不要です(HTML系のみのため)。HTMLにあったclass名.testを入力して、次にブロックの波括弧{を打ちたい。記号は前回紹介した「斜めフリック」で出せます!!また、backgroundプロパティを打とうとしたらbaの時点で変換候補が現れる。なんと、行末セミコロン;まで一気に出ました!しかもカーソルがセミコロンの前にあるのがまた心憎い!前回も書きましたが、タブが記号として用意されてるのもいいですね。インデント(字下げ)が入りコードが見やすくなります。快適に打ち終わったスタイルをcodepenにペースト。最後、JSを作ります。新規ファイルでTemplateは無しで。こちらも用意された変換候補が出てきます。関数のfunctionを打とうとするとfuの時点でもう候補が現れます。指定すると、なんということでしょう。ブロックの最後まで一気に現れます!イベントリスナaddEventListenerもadの時点で候補が出ます!指定するとカッコの中に引数3つもセットされてます!clickイベントに打ち変えます。素晴らしい!codepenにペースト!.testを押すと...ジャジャジャジャーン!アラートが出ました。成功!codepenの埋め込みもtextasticでさて、完成したcodepenをブログに埋め込みたい。PCの時は右下に「embed」ボタンがあるのだが...な、ない。どこにもない!?ブラウザを横向きにしてもPC表示にしても見つからない。仕方がないので、以前のブログで貼った埋め込みコードを流用しようと思います。textasticでテンプレとして保存しましょう。src="https://static.codepen.io/assets/embed/ei.js"></script>hogehogeのところにタイトルを、hogeにはcodepenの投稿のURLにある下層パスを貼ります。https://codepen.io/i_ryo/pen/MPKGmWそれをはてなブログにペーストします。CodePen..testのテキストを押してみてください。アラートが現れます!スマホ版textastic内の機能ブログに必要な操作はやり終えましたが、今後の展開としてtextasticだけでwebコンテンツを作ることもやってみたい。前回タブレットで見ていった機能がスマホ版ではどうなっているか見たい。斜めフリックまず先程の斜めフリック。記号とローマ字をいちいち切り替えなくて済むので嬉しい機能だ。これがあればスマホさ物理キーボードなくても行けそうに思えた。カーソル移動もう一つ、キーボード部分を強く押す3Dタッチでカーソルがマウスのように自由に動かせる。これは他ののアプリでも有効な機能。*1タブ切り替え複数のファイルを同時に開き、上の水色のタブで切り替えられる。左下のメガネアイコンを押すとブラウザでのプレビューが立ちがります。開発ツールプレビュー画面ですフッターメニューの上矢印アイコンを押す。firebug」を押すと...開発ツールが!横向きの方がよく見えました。FTPへのアクセスtextasticからFTPやクラウドなどに直接アクセスできます。上メニュー右から三番目、説明が難しいが、テキストエディタのようなアイコン。これを押すと...次の画面は真っ白かもしれませんが右上のプラスアイコンを押すとFTP情報入力画面になります。多くなったので画像にシャドーをつけたり、見出しをPC版のように色付けたくなった。はてなブログアプリでマークダウン使えたのは大きい。あとcodepenの使いづらいところをtextasticが見事にカバーしてくれました!codepenのアプリが出てくれればまた楽しい展開がありそうだが、ブラウザ版でもせめてembedボタンだけでも実装してほしいものです。*2パソコン「でも」タブレット「でも」スマホ「でも」技術ブログが書ける。時と場所と道具に縛られず活動ができるので、やはり選択肢が多いのはとても良いことだと感じました。これからより自由な形態でブログを書いていけそうです。※参考:Web開発環境の記事まとめqiita.com*1:3Dタッチは廃止されるという噂もある。02:12Tweet関連記事2019-10-23【Googleアナリティクス】主なメニューからユーザー層をイメージする以前書いたGoogleアナリティクス(GA)の続きです。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-01-17ブログに埋め込めるオンラインIDE比較(サーバサイド版のCodePenを探して)フロントエンド言語(HTML、CSS、JS)の記事を書くときにいつも...2018-11-02HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)あるとイイね!なフロント代替言語「HTMLテンプレートエンジン...2018-09-30【iPad】ソフトウェアキーボード(QWERTY、フリック、グライド)と物理キーボード比較お絵描きしたくて購入したiPad。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。