- 投稿日：2021-11-23T17:25:51+09:00
C#とコンポーネントを使用してExcel文書をHTMLに変換する方法
C#とコンポーネントを使用してExcel文書をHTMLに変換する方法 背景 作業には、財務を対象として処理する場合、大量のデータを計算したり統計したりすることがあります。皆さんの知ってるとおり、Excelファイルは非常に人気があり、データ処理の分野で広く使用されています。Excelを使用すると、保存されているデータに対して数学的な計算を実行できますが、データを表示する場合、Excelを直接使用することは特に適切ではありません。他の形式で表示されたいなら、HTMLはいい選択かもしれません。故に無料のコンポーネント、Spire.XLS for .NETを見つけてその変換を実現しました。では詳細を紹介します。 Spire.XLS for .NETとは？ Spire.XLS for .NETは、開発者がC#やVB.NETプラットホームでExcelの文書ファイルを迅速かつ高品質で作成・編集・変換・印刷するために設計された専門的な Excelライブラリです。 中には、無料版のFree Spire.XLS for .NETと商用版のSpire.XLS for .NETがありますが、基本的な機能を搭載しているので、無料試用でも日常の仕事には結構だと思います。 コード一覧： 1 まずはWorkbookのインスタンスを作成します。WorkbookはExcel文書を展示できます Workbook workbook = new Workbook(); 2 最初のSheetを取得します Worksheet sheet = workbook.Worksheets[0]; 3 最初のSheetのセルA1を「TEXT」に設定します sheet.Range["A1"].Text = "TEST"; 4 最後は文書を保存します workbook.SaveToFile("result.xlsx", FileFormat.Version2010); このライブラリを使用してExcelファイルを開いて作成すると非常に便利です。以下の生成されたファイルのスクリーンショットを見てください。 HTMLに変換する よし、既にExcel文書を作成した以上、これからはExcelをHTMLに変換します。 1 先ずはWorkbookのインスタンスを作成し、Excel文書を表示します。 Workbook workbook = new Workbook(); 2 サンプルファイルをロードします workbook.LoadFromFile("sample.xlsx"); Worksheet sheet = workbook.Worksheets[0]; 3 一ページ目のテーブルをHTMLに変換します sheet.SaveToHtml("result.html"); 元ファイル： 作成されたHTMLファイル： 以上です、最後まで読んでいただきありがとうございます！
- 投稿日：2021-11-23T16:58:11+09:00
Webの勉強はじめてみた その1
N予備校で「プログラミング入門 Webアプリ」の受講を始めました。 個人的に気付いた点とか諸々を、ここでは少しずつ書いていきたいと思います。 今日やったこと 1. Chromeのデベロッパーツールでjavascriptの実行。 2. VS code を使ったhtmlファイルの作成。 気付いたこと 1. Chromeのデベロッパーツールでjavascriptの実行。 alert みたいなダイアログで、日本語を書いたときに、「;」を全角にしてエラーになることがある。 alert("こんにちは")； alert("こんにちは"); 多分「こんにちは」の後に;を打つからこうなる。癖？ 2. VS code を使ったhtmlファイルの作成。 VS codeで「html:5」でタブを押すとひな形ができる。 知らなかった。 で、テンプレートで作られる<meta>の中ってよくわからない単語を見かけることが多い気がする。 何がしたいのかっていう。 <meta http-equiv="X-UA-Compatible" content="IE=edge"> ここが端的でわかりやすかったです。 https://www.creativevillage.ne.jp/2819 あと、<html lang="ja"> langを書かないとどうなるのか。 https://www.tohoho-web.com/html/attr/lang.htm まとめ とりあえず初日はこんな感じ。 もしかしたら解説動画だけで進めてもいいかもしれない。 これからゆっくり進めていきます。
- 投稿日：2021-11-23T14:03:43+09:00
Web APIを使って、特定の音声に対して返答するWebアプリの作成
背景 ひとり暮らししていると 家に帰って「ただいま」 といっても返答がない 悲しい… そんなことありますよね。 この悲しさを少しでも緩和してくれるアプリを作成しました。 制作物 このCodepenを参考にしました。 こちらのCodePenでは音声の認識と出力が別になっています。 今回は、 Web APIを使用し、特定の入力音声に応じて音声が出力されるように作成しました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>あいさつ返答</title> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script> <body> <h1>あいさつ返答アプリ</h1> <div id="app"> <p> 音声読み込み <button @click="listen">{{ recogButton }}</button> {{ result }} </p> <p> 発話させる（日本語）<br> <input v-model="message" /> <button @click="say">しゃべって！</button> </p> </div> <script> //音声認識 const app = new Vue({ el: '#app', data: { recogButton: 'スタート！', recog: null, result: '', speech: null, message: '', }, mounted() { // 音声認識の準備 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition || null; this.recog = new SpeechRecognition(); this.recog.lang = 'ja-JP'; this.recog.interimResults = false; this.recog.continuous = false; // 音声認識が開始されたら this.recog.onstart = () => { this.result = ''; this.recogButton = '聴き取り中…'; }; // 音声を認識できたら this.recog.onresult = (event) => { // 認識されしだい、this.resultにその文字をいれる // Vueなので、文字をいれただけで画面表示も更新される this.result = event.results[0][0].transcript; //修正箇所 if (this.result == 'おはよう' || this.result == 'おはようございます') this.speech.text = this.result; else if (this.result == 'いただきます') this.speech.text = '召し上がれ'; else if (this.result == 'ごちそうさま' || this.result == 'ごちそうさまでした') this.speech.text = 'お粗末さまでした'; else if (this.result == 'ただいま') this.speech.text = 'おかえり'; else if (this.result == 'ただいま帰りました') this.speech.text = 'おかえりなさいませ、ご主人様'; else if (this.result == 'ありがとう' || this.result == 'ありがとうございます') this.speech.text = 'どういたしまして'; else if (this.result == 'ごめんなさい' || this.result == 'すいません') this.speech.text = '気にしないでね'; else if (this.result == 'こんにちは') this.speech.text = this.result; else if (this.result == 'はじめまして') this.speech.text = this.result; else if (this.result == 'お疲れ様' || this.result == 'お疲れ様でした' || this.result == 'お疲れ') this.speech.text = this.result; else this.speech.text = "すみません、よくわかりません"; return new Promise((res) => { this.speech.onend = () => res(); speechSynthesis.speak(this.speech); }); }; // 音声認識が終了したら this.recog.onspeechend = () => { this.recog.stop(); this.recogButton = '再開'; }; // 認識できなかったら this.recog.onerror = () => { this.result = '（認識できませんでした）'; this.recog.stop(); this.recogButton = '再開'; }; // 発話の準備 this.speech = new window.SpeechSynthesisUtterance(); this.speech.lang = 'ja-JP'; // または、ブラウザが対応している言語のうちja-JPな最初のボイスを使う window.speechSynthesis.onvoiceschanged = () => { const voices = window.speechSynthesis.getVoices(); this.speech.voice = voices.find(voice => voice.lang == 'ja-JP'); console.log(this.speech.voice); }; }, methods: { // 認識（聞き取り） listen() { this.recog.start(); }, // なんかしゃべる（いちおう非同期対応） async say() { return new Promise((res) => { this.speech.text = this.message; this.speech.onend = () => res(); speechSynthesis.speak(this.speech); }); }, }, }); </script> </body> </html> 完成したコードペン 変更点とコード解説 this.recog.onresultメソッド内のthis.resultに入力された音声が格納されるため そこをif文で条件分岐させました。 返答させたい文章がthis.speech.text変数に格納されています。 もっといろんな音声に対応させたい場合はforkして編集してみてください。 Tips ■CodePenのプラグイン 各言語の右側に歯車マークがあります。 そこでプラグインの設定や確認ができます。 CodePen外で使用する際は、適宜挿入が必要でした。 ■Web API ・これいれるだけでバイブレーションが使えます。 何かに使用できそうです... window.navigator.vibrate(2000); ・公式ドキュメント ＞ インターフェース 大量にありますが、いずれ全てに目を通したいと思います。
- 投稿日：2021-11-23T10:43:00+09:00
hoverで変化するsns共有ボタン
Fontawesomeを使ったiconは便利ですよね、ただシンプルなので味気ない気もします。 今回はちょっとアレンジしたいと思います！ 前提 HTML CSS Fontawesome（CDN） Bootstrap (CDN) だけで実装可能です！ 動作はこちらで確認してください 実装 まずはHTMLファイルのheadに以下のコードを追加してください index.css <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> これでFontawesomeとBootstrapが使えます。 使用アイコン 以下のように描くことでTwitterとInstagramのアイコンが使えます index.css <i class="fab fa-twitter fa-3x"></i> <i class="fab fa-instagram fa-3x"></i> /*-「fa-3x」と書いているのはサイズを大きくしているからです。消してもらっても構いません-*/ これでアイコンの実装が完了しました。 少しアレンジしていきたいと思います。 index.html <div class="row text-center mt-5 pt-5"> <div class="col-6 mb-3"><a href="#" class="tweet"><i class="fab fa-twitter fa-3x"></i></a></div> <div class="col-6 mb-3"><a href="#" class="insta"><i class="fab fa-instagram fa-3x"></i></a></div> </div> ＊ここで使っているbootstrapのクラスについて説明します row: 画面を12分割する mt, pt: margin-top, padding-topのことです。 1 ~ 5まで指定できます。 text-center: text-align: center;と同じ col-6: rowと合わせて使うことで12分割したうちの6カラム使用するとなります。 mb-3: margin-bottomのことです。1 ~ 5まで指定できます。 アイコンだけだと味気ないので、枠に入れたいと思います。 index.css .tweet{ text-decoration: none; /*--aで括っているのでリンクの下線などを消すために設定しています--*/ color: black; } .tweet i{ border: 2px solid black; border-radius: 50%; /*--ここで丸くしています-*/ padding: 10px; ちょっとだけ見やすくなりましたね！ 色も変えちゃいましょう index.css .tweet{ text-decoration: none; color: white; } .tweet i{ border: 2px solid white; border-radius: 50%; padding: 10px; background-color: skyblue; } twitterっぽくなりました！ 最後に一工夫です。 このアイコンにカーソルが乗った場合に変化させましょう！ index.css .tweet{ text-decoration: none; color: white; transition: all 0.3s ease; } .tweet:hover{ color: blue; } .tweet i{ border: 2px solid white; border-radius: 50%; padding: 10px; background-color: skyblue; transition: all 0.5s ease; } .tweet i:hover{ border-radius: 0; transform: rotate(360deg); background-color: white; border: 2px solid skyblue; } /*----- インスタグラム ------*/ .insta i{ border: 2px solid red; border-radius: 50%; padding: 10px; cursor: pointer; transition: all 0.5s ease; background-color: white; } .insta i:hover{ border-radius: 0; transform: rotate(360deg); background-color: red; border: 2px solid red; } .insta{ text-decoration: none; color: red; transition: all 0.3s ease; } .insta:hover{ color: white; } transitionをhoverさせたい要素に加えることでhoverした時のcssが適用されるまでの時間や動きかたを変更できます。 tweetの例で見ると、0.3秒かけてゆっくり変化させています。 transition: all 0.3s ease; all => どのプロパティに適用するか 0.3s => 「s」か「ms」として指定できます ease => 動きかたの指定 以上で実装をおわります！ 注意点としては、transformの指定は"a"タグや"span"タグに対しては指定できないみたいなので注意してください！
- 投稿日：2021-11-23T09:45:50+09:00
HTML、CSS、JavaScriptのファイルをリンクさせる方法
はじめに Webサイトの開発をやっているとHTML、CSS、JavaScriptのファイルを主に扱うのですが、その3つのファイルをリンクさせて、HTMLに適用する方法を紹介したいと思います。 環境 Mac OS Monterey MacBook Pro M1 VS Code 本編 主にHTMLのファイルにCSS、JavaScriptを適用させる感じです。 HTMLとCSS head上にこのように記載します。 <link rel="stylesheet" href="ファイル名.css"> HTMLとJavaScript bodyタグの一番最後にこのように付け足します。 <script type="text/javascript" src="ファイル名.js"></script> これで完了です。