ども、ゆうせいです。文章作成スピードは速い方だと勝手に思っていますが、実はそれには理由があるのです。面倒なHTMLなどのタグを一瞬で展開し、タグとタグの間にクリップボードの文言を挿入したり、それらを全部アプリにまかせているからなんです。 というわけで、Macの無料アプリ「Dash」を使って、文章作成スピードを爆速にしようぜって話をします。 補足と言ってはなんですが、 “文章入力スピードをｎ倍速くする「Markdown記法」について語ろう” って記事も書いていますので、お好みで選んでいただければと思います。 HTMLのタグをポチポチ打つのしんどい！ しんどいってのは正直なところ言い過ぎましたが、これを覚えてしまうともう無しではしんどいのが実状です。 たとえば、見出しを設定するときのHTMLタグは、 <h2>見出し</h2> ですよね。 これって、どうやって書いてます？ 一文字ずつポチポチと
勉強会での発表資料を作成するにあたり、まずMarkdownで話そうと思うことを適当にメモしてるうちに、なんか発表資料このままで良くない？と思えてきました。別に レイアウトや配色のセンスに自信があるわけでもない し。。 で、最初 "markdown pagination" でググってみるとあまりパッとしたのがなかったのですが、"markdown presentation" にしてみると出るわ出るわ。しかもどれも結構よさげ。 というわけで出てきたものをメモがてら書き留めておきます。結論からいうとググって一番上に出てきた "Remark" が今回の要件に（ほぼ）マッチしていたので、他はまだ使ってません。 Remark 長所 GitHubでソース公開されてる 無料 ログイン不要 不満があれば自分で修正してpull request送れる Swipe 長所 テンプレートやフォントが複数用意されてる（っ
1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での
スライドを作りたい photo by James Jordan 勉強会に出席するような意識の高い読者諸賢であれば、各々様々な方法でスライドを作っているかと思います。 僕は、markdownを使って楽にカッコイイスライドを作ろうと、今までいろいろ試行錯誤してきたのですが、どれも僕の要求を満たすような感じではなくて、結局Keynoteを使ってせっせとスライドを作っていました。 Decksetが凄く良い Markdownからスライドショーを生成してくれる「Deckset」というMac用のアプリを2000円も出して買ってみたのですが、凄く良かったのでご紹介します。 https://itunes.apple.com/jp/app/deckset-turn-your-notes-into/id847496013?mt=12&uo=4&at=10l8JW&ct=hatenablog Deckset fo
メモ書きやらブログの下書きにMarkdownを使い始めたわけなんですが、まぁこれが快適でして。さっくり下書きできて後で簡単にhtmlに起こせると言うのが嬉しいです。学習コストも大した事ないし。 Markdown使うためにMac、iPhone、iPadに導入したエディタアプリ で、↑の記事ではMacでMarkdownを書く時にMouを利用し、ときたまSublime Textを使っていると書いたのですがメインエディタをやっぱりST2にしました。 キャレットが増やせなかったり、やっぱりビジュアルが我慢できなかったり、Mouを使ってると「もう〜」ってなる瞬間が多かったので。Mouだけに。Mouと感嘆詞の「もう〜」がかかってます。すごい。 そんなわけで今回はSublime TextでMarkdownを快適に書くために導入したプラグインと設定を書いておこうかと思います。（なお、私の環境はMac + S
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい！ プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
ブラウザをリロードして欲しい時に勝手にリロードしてくれるウェブ開発者向けのMacOSX用アプリケーションです。 HTMLやCSSなどのファイル編集を監視し、保存と同時に今開いているブラウザのタブをリロードします。動作確認をするためにブラウザをリロードする手間が省きウェブ開発に快適さをもたらします。 対応するブラウザは、現在のところChromeとSafariです。 ダウンロード 使い方 CHANGELOG フィードバック 過去のビルド ダウンロード 以下のリンクからzipをダウンロードし、適当な場所に解凍すると使えるようになります。動作確認はMaxOSX Lionで行なっています。 WatchReload-0.0.1.app.zip 使い方 WatchReloadを起動すると、メニューバーにWatchReloadのメニューが表示されるようになります。 メニューからStart Watching
Web制作でhtmlやCSSを書いたり、ブログの執筆、文書作成をするにあたってテキストエディタはとても重要になってきます。 しかし、テキストエディタは、有償無償問わずたくさんの種類があり、どれが自分に合っているのかわからない人も多いことと思います。 今回は、「完全無料」で使うことのできるエディタに限定し、高機能であったり、シンプルで使いやすいテキストエディタをまとめてみました。 尚、筆者がMacユーザーの為、Macでしか使えないものが多いです。 [Mac限定]オススメのMacテキストエディタ13選 CotEditor CotEditerは様々なエンジニアやライターの方が使っている言わずと知れた超有名エディタです。CotEditerは日本で開発されたため、日本語で使用することが可能です。 シンプルで、動作も軽快です。オープンソースで提供されていることもあり、日々機能が進化しています。 主な対
Codaは終売しました。 サポートやプラグインのご入手などはライブラリをご参照ください。 他社製のCodaはこちら。 ...まったく新しい、Macにネイティブなウェブコードエディタの誕生です!
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない（一部再生できるブラウザアプリはありますが）ので、困った困ったなのです。 そこで次代を担う（であろう）コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる！ 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi
Page Layersは、すごいウェブのキャプチャアプリ。なんとキャプチャするサイトを、DIVやIMG要素ごとにレイヤー分割したPSDにしてくれるのだ！ これは素敵と言わざるをえない。 ビデオをみれば使い方は一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的な。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。 プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか
わかってる人にはもう「何を今さら」という話かもしれませんけど、悲しい思いをすることが多いのでここであらためてお願いします。 ウェブサイトに金額を書くとき、円記号 (¥) を使う際には HTML に ¥ ではなくて ¥ と書いていただきたいのですお願いします。 日本語環境の Windows 端末から入力した円記号は、日本語環境の Windows で見ると円記号になってますけど、その他の多くの環境であれはバックスラッシュになります。 日本語版の Windows でこう表示されていても その他の環境ではこうなります。 HTML 内に \ ではなく ¥ と書けば基本的にはどの環境でも ¥ が表示されるはずなので、円で金額を書く時にはぜひ ¥ にしていただきたいのですお願いします。 こいうことが起きている事情はこのあたりで。 日本語用文字コードにおける円記号 – Wikipe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
