はてなブックマーク

W3Techs.com では、日々の CMS (Content Management System) のシェアとして Usage statistics of content management systems が公開されています。日本での上位20位の CMS の世界での状況を見てみると ↑上がっているのが Wix 3.3% 、Adobe Systems 1.6%、Jimdo 0.1% 、Concrete CMS 0.1%  となっており、↓ 下がっているものは WordPress 64.5% ↓ 、Shopify 6.6%、Drupal 1.9%、HubSpot CMS 0.4%、Gatsby 0.3%、Zendesk 0.2% と、先月と比べると少しだけ ↑↓ のついている CMS のシェアに変化がありました。 多くのサイトで CMS のシェアについては、この世界でのシェアで語られるこ

レスポンシブデザインの普及により、デバイスの画面サイズに合わせてコンテンツを動的に調整することが一般的になりました。しかし、このアプローチは、特に ＜table＞要素などの広いコンテンツを含むページで課題を生じさせることがあります。 スマートフォンのような狭い画面では、重要な表データを見やすく表示させることが難しく、収まらない部分をスクロールさせることで解決できないかと考え、その際にスクロールできる事を気づいてもらうために、私たちが開発したのがユーザーに視覚的なヒントを提供するJavaScriptライブラリ「ScrollHint」を作りました。 2018年にリリースし、今では多くのサイトで「スクロールできます」を見かけるようになりました。ありがとうございます。また Google や X で ScrollHint を検索してみると、ブログの記事 や 感想の POST を見つけることができ、大

フォーム送信時にフォームの内容をローカルストレージに自動で保存し、再度そのフォームに訪れた際にストレージからデータを復元するためのJavaScript、FormStorageをリリースしました。 同じフォームの送信内容の復元はもちろんのこと、別のフォームでもローカルストレージのデータの使い回しができるのが特徴です。 https://appleple.github.io/form-storage/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

スクロール時にスクロール量に応じて要素を固定するためのJavaScriptを公開しました。そういったJavaScriptは世間でこれまでもいくつか公開されていたのですが、「どの範囲まで固定するか」また「スマホ時はスクロールを中断するか否か」などそういった多くのシチュエーションに耐えうるJavaScriptがなかったので、今回、実際に案件レベルで使えるように一からJavaScriptを書いて、公開するに至りました。 https://appleple.github.io/pretty-scroll/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

弊社では「ベースキャンプ名古屋」というコワーキングスペースの運営を5年ほどおこなっております。今回は「Google マイビジネス」について少し書いてみようと思います。ちなみに上記の写真は 2013/02/08 にアップした写真で 67,200回ほど Google のサイトで表示されているようです。 Google検索 で「ベースキャンプ名古屋」で検索すると検索結果の横に表示される店舗の情報は、この Google マイビジネス でコントロールすることができます。「今日は営業しているかな？」とか「どこにあるんだろ？」というようなことであれば、サイトに訪れることなく検索した人はココで目的を達成することができてしまいます。 また、Googleマップでも同様ですね。マップ側では、直接店舗名でなく「業種」である「コワーキングスペース」を検索してエリア内にある店舗を探しているのですが、そこでも写真付きで情

一般的なWYSIWYGエディターにはスタイルを調整するための、ボタンがデフォルトで付いていて、文章の中の文字サイズや色などを自由に変更できてしまいます。またリストやテーブルなどのインライン以外のタグも挿入できてしまうため、余計な空白が発生したりして、デザインの統一性が損なわれることがありました。 そのためルールが徹底されていないと、記事の編集者によって全く異なったテイストの記事ができあがってしまうこともあります。そこで今回弊社が開発したJavaScriptライブラリが、 Lite Editor です。Lite EditorはブロックタイプのCMS向けに開発されたWYSIWYGでインライン要素のタグ挿入に特化しています。 a-blog cmsでは、エントリー（記事）の編集画面で、ユニットと呼ばれるブロックと組み合わせて利用されています。 <h2>画像と見出しのレイアウト例</h2> <p>こ

ページ間をスムーズに遷移させるためのJavaScriptは数多く配布されていますが、使い方が複雑だったりHTMLの構造上の縛りがあるものが多く、気軽に使えるライブラリはあまり多くありません。そこで、a要素に対してクラスを振るだけでスムーズにページ間遷移をするJavaScriptを今回作成しました。 https://appleple.github.io/lookforward/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。 弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。 SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピン

アップルップルの運営しているコワーキングスペース「ベースキャンプ名古屋」では定期的に「Webマーケティングの日」というイベントが開催されており、今月のテーマとしては「Google Optimize を触ってみよう！」ということでした。

この a-table.js は、弊社で開発している a-blog cms の中で利用するために作られた「テーブル編集用のJavaScript」を、より多くの人に利用してもらえるようにライブラリ化したものです。 ExcelライクなUIで直感的に操作でき、テーブルのHTML出力が可能です。テーブルが書きかわる度にHTMLを取得できるのでCMSの入力インターフェースとしてもご利用いただけると思います。

modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。

この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。

サービス Service アップルップルはWebとシステムのプロフェッショナルとして、 あなたと誰かをつなぐインターネット活用のお手伝いができます。 Webサイト制作 Website Development なぜ、誰に、何を、どうやって伝えるのか。 閲覧者のニーズをお客さまとともに考え、発信・更新のしやすいWebサイトを制作します。 もっと見る