「ブレークポイントを使用したデバッグ」 Chrome DevTools Tips集 #2 | 開発ツール | UI's Blog
Sourcesタブの使い方を知りたい方普段 console.log() を使用してデバッグをしていて、より効率的にデバッグをしたいと考えている方コーディング力だけでなくデバッグ力も大切だと考えている方 ブレークポイントを使用したデバッグ方法 ブレークポイントとは、設定することで、プログラムの実行を任意の場所で一時停止し、停止した場所の変数の状態やコールスタック（関数の呼び出し経路）を確認できます。他にも、停止した場所からコードの実行を一つ一つ自分で進めることができます。 次のコードを例として、ブレークポイントとの使い方を解説していきます。 ↑のコードの簡単な説明といたしましては、配列で渡した数値の合計を返すsum関数と、平均値を表す average 関数を定義しています。average 関数の内部では、sum 関数を使用しています。 average 関数を実行したときの動作をブレークポイン
インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」
Lite Editorはインライン要素に特化したオープンソース国産WYSIWYGエディタです。国産CMSとして名高いa-blog cmsを提供するappleple社さんの開発されたエディタで、a-blog cmsのようなブロックタイプのCMS向けに作られたそう。従来のWYSIWYGエディタでは意図しないスタイルになってしまう事も多く、異なる記事編集者間でテイストも異なってしまう問題もありますが、インライン要素のタグ挿入に特化させる事でそういった編集者間の差異を無くすのが目的のようです。これは良いですね。使い方も日本語で詳しく書かれています。ライセンスはMITとの事です。 Lite Editor on Githubインライン用のWYSIWYGエディターLite Editorをリリースしました。
SaCSS Special 13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTEND に登壇しました | 活動 | mkasumi.com
8月5日に開催された SaCSS Special 13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTENDに登壇しました。まさかSaCSSのSpecialでお話ができる日がくるとは思いもしていなかったので、当日がとても楽しみでした！ 主催者のハムさんからお話をいただいたときに、「ゆるふわで」とせっかく言っていただいたので、いつもとは違った感じにしようと思い、私が現在持ってる「ゆるふわ」を全力投球しました（普段（特にa-blog cms や、一度も行ったことがない地域で）はもう少し真面目なスライドを作っています）。 さて、今回は主に2つの方に向けてお話しました。 デザインルールの存在を知らなかった方 もう少し発展したスタイルガイドを作りたい方 スライドではデザインルールの存在を知らなかった方を中心にお話ししました。そもそもドキュメントを作る理由がわからなければお話を理解
スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | JavaScript | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。 弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。 SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピン
a-table.js - リッチな機能を持ったHTMLテーブルを出力 MOONGIFT
Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。 そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。 a-table.jsの使い方 デモです。上にあるテーブルがa-table.jsの適用例です。文字寄せや色の変更などができます。 カラムを追加できます。 日本語も問題なく使えます。 さらに太字の変更も。 行についても追加や削除ができます。 a-table.jsではHTMLでの出力はもちろん、Markdown形式でも出力できます。ただしMarkdownの場合は文字装飾などの情報は失われています。ビジュアル的にテーブルデータを操作できるので、表計算的な利用もできるでしょう。 a-table.jsはJavaScript
「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com
2016年9月23日（金）に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。 今回お話しした理由 今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。 私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので（開発環境、作業効率、メンテナンス性などなど）、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし
業界研究「マークアップエンジニア」森田霞さん（アップルップル）
2015年度Webデザイン学科で最初の「業界研究」授業を行いました。今年度は学生に年齢が近い方々に仕事の内容や学生時代の話、今後業界に向けてといった内容を授業で話していただいています。 初回は「マークアップエンジニア」ということで、トライデントコンピュータ専門学校からもほど近い有限会社アップルップルさんから、森田霞さんにお越しいただきました。 マークアップエンジニアのお仕事は、主にHTMLとCSS, JavaScript記述して、Webサイトを構築するお仕事ですが、アップルップルでは自社CMS「a-blog CMS」を利用した実装はもちろん、CMS本体の管理画面などの制作も行っています。 また、それ以外にもアップルップルでは「Webでの記事執筆」「USTREAMなどでの配信」「インタビュー」「セミナーでの登壇」「イベント（WCANなど）の運営」などを任されています。そのため必要となるスキル
入社2年目マークアップエンジニアの情報の集め方 | 活動 | mkasumi.com
2014.10.22 | 活動 入社2年目マークアップエンジニアの情報の集め方 アップルップル公開社内勉強会で「入社2年目 マークアップエンジニアの情報の集め方」というタイトルで発表しました。 今回は初めてGoogleスライドを使ってみました。 入社2年目 マークアップエンジニアの情報の集め方 SlideShareにもアップしてみました。お好きなほうでご覧ください。 情報収集はWeb制作者には欠かせないスキル 入社1年目のとき、新人の入る隙は情報収集だと思ってがんばっていたのですが、入社2年目にして先輩が退職されるというまさかの展開にまた情報収集をがんばることになりました。 どの立場にしろ、情報収集は大事だなあと実感した今、公開社内勉強会という場を借りて新人さん2人に向けてお話ししてきました。 お話の内容 情報収集の大切さ 新しい情報を収集する すでに浸透している情報を収集する 情報を発信
月間10,000PVのブログになるまでに学んだSEO｜ひびの備忘録
みなさん、ブログ書いていますか？ 「書く時間もないし、なに書いていいかわかんないし、続かないし、まず先にブログをちゃんと作ってからはじめたいし・・・」 「書きたいんだよ！書きたいけど、なんだかんだ書けない理由があって書いてないんだよ・・・。」 そんな心の声をお持ちのみなさんに、ブログを始める・再開するきっかけになれば嬉しいです。 私のモットー 私はブログをはじめてからしばらくの間、ソーシャルに流すことを頑に拒否し、あくまで自分の備忘録用として外部には公開せずに書いていました。（理由は単に恥ずかしかったからです。）そんな私に転機が訪れたのはブログをはじめて11ヶ月目、「Googleアナリティクス導入手順」を初めて自分でSNSに流した時です。 その記事を読んだ知り合いから、「丁寧でわかりやすい。」と言ってもらえました。 「丁寧に書くと人に喜ばれるんだ！」と、褒められた子供のような単純な動機です
CMSプロトタイピングを活用したアップルップルのWeb制作のワークフローについて | kazumich.log
この4ヶ月間、名古屋・大阪・仙台・山形・神戸・広島・静岡・東京・札幌・福岡と日本各地をまわってきました。その中で紹介してきたアップルップルのWeb制作のワークフローについて、ココにも書いてみる事にしました。 一般的には、サイトの設計・デザイン・マークアップ・CMS実装・データ登録という流れでWebサイトを制作しているんじゃないかと思います。例えば、この1つの行程が1週間だったとすると、完成までに5週間という事になるし、少し規模が大きく1つの行程が1ヶ月だったとすれば、5ヶ月という事になる。この後は、小規模なサイト（1人1週）という事で話を進めていく事にする。 管理画面にアクセスできるのは随分後である 小規模なサイトという事で話を進めていく事にする。この場合、クライアントは管理ページにアクセスできるようになるのは4週目以降になる。しっかり打ち合わせをしたとして、以下のようなカスタムフィールド
a-blog cmsのモジュールとテンプレート（離） - ハブろぐ - blog.ayumusato.com
ハブろぐ - blog.ayumusato.com WEBなことしてます。お酒大好き。ソフトウェア、ユーザビリティ、認知科学、ガジェットetc...散漫な話題が多い雑記です。 今回はモジュールIDの設定と、モジュールを使い回す為の機能についてです。 モジュールIDは何が設定できるの？ 引数を指定できます。引数というのは、IDを振られたモジュールが、どこの情報を取得するかの指定のようなものです。例えば、エントリーの一覧を出力するモジュール(Entry_List)で、特定のカテゴリーの記事だけを出力したいときにCID（カテゴリーID）を指定します。 下のスクリーンショットはプリインストールできるCompanyテーマの例ですが、Entry_Listに対してCID=1と指定するとで、新着情報のカテゴリー(CID=1)のみを出力するように指定しています。件数や並び順などの設定は別画面で個別に設定す
a-blog cmsのモジュールとテンプレート（破） - ハブろぐ - blog.ayumusato.com
ハブろぐ - blog.ayumusato.com WEBなことしてます。お酒大好き。ソフトウェア、ユーザビリティ、認知科学、ガジェットetc...散漫な話題が多い雑記です。 どうもです。佐藤です。最近はまとまったサイズのシステムの制作にいそしんでいます。サイズが大きくなると考える事も増えますね。SEの研修を受けている友人の話を聞くと、フローとか機能の設計をしっかりやっているようです。僕も、もうちょっと頭を使った方がいいのかもしれません…。 例によって勘で使える人は、読み飛ばし推奨の記事です。今回は初心者向けではありませんが、教科書的に整理しているだけの内容です。 今回は、モジュールを中心とした、管理ページとテンプレートの関係についてです。 管理ページとテンプレートの関係 a-blog cmsは設計上、とてもきれいに機能や役割が整理されています。それはモジュールとテンプレートの関係でも同
a-blog cmsのモジュールとテンプレート（序） - ハブろぐ - blog.ayumusato.com
a-blog cmsのモジュールとかテンプレートについて （CMS初心者向けです。他のCMSをご利用の経験がある方は読み飛ばし推奨です） a-blog cmsを使う上で基本になるのは、モジュールとテンプレートの概念です。何となくでも実は使える気もするシステムですが、これらの動作をガッツリ理解しておくといいかもです。その上でルールとかモジュールIDとか、カスタムフィールドの考え方が生きてくるので。 モジュールについては以前、イマイチだった記事を誤ってRSSに乗せてしまったハプニングもありましたが、懲りずに今回も中途半端な記事をあげておくの巻。 a-blog cms モジュール a-blog cmsのモジュールは、Webサイトでよく使われている機能をパーツ化したものです。以下で、a-blog cmsで用意されているモジュールの一部をご紹介します。 Entry_Headline 記事のヘッドラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WCAN 2017 Winter に参加してきた – RachicOm
kryoi.com
4kakudez.com
4kakudez.com
名古屋発、“絶対お得な沖縄”特集、東京第一ホテルオキナワグランメールリゾートに泊まる、沖縄旅行4日間
WCAN2013 SummerでLTしてきました | mkasumi.com
AutoPagerizeに対応してみた ハブろぐ - havelog.ayumusato.com